Ermac Ermac - 2 years ago 97
HTML Question

Change page content with background audio

A client just asked for a book-reading website with the following settings:

  • Must have a nav-bar with a menu and a background-music on/off button.

  • The menu are links to different content.

  • The content must change as users desire.

Here comes the tricky part:

  • If the background music it's ON, then the audio must play along even if the content changes (the only way I know to change the content is refreshing the URL but this also cuts the audio)

Is there a way to achieve this effect? with JavaScript or Jquery?
I really appreciate your help. If you post a simple JSFiddle I would be very pleased.

Answer Source

You will need to make a Single Page Application (SPA). This means you will have one .html file and use AJAX to load the contents of different pages into that file instead of having multiple .html files and reloading the browser. If you reload, the Audio WILL stop.

Here's what you need to do:

  1. Learn the HTML5 Audio API. In other words, learn var audio = new Audio(src),, audio.pause(), etc.

  2. Learn how to make AJAX calls (a framework can help you make the AJAX calls. Easiest choice is jQuery)

Here's a demo app on Plunker:

Press the play button and change pages. Notice how the music continues to play while the pages changes.

Also, your server will need to be configured to send you the contents of the pages via AJAX so you can avoid having separate .html files for different pages and refreshing.

This is what Soundcloud uses for continuous playback. They use backbone.js, but any decent framework will do.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download