Ibrahim Ayyoub Ibrahim Ayyoub -3 years ago 106
HTML Question

Is it possible to continuously play music on a website while switching to other pages on html?

I'm not sure if my question was clear or not (since I'm new to web development) but what I'm trying to say is:

I have this HTML line,

<embed src="Music/Disfigure%20-%20Blank.mp3" autostart="true" loop="true"
width="2" height="0">

When I view my website, the music starts playing as it should, but when I switch to another page, it starts from the beginning again. How can I keep it from restarting when I switch to a different page?

Answer Source

It is possible but its a little more complex than you might think. In order for the music to continuously play, the site needs to be setup in a manner where navigation causes the same page to update rather than loading a new page. One way to do this is with AJAX.

You can read more about AJAX here: https://www.w3schools.com/xml/ajax_intro.asp

AJAX is a developer's dream, because you can:

  • Update a web page without reloading the page
  • Request data from a server - after the page has loaded
  • Receive data from a server - after the page has loaded
  • Send data to a server - in the background

The basic theory is that you simply grab the content from the new page, and replace the content on the current page. This way the user never actually leaves the page so the music that is playing will continue to play. The reason it restarts when going to a new page is because the browser is having to reload everything when you change pages.

Barba.js is a great way to get up and running fast with AJAX. You can also add in great animations with it as well. http://barbajs.org/

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