Member Avatar for kukula

Hi there,

I found a website called: https://www.aupeo.com
What interested me on this site is when you click the links (eg This is AUPEO!; My Profile; International and so on) , you are still at the same site. Music is streaming non-stop.

I would like to know how to make this kind of site, or just to know which attributes i have to use to get this effect?

  • 3 Contributors
  • 4 Replies
  • 132 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by weekendrockstar

Dani AI

Generated

As asked about keeping music playing while the rest of the site changes, and as and already hinted, the simplest modern pattern is to keep a single, persistent audio player in the top-level document and swap only the page content. That gives the continuous-play behavior without reloading the audio. The two practical, widely used approaches are: build a small single-page app (SPA) or intercept internal links and load fragments via AJAX while updating the URL with the History API.

A minimal SPA-style pattern looks like this: put an audio element in the root, intercept internal link clicks, fetch the new page fragment and replace the main container, and call history.pushState so back/forward still works. Example (very small):

<audio id="player" controls crossorigin>
  <source src="/stream/track.mp3" type="audio/mpeg">
</audio>

<script>
document.addEventListener('click', e => {
  const a = e.target.closest('a');
  if (!a || a.target === '_blank' || a.origin !== location.origin) return;
  e.preventDefault();
  fetch(a.href).then(r => r.text()).then(html => {
    document.getElementById('main').innerHTML = extractMain(html);
    history.pushState({}, '', a.href);
  });
});

window.addEventListener('popstate', () => {
  fetch(location.href).then(r => r.text()).then(html => {
    document.getElementById('main').innerHTML = extractMain(html);
  });
});
</script>

Notes and caveats: mobile browsers often block autoplay until a user gesture — see autoplay policy. Cross-origin streams require proper CORS headers. If you need adaptive streaming (HLS/DASH) some browsers need a JS player shim. Service workers can help with caching but cannot directly play audio. If an SPA is too invasive, a small popup or a persistent iframe are fallbacks but are less user-friendly. Useful references: HTML5 audio element, History API, CORS, Service Worker API.

Recommended Answers

All 4 Replies

Member Avatar for weekendrockstar

It looks to me that it's a proprietary flash player they've created for their purposes. It continues playing the same song even when you load another page. And it looks like the artists pages use javascript to tell the flash player what to load such as when you click on a "listen to (artist's name)" link.

Not entirely certain but the methods that they use make it difficult to see into the background.

Member Avatar for kukula

I see. Thank you for info.

Member Avatar for torbatt

It looks to me that it's a proprietary flash player they've created for their purposes. It continues playing the same song even when you load another page. And it looks like the artists pages use javascript to tell the flash player what to load such as when you click on a "listen to (artist's name)" link.

Not entirely certain but the methods that they use make it difficult to see into the background.

This is awesome.

is it jquery plugin or other plugin
or it is custom made javascript

Member Avatar for weekendrockstar

Well I am assuming that the flash is custom made for their site. The javascript calls are probably somewhat routine but can't really tell because I can't tell how their flash player handles the calls to it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.