Play music across pages?

Question

So currently I have a simple template I use across all pages. It goes something like this:

<html>

<head></head>

<body>
  <h1>My website</h1>
  <div id="audio-player">
    <audio controls>
      <source src="music.mp3" type="audio/mpeg">
    </audio>
  </div>
  <p>Content</p>
</body>

</html>

Where the <p>Content<p> is located, is the different content I have. One page has the history of our music group, and the other page has images of our instruments, for example, between the <p> tags.

The thing is, every time someone navigates between the pages on our site, the music stops. How would I link the <div id="audio-player"> to load across the site without stopping the music? I heard there is a way of using AJAX to do this sort of thing, but I cannot find a way to implement it so that the <div> appear on all site and never unloads?

If you want to keep the audio playing while navigating through the site, the simplest solution would be to use a 'single-page app'. This means that when a user wants to navigate, the page won't reload, instead, you'll have Javascript load and display the requested page without reloading the page. — Gregor Menih, Jan 22 '16 at 22:51
Or he can use an iFrame, the user would then navigate trough the iFrame and the music player would be outside the iFrame. — Phiter, Jan 22 '16 at 22:54
But with a single page app/iframe, the URL doesn't change. What if one wants to bookmark the different content? They'd have to bookmark the whole page and find it again once they load the page again. — EndenDragon, Jan 22 '16 at 22:54
@PhiterFernandes oh, I completely forgot about iFrames. That is a much simpler solution. The URL does change. AngularJS is an example framework that changes the URL as you navigate. — Gregor Menih, Jan 22 '16 at 22:55
@JeremyZh With an SPA, using AngularJS, the page CAN be bookmarked depending on how the routing is setup — Evan Bechtol, Jan 22 '16 at 22:56
Here is a music player that may interest you it is easy to install and will play seamlessly thoughout your site. http://scmplayer.net/ — Steve K, Jan 22 '16 at 23:05
@JeremyZh try pushstate to change url with single page app- maybe less of a learning curve than Angular: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState — Michael Tallino, Jan 23 '16 at 01:36

Play music across pages?

0 Answers0