218 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Located in Canada
+4 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 ?

2461 posts
  • Has been part of the Envato Community for over 5 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 … ?

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

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

218 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Located in Canada
+4 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

2461 posts
  • Has been part of the Envato Community for over 5 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().

218 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Located in Canada
+4 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 :/

2461 posts
  • Has been part of the Envato Community for over 5 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/

218 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Located in Canada
+4 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 :)

2206 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
  • Sells items exclusively on Envato Market
+4 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

73 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+1 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