218 posts
  • Canada
  • Elite Author
  • Exclusive Author
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
  • Referred between 100 and 199 users
  • Sold between 250 000 and 1 000 000 dollars
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 ?

2444 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says

Hey Simon,

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

1660 posts
  • Most Wanted Bounty Winner
  • Won a Competition
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Sold between 50 000 and 100 000 dollars
  • Has been a member for 5-6 years
+4 more
flashedge says

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

218 posts
  • Canada
  • Elite Author
  • Exclusive Author
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
  • Referred between 100 and 199 users
  • Sold between 250 000 and 1 000 000 dollars
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

2444 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says

jQuery’s .load().

218 posts
  • Canada
  • Elite Author
  • Exclusive Author
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
  • Referred between 100 and 199 users
  • Sold between 250 000 and 1 000 000 dollars
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 :/

2444 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
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
  • Canada
  • Elite Author
  • Exclusive Author
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
  • Referred between 100 and 199 users
  • Sold between 250 000 and 1 000 000 dollars
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 :)

2186 posts
  • Repeatedly helped protect Envato Market against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
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
  • Bought between 10 and 49 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 1 000 and 5 000 dollars
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