Hello. I checked out the other posts on this topic and none have resolved my issue. I have built a site in Webflow for a client who now insists on having background music (that auto-loads instead of having a controller). If the mp3 (ogg) file is sitting on our host’s server, shouldn’t I be able to simply embed this code and have it work?
If my code is okay, then perhaps the issue is where I am embedding it on the Webflow page? I tried both the custom code section in the HEAD tag, then I tried the BODY tag – and finally, I tried using the code in an “Embed” element I dropped on the page.
Hi Dave! Here is the link for the website in question.
You can hear the music on the homepage because I’ve embedded the code in the body tag. But I need the song to continue playing no matter which page the visitor clicks on. That’s my current dilemma. Where do I embed that code so it plays throughout the site???
Thank you so much for helping me out with this.
Jeannette
Do not forget to do for your visitor the opportunity to turn off the music. Otherwise, he can leave.
I like to browse the site listening to online radio or music from your hard drive. And if I go to a website, on which background music playing, I immediately close it. In general, I think the background music used on the site is a bad idea. This is how you open a book and starts beeping melody as a musical postcard.
I agree with what you are saying Barsik, but in this case, the painter and the opera singer are promoting themselves together on the website – so visitors are going to the site specifically to hear the music while they browse the gallery.
In any event, I’m hoping to hear back from Cyberdave with a solution to the problem.
In case any one else has trouble adding uninterrupted background music to their Webflow site, here is how you do it:
copy/paste this text into the “custom code” section of your Webflow dashboard in the Head Code.
make sure you’ve got the full source tag for the location of your mp3 file.
save and publish.
there will be a small hesitation as you move from page to page, but otherwise, the song will play continuously.
I have only tested this in IE and Chrome, so perhaps there will be some tweaks which I will update here for you.
<audio preload="auto" src="locationofsong.mp3" loop="true" autobuffer>
</audio>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
if(!played){
if(tillPlayed){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,1000);
</script>
The problem I have now is that there is a gap in the music when navigating from one page to the next. My client is about to pull the plug if I can’t resolve this issue. I know this is not a webflow-specific problem – but if there is anything you can offer for an immediate resolution, I would be so grateful. It’s a beautiful site; lots of time invested in building it. Please reply as soon as possible.
There is no way to keep music continuously streaming without custom code. I think your client is looking for something that SoundCloud.com does.
Whenever a new page is loaded, the browser has to reload everything. Including the music. If you really want a simple fast solution, just open the music in another tab
