How to Make an <Audio> File Play Continuously on All Pages

Audio continuously playing across all pages?

Not across multiple page loads. But you can have a single page which plays audio and provides navigation therein for the user. A couple overarching structural options would include:

1. Create a Single Page Application (SPA). Here your one "page" would play the audio, and the site navigation would happen within this single page instance with JavaScript/AJAX. The browser would only ever load one "page", but the overall application would dynamically load/unload as elements of that page as you see fit.
2. (A very old method, but still works) Create a parent page with frames for navigation. The parent (frame) page would contain the audio, and the rest of the navigation through the application would be done in frames within that page.

I'd recommend the first approach, but either would work.

How to play audio continuously on all pages using jPlayer?

Is there possible to play audio continuously without using ajax?

For audio to play continuously, uninterrupted, it needs a continuous, uninterrupted connection and page 'state'.

There are two basic ways to handle this:

• load the player on to a page and have the rest of the content load as a person navigates via AJAX. This preserves a 'single page/single connection' for player.

• Stick the player on a page and the rest of the site load into an iFrame. This does the same as the AJAX option but adds the inconveniences of iFrames to the experience.

How to continue playing the same music in HTML even on different HTML pages or when you refresh the page

Instead of making hundreds of individual pages with just a few words on them, just make it one huge page where you show and hide divs on click. That way you only ever have to edit one page anyways and the music won't stop. I feel that that would be the easiest way. It would also keep the browser history from being hella long.

Here, try this, super simplified:

.black{background-color:#000;color:#fff;}.black button{background-color:#fff;color:#000;}.white{background-color:#fff;color:#000;}.black button{background-color:#000;color:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(document).ready(function(){  $('section:not(#start)').hide();  $('.btn').on('click', function(){    showThis = $(this).data('target');    $('section').hide();    $(showThis).show();  });});</script><section id="start" class="black">Go <button class="btn" data-target="#upstairs">Upstairs</button>Go <button class="btn" data-target="#downstairs">Downstairs</button></section><section id="upstairs" class="white">Go back <button class="btn" data-target="#downstairs">Downstairs</button>Go to the <button class="btn" data-target="#bathroom">bathroom</button></section><section id="downstairs" class="white">Go to the <button class="btn" data-target="#bathroom">bathroom</button></section><section id="bathroom" class="black">You're Dead. Start  <button class="btn" data-target="#start">again</button></section>

How to play audio uninterrupted while navigating pages on a website

Those websites are using AJAX in order to display different pages.. You cannot do anything as the audio playing will stop when refreshing/redirecting the page.

AJAX is not slowing down the page.. the request load time should be the same as a regular page load.. You can find more details about changing the URL dynamically here: Updating address bar with new URL without hash or reloading the page

NOTE: You must take in consideration the possibility that the user disabled javascript.

There are techniques to show search engines that you have dynamic URLs. Usually you must have regular pages which will be pointed to the dynamic URLs. Here is the Google docs which describes how to create an website which uses AJAX in order to let the bots to crawl the pages: https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

How to play a sound continuously without break?

Use the AudioContext API and its bufferSourceNode interface, to have seamlessly looped sounds.

Note that you'll also need your audio to be correctly edited to avoid crackles and sound clips, but yours seems good.

const aCtx = new AudioContext();let source = aCtx.createBufferSource();let buf;fetch('https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav') // can be XHR as well  .then(resp => resp.arrayBuffer())  .then(buf => aCtx.decodeAudioData(buf)) // can be callback as well  .then(decoded => {    source.buffer = buf = decoded;    source.loop = true;    source.connect(aCtx.destination);    check.disabled = false;  });
check.onchange = e => {  if (check.checked) {    source.start(0); // start our bufferSource  } else {    source.stop(0); // this destroys the buffer source    source = aCtx.createBufferSource(); // so we need to create a new one    source.buffer = buf;    source.loop = true;    source.connect(aCtx.destination);  }};

<label>play audioBuffer</label><input type="checkbox" id="check" disabled><br><br>Just to compare <audio src="https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav" loop controls>

---

Related Topics