HTML5 Audio player: technical question

Hello,

I want to add background music to a website using a HTML5 audio player, placing it like a top bar on top of everything and I want to keep the music playing while people navigate through the website.

I don’t know how to proceed, I saw this already a while ago and can’t remember how it’s done…

Anyone ?

Hey Simon,

Well you’d definitely need to load in content via AJAX – is that the issue or … ?

Either use AJAX or store all content into a single page to avoid reloading.

digitalimpact said
Hey Simon, Well you’d definitely need to load in content via AJAX – is that the issue or … ?

Yes, via AJAX but how, is there something already built for this kind of scenario ? The site i’m building is actually based on this theme : http://themeforest.net/item/wowway-interactive-responsive-portfolio-theme/2374321

jQuery’s .load().

digitalimpact said
jQuery’s .load().

So the topbar is loaded via AJAX but when visitors navigate through the website, everything will refresh and so the background music… I need a static div sitting on top of everything, acting like a iframe… don’t know how to achieve this with jquery.load :/

The HTML5 audio player would be on that page, not loaded via AJAX . Everything else would need to be loaded, though.

Here’s something that might help you better understand the idea: http://css-tricks.com/video-screencasts/81-ajaxing-a-wordpress-theme/

digitalimpact said
The HTML5 audio player would be on that page, not loaded via AJAX . Everything else would need to be loaded, though. Here’s something that might help you better understand the idea: http://css-tricks.com/video-screencasts/81-ajaxing-a-wordpress-theme/

Thanks! That helped a lot

Greetings to another Canadian

Check out my Kiss template i used the mp3 player on the bottom and it does not reload once you change pages.

Cheers

Lester

Hey,

The only way you’re going to achieve this is by loading the content in via Ajax, as in our theme here . It’s really not that hard to do, you can load content in via Ajax with just a few lines of jQuery!

The only tricky bits (which arent really so tricky either) are:

Including a loading image/gif while the new content loads. Checking that all the ajax content has loaded.

If you get stuck I’d be more than happy to give you a hand.