226 posts
  • Helped protect Envato Market against copyright violations
  • Became a Top 20 Author of the Month
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in Canada
+6 more
simonbouchard
says

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 ?

2468 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+3 more
digitalimpact
says

Hey Simon,

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

1664 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Won a Most Wanted contest
+8 more
flashedge
says

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

226 posts
  • Helped protect Envato Market against copyright violations
  • Became a Top 20 Author of the Month
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in Canada
+6 more
simonbouchard
says

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

2468 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+3 more
digitalimpact
says

jQuery’s .load().

226 posts
  • Helped protect Envato Market against copyright violations
  • Became a Top 20 Author of the Month
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in Canada
+6 more
simonbouchard
says

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 :/

2468 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+3 more
digitalimpact
says

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/

226 posts
  • Helped protect Envato Market against copyright violations
  • Became a Top 20 Author of the Month
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in Canada
+6 more
simonbouchard
says

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 :)

2321 posts
  • Became a Top 20 Author of the Month
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
+6 more
Nitro_Themes
says

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

76 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+2 more
MihaiMarcuta
says

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.

by
by
by
by
by
by