Cross-browser background music on main page with stop link

HTML & CSS
1

How do you play background music in IE/FF/Chrome/Safari and stop it via javascript? <I know this is a bad idea, but client wants it and I warned him several times…>

I tried this below but it does not stop playing in Safari (unless you go View &gt; Source ? ) it does works in FireFox. Internet Explorer does not even play the music.

the HTML:
<OBJECT ID=“BackgroundMusic” DATA=“music/background.mp3” TYPE=“audio/mpeg” height=“0” width=“0”>
<PARAM NAME=“autostart” VALUE=“true”>
<PARAM NAME=“hidden” VALUE=“true”>
</OBJECT>

<p class=“music” onClick=“StopBackgroundMusic()”>Stop Music</p>

The javascript

function StopBackgroundMusic()
{
var MusicObj = document.getElementById(“BackgroundMusic”);
MusicObj.data = “nothing.mp3”;
MusicObj.autoplay = “false”;
MusicObj.autostart = “false”;
}

2

NEVER make your site play music without the visitor’s PRIOR permission. Sites that do that I leave and don’t return. And I am not alone.

3

Likely the mpeg thing is causing issue. Do all browsers even know what an mpeg is? Who wants to go download the plugin for annoying music they didn’t ask for?

4

Sounds to me like it’s time to give the client a firm shake to explain to them the seriousness of what their asking for. Part of the web designers job is education and you really need to find out the reasoning behind why they want such an obtrusive feature. Unless they have a very serious need for something like that (I do know of a couple of exceptions where it could be deemed OK - but those were for VERY specific audiences), in general - 99.99% of websites whom implement such mechanisms not only violate accessibility recommendations (and thereby potentially the law) but they also dramatically increase the likelihood someone will leave their website on the grounds of the music (there was a study saying the increase of traffic loss could grow by 200%). Perhaps you’re not putting the point across as well as you could as I’ve yet to meet a business or individual that’s been suicidal enough to want to damage their brand and business with something as silly as a music player. :slight_smile:

5

What your client is asking for is impossible.

In addition to the situations you have already discovered where it doesn’t work, it will also not work for anyone without JavaScript.

The closest you can get to what they asked for is to link to the sound file instead of using an object tag. The visitor can then click the link to start the sound running in their own audio software and then use the controls in that software to stop it when they want.