Embedded audio player and mouseover sound in FF2

andycarlsson · Post by **andycarlsson** » February 23rd, 2008, 6:30 pm

I live in China, where I work as a teacher.

Last year I was putting together a site which included sound to help some of my students.

I needed to use an embedded player which would work in both IE and FF, not using Flash or any special plugins, because due to the internet restrictions where I live for some reason Flash very rarely works and you cant download and install plugins very easily.

So, eventually I found and used the two bits of code in the page the link for which is pasted below and everything was fine, the embedded player and the mouseover sound both worked fine in FF and IE.

However, I took some time off due to illness, and now when I have started working on the site again I find that although the code still works fine in IE it doesn't work with FF2.

I would be really really grateful if somebody could suggest some ajustments to the code so that once again I can make both the embedded player and the mouseover sound work in FF and IE.

Here is the link to a page which has the two bits of code on :

http://www.sweetlingo.com/soundpage.html

Thanks for your help

jscher2000 · Post by **jscher2000** » February 23rd, 2008, 6:51 pm

Do you have a backup? Most of your <embed> tag is missing:

Code: Select all

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 
  codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" 
  standby="Loading Microsoft Windows Media Player components..." 
  type="application/x-oleobject" height="1" width="1">
    <param name="url" value="sountest2.mp3">
    <param name="uiMode" value="full">
    <param name="autoStart" value="true">
    <param name="loop" value="true">
    <embed type="application/x-mplayer2"><br>
</object>

Well, as an alternate, you could write a cross-platform <object> tag. That would mean not using the CLASSID attribute.

http://www.alistapart.com/articles/byebyeembed

andycarlsson · Post by **andycarlsson** » February 24th, 2008, 1:40 pm

How do you mean?

Sorry, I know remarkably little about anything to do with coding, I'm just an English yeacher :-s

All the code I got was from help forums like this and I just did basic adjustments to it to make it do what I wanted on my pages, but most of it was trial and error.

I tested the page which I linked to and it works fine in IE, plus it used to work in the old version of FF, but now when I look at it in FF2 it is all messed up.

I tried to paste in my actual source code, copied from notepad, but when I paste it into the body of the message and preview it, large chunks of the code are missing, sorry.

jscher2000 · Post by **jscher2000** » February 24th, 2008, 2:23 pm

Toward the end of your code, above, you open an <embed> tag. However, most of it is missing. Do you have a backup of your page from when it used to work? If so, you can reconstruct your <embed> tag.

If not, the article linked above shows exactly how to change your <object> tag to work in multiple browsers.

(And for what it's worth, I'm a lawyer. ;-)

)

andycarlsson · Post by **andycarlsson** » February 24th, 2008, 4:58 pm

The code on the page which I linked to you is exactly the same as what I was using before, I just uploaded the page again from my hard drive to be able to give you the link, but I hadnt changed it in any way.

The problem is not that it doesnt work - it always has worked, and it still does work in IE and in FF 1.02, but for some reason it doesn't work in the new FF2 (which I have only just got - Im on holiday in California at teh moment, I couldnt download it from where I live in China, internet access is very restricted)

So what I am really wondering is : what is there about the code which means that, although it works fine in IE and in older versions of FF, it doesnt work in the newest version of FF?

I know that FF2 was only released very recently, but the page linked to above is from July 2006, which is right around the time when I built my original page, so I'm wondering whether or not the methods outlined in that page will have the same results as what I originally used - i.e. it works fine in the older versions of FF, but not in the most recent one?

If possible, I would like to make as few changes as possible - with the internet restrictions where I live in China very often Flash doesnt work and it is even very difficult for most ordinary users to download the Quicktime plugins, but the arrangement which I had before was OK because most people had WMP and so could use the pages without too much hassle.

Anyway, all thoughts would be very much appreciated :-)

jscher2000 · Post by **jscher2000** » February 24th, 2008, 5:59 pm

Hmmm, you might have installed the Mozilla ActiveX plugin into your Firefox 1.02, which would allow Firefox 1.5 or below to read and process the CLASSID. To see whether your Fx1.02 has the plugin, open about:plugins (enter that in the location bar and press Enter) and look for npmozax.dll.

That plugin is not a suitable solution for a public web site because: (1) most people do not have it installed; (2) it is difficult to force it to run with Firefox 2; and (3) one of the more desirable characteristics of the Firefox security model is that it does not run ActiveX controls.

Try this code edit:

Code: Select all

<object type="application/x-mplayer2" height="1" width="1"
    data="sountest2.mp3">
    <param name="url" value="sountest2.mp3">
    <param name="uiMode" value="full">
    <param name="autoStart" value="true">
    <param name="loop" value="true">
</object>

Any luck?

Edit: There is a typo in the file name there. And I guess you really need to replace the PlayIt() script. I haven't looked at that yet.

jscher2000 · Post by **jscher2000** » February 24th, 2008, 6:14 pm

Okay, I've taken a closer look and it looks as though various tags have piled up in a dysfunctional manner. Your original script still works. Here is how your page can work most simply, by removing all the excess instances of media players:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>sound page</title>
  <style type="text/css">
#music {
position:absolute;
top:0;
left:0;
}
  </style>
  <script type="text/javascript">
function PlayIt(what){
document.getElementById('music').innerHTML='<object width="1" height="1" '
+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
+'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
+'<param name="url" value="'+what+'">'
+'<param name="uiMode" value="full">'
+'<param name="autoStart" value="true">'
+'<param name="loop" value="true">'
+'<embed type="application/x-mplayer2" '
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
+'showcontrols="true" uimode="full" width="1" height="1" '
+'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
function stopIt(){
document.getElementById('music').innerHTML='';
}
  </script>
 </head>
 <body style="height: 204px;">
  <a href="#here" onmouseover="PlayIt('soundtest2.mp3')" onmouseout="stopIt()">Play</a>
  <div id="music"></div>
 </body>
</html>

andycarlsson · Post by **andycarlsson** » February 24th, 2008, 7:53 pm

Hi,

First of all, thanks very much for your reply, I really appreciate everybody who is taking an interest.

I used the code which you pasted, but there seem to be a couple of problems.

The embedded player doesn't appear in either IE or FF, and the mouseover sound only works in IE, not FF. :-s

Any ideas?

jscher2000 · Post by **jscher2000** » February 24th, 2008, 9:17 pm

andycarlsson wrote:The embedded player doesn't appear in either IE or FF, and the mouseover sound only works in IE, not FF.

Sounds plays for me. Make sure you have JavaScript enabled.

I deleted the other players, but you can paste it back in wherever you like:

Code: Select all

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" height="1" width="1"><param name="url" value="soundtest2.mp3"><param name="uiMode" value="full"><param name="autoStart" value="true"><param name="loop" value="true"><embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" uimode="full" src="soundtest2.mp3" autostart="true" loop="true" height="1" width="1"></object>

andycarlsson · Post by **andycarlsson** » February 24th, 2008, 10:10 pm

OK, thanks for that, I realised that it didnt work in FF when I opened it from my hard drive, but it works fine when I upload it to the website and then open it from there.

I have some other questions I really need to ask about it though, but for some reason when I try to paste my code into the reply box, when I preview it most of the code is missing.

I notice that you have code pasted into your replies all neatly surrounded by a box - how dya do it?

jscher2000 · Post by **jscher2000** » February 24th, 2008, 10:25 pm

The MozillaZine Forum parser removes attributes from HTML code. To prevent that, check the box to "Disable HTML in this post". If you don't see this checkbox, click Preview and it should appear below your text editing area. And code will lay out better (indenting preserved) if you surround it with the BBCode [code] and [/code] tags.

For a new question, you probably want to start a new thread. Most people aren't going to read down a long one to find something new. :-)

andycarlsson · Post by **andycarlsson** » February 25th, 2008, 12:28 am

OK thanks

Actually, the questions are related to this bit of code, it isnt a separate question.

The codes which we have been talking about are really for two different types of pages, one with several words which need mouseover sound links, and other pages with three of the embedded player in to play longer audio segments of one to two minutes.

In order to manipulate these properly when building the pages, I wanted to know a bit more about the code which you sent me.

Im guessing that the bit at the beginning of the page is for an embedded player, which is hidden by being only 1 pixel high and 1 pixel wide, right? Is this the code for that embedded player ? :

Code: Select all


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
 <head> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
  <title>sound page</title> 
  <style type="text/css"> 
#music { 
position:absolute; 
top:0; 
left:0; 
} 
  </style> 
  <script type="text/javascript"> 
function PlayIt(what){ 
document.getElementById('music').innerHTML='<object width="1" height="1" ' 
+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" ' 
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,5

2,701" ' 
+'standby="Loading Microsoft Windows Media Player components..." 

type="application/x-oleobject">' 
+'<param name="url" value="'+what+'">' 
+'<param name="uiMode" value="full">' 
+'<param name="autoStart" value="false">' 
+'<param name="loop" value="false">' 
+'<embed type="application/x-mplayer2" ' 
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" ' 
+'showcontrols="true" uimode="full" width="1" height="1" ' 
+'src="'+what+'" autostart="false" loop="false">' 
+'</object>'; 
} 
function stopIt(){ 
document.getElementById('music').innerHTML=''; 
}

Am I right in thinking that the bit of code below that what enables the mouseover sound to work, by utilising the hidden player ? :

Code: Select all

</script> 
 </head> 
 <body style="height: 204px;"> 
  <a href="#here" onmouseover="PlayIt('soundtest2.mp3')" onmouseout="stopIt()">Play</a> 
  <div id="music"></div>

If so, when I want to put several words on a page each of which will play a different sound file on mouseover, do I just put the one long chunk of code at the beginning, and then put multiple copies of teh shorter second code wherever I want the mouseover word to be, adjusting the link so that it will play the relevant sound file?

Also, second problem.

The other code for the embedded player which you gave me :

Code: Select all

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,

701" standby="Loading Microsoft Windows Media Player components..." 

type="application/x-oleobject" height="100" width="240"><param name="url" 

value="soundtest2.mp3"><param name="uiMode" value="full"><param name="autoStart" 

value="false"><param name="loop" value="false"><embed type="application/x-mplayer2" 

pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" 

uimode="full" src="soundtest2.mp3" autostart="false" loop="false" height="100" 

width="240"></object>

It works in both IE and FF, but the problem is that in FF it autostarts, although it doesnt in IE. As you can see from teh chunks I have posted above, I have changed all the "autostart" instructions to "false", but it still does it. This is a problem, because I will have three separate audio links on every page, and obviously if they all start playing simultaneously when the page loads it will be a mess. What I need is a way to make sure that in both IE and FF they will not start to play until the visitor clicks on them.

Thank you very much indeed for all your help and patience, I appreciate it a lot.

:-)

jscher2000 · Post by **jscher2000** » February 25th, 2008, 4:41 pm

Regarding the first question, yes, you're right about the script. Mousing over the links inserts a new player, which autostarts, and mousing out deletes that player. The CSS rules do not change the size of the player, they position it at the top left corner of the <body>.

On the second question, try autostart="0" rather than false. That works for some of the plugins.

andycarlsson · Post by **andycarlsson** » February 25th, 2008, 8:13 pm

And we have a winnerrrrrrrrrrrrrrrrrrrrrrrrrrrr!!!!!!!!!!!!!!!

It's aliiiiiiiiiiiiive, it's aliiiiiiiiiiiive !!!!!!!!!!!!!

Thank you so much for all your help, you are a scholar and a gentleman.

Now all we have to do is wait for one of the browsers to shift the goalposts again, and I will be back once more to beg for help.

Until then, adieu and sweet dreams.

(And by the way, if anybody needs help with English or Chinese grammar by way of part exchange for coding advice, I would be more than happy to oblige :-)

)

Embedded audio player and mouseover sound in FF2

Embedded audio player and mouseover sound in FF2

errrr... not too sure what you mean

aaaaaaaaaaaaaayyyyyyyyyyyyyyyy!!!!!!!!!!!!!!