Add background music to page

Hi all,
I have a project where I need to add an ambient music file to the website, which is playing in a loop and automatically in the background of the home page.

I have a perfect example what I am aiming to: http://sterling.it/en/

Is anyone here experienced with this kind of implementation?

Would love to hear from you!

Your help is very appreciated. :slight_smile:

Best,
Cedric

1 Like

Did you search the forum for background music? If you haven’t, give that a shot first.

I did. There are similar posts, but nowhere I can find a real working solution :confused:

Try this:

 var source = "audio/burger.mp3"
 var audio = document.createElement("audio");
 //
 audio.autoplay = true;
 //
 audio.load()
 audio.addEventListener("load", function() { 
     audio.play(); 
 }, true);
 audio.src = source;

Directly from jquery - autoplay html audio created with javascript - Stack Overflow

Make sure to have your audio uploaded somewhere: Dropbox, Google Drive etc. Copy and paste the shareable link and add it as your src.

Hi Robin

Thank you for your help. Unfortunately it’s not working. Have you tried it somewhere?
Maybe I miss something in the HTML or something.

Yes, just tried it out and it’s working great :slight_smile:

Here’s how the code looks:

If you’re using Dropbox, make sure to change the last number from a 0 to a 1 in the shareable url.

image

Oh okay, gotta try that. And you don’t use HTML with it? only JS?

Here a sharable link to my test project https://preview.webflow.com/preview/web-audio-test?utm_medium=preview_link&utm_source=dashboard&utm_content=web-audio-test&preview=064423a55d19db1275c3cc9ad10ef0e7&mode=preview

I use cloudinary.com for my file, maybe thats the problem?

Yeah, it’s JS generating a HTML audio element, adding its source and starts playing it.

Your published site does play music for me: https://web-audio-test.webflow.io. I’m not sure if there’s some browser setting that might refuse to autoplay the song, but it works great from here in Chrome.

Oh yes, true, now its working in Safari. Maybe my Chrome settings are not right.
Do you know if there is a way to just toggle that off and on?

Just tested it again. In Chrome it’s still not working. But it worked once in Safari. But after a few seconds, it gets stopped. Do you know why?

You could try the HTML5 audio tag. Add the word “controls” inbetween audio and autoplay if you want to see audio controls on the page. Obviously replace the src link to the audio file in this example with your own audio file hosted somewhere online.

More information here.

I tried adding this to my site and it didn’t work. Tried viewing it on Microsoft Edge and Chrome, only the text “Your browser does not support the audio element”.