Audio Player on Internet Explorer and Firefox

[Gideon]

Hi,

I want to display a player on my web page for audio messages but the player wont display on MS. Explorer.

Please take a look at my experimental page in Firefox and Internet Explorer. http://www.5loaves2fishes.org.nz/5L2Fexperiment.htm

Here is the relevant code:

<object type="audio/midi" data="Midi/Teachchildren.mid" height="44" width="230">
<param name="src" value="Midi/Teachchildren.mid" />
<param name="autostart" value="false" />
<param name="controls" value="default" />
<param name="loop" value="false" />
</object></a>

Can someone suggest a fix so that it works in both browsers?

Gideon

[DJ-Zep]

<OBJECT ID="MediaPlayer" WIDTH=153 HEIGHT=45
CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading.. Please Wait."
TYPE="application/x-oleobject">

<PARAM NAME="FileName" VALUE="Midi/Teachchildren.mid" valuetype="ref" ref>
<param name="AudioStream" value="1">
<param name="AutoSize" value="0">
<param name="AutoStart" value="1">
<param name="AnimationAtStart" value="0">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="5">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">

<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="1">
<param name="DisplaySize" value="1">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="0">

<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowControls" value="-1">
<param name="ShowAudioControls" value="-1">

<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="0">
<param name="ShowStatusBar" value="-1">
<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="0">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="333333">
<param name="VideoBorder3D" value="17">
<param name="Volume" value="-2000">
<param name="WindowlessVideo" value="-1">
<EMBED TYPE="application/x-mplayer2" SRC="Midi/Teachchildren.mid" NAME="MediaPlayer" WIDTH=320 HEIGHT=45>
</EMBED></OBJECT>

There you are sir. Any questions, just reply.

[Gideon]

Awesome DJ! Many thanks.

Just one more question. Can most of that be put on my stylesheet and only the SRC bit placed on my page? Because, I have half a dozen pages like that and its quite a lot of code.

Thanks

[DJ-Zep]

I'm blanking out right now as far as link statements go. You can, however, use php includes.

Here's how:
First, create a PHP (.php) file and put these contents in:

<OBJECT ID="MediaPlayer" WIDTH=153 HEIGHT=45 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading.. Please Wait." TYPE="application/x-oleobject"> <PARAM NAME="FileName" VALUE="Midi/Teachchildren.mid" valuetype="ref" ref> <param name="AudioStream" value="1"> <param name="AutoSize" value="0"> <param name="AutoStart" value="1"> <param name="AnimationAtStart" value="0"> <param name="AllowScan" value="-1"> <param name="AllowChangeDisplaySize" value="-1"> <param name="AutoRewind" value="0"> <param name="Balance" value="0"> <param name="BaseURL" value> <param name="BufferingTime" value="5"> <param name="CaptioningID" value> <param name="ClickToPlay" value="-1"> <param name="CursorType" value="0"> <param name="CurrentPosition" value="-1"> <param name="CurrentMarker" value="0"> <param name="DefaultFrame" value> <param name="DisplayBackColor" value="0"> <param name="DisplayForeColor" value="16777215"> <param name="DisplayMode" value="1"> <param name="DisplaySize" value="1"> <param name="Enabled" value="-1"> <param name="EnableContextMenu" value="-1"> <param name="EnablePositionControls" value="-1"> <param name="EnableFullScreenControls" value="-1"> <param name="EnableTracker" value="-1"> <param name="InvokeURLs" value="-1"> <param name="Language" value="-1"> <param name="Mute" value="0"> <param name="PlayCount" value="0"> <param name="PreviewMode" value="0"> <param name="Rate" value="1"> <param name="SAMILang" value> <param name="SAMIStyle" value> <param name="SAMIFileName" value> <param name="SelectionStart" value="-1"> <param name="SelectionEnd" value="-1"> <param name="SendOpenStateChangeEvents" value="-1"> <param name="SendWarningEvents" value="-1"> <param name="SendErrorEvents" value="-1"> <param name="SendKeyboardEvents" value="0"> <param name="SendMouseClickEvents" value="0"> <param name="SendMouseMoveEvents" value="0"> <param name="SendPlayStateChangeEvents" value="-1"> <param name="ShowCaptioning" value="0"> <param name="ShowControls" value="-1"> <param name="ShowAudioControls" value="-1"> <param name="ShowDisplay" value="0"> <param name="ShowGotoBar" value="0"> <param name="ShowPositionControls" value="0"> <param name="ShowStatusBar" value="-1"> <param name="ShowTracker" value="-1"> <param name="TransparentAtStart" value="0"> <param name="VideoBorderWidth" value="0"> <param name="VideoBorderColor" value="333333"> <param name="VideoBorder3D" value="17"> <param name="Volume" value="-2000"> <param name="WindowlessVideo" value="-1"> <EMBED TYPE="application/x-mplayer2" SRC="Midi/Teachchildren.mid" NAME="MediaPlayer" WIDTH=320 HEIGHT=45> </EMBED></OBJECT>

Name that whatever you want (for the demo, I'll name it "music.php")

Now, go to the page you want to use the music on and rename it filenamehere.php. Don't worry, your HTML coding will still stay in tact.

Finally, add this code where you want to display the music:

<?php include('music.php'); ?>

Tell me if you have any problems or don't understand something.

[Gideon]

Heck, Im out of my depth here. How do you write a php file and where do you upload it to relative to the file that has your audio?

Also, I might not have been clear but the Midi song is different on each page that I use the player.

[Gideon]

Hello again,

Rather than creating a php file I have pruned all the ‘params’ except ‘filename’ and ‘autostart.’ Is that permissible? It is much smaller and seems to be working in IE plus Firefox.
Here is my latest experimental page.
http://www.5loaves2fishes.org.nz/5L2Fexperiment.htm

Here is my code. Please tell me if it’s good or bad code. Also how to make FF obey the autostart-false command.)

<OBJECT ID="MediaPlayer" WIDTH=184 HEIGHT=45 
CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
STANDBY="Loading.. Please Wait." 
TYPE="application/x-oleobject"> 
<PARAM NAME="FileName" VALUE="Midi/Icansee.mid" valuetype="ref" ref> 
<param name="AutoStart" value="false"> 
<EMBED TYPE="application/x-mplayer2" SRC="Midi/Icansee.mid" NAME="MediaPlayer" WIDTH=184 HEIGHT=45>
</EMBED></OBJECT>

[DJ-Zep]

This should work:

<object id="MediaPlayer" width="184" height="45" 
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
standby="Loading.. Please Wait." 
type="application/x-oleobject"> 
<param name="FileName" value="http://www.5loaves2fishes.org.nz/Midi/Icansee.mid" valuetype="ref"> 
<param name="AutoStart" value="false"> 
</object>

I just used PHP to help you save as much space as you could.

[Gideon]

So close, so close but dont get sick of me yet.

Problem with this is that the audio player shows on IE but not FF!?? Funnily enough it works on my web authoring preview. However FF refuses to work when uploaded. Heh?

Heres my latest attempt

[DJ-Zep]

Do you have the latest version of FF? It works fine for me.

[Gideon]

Hi DJ-Zep

All fixed now. Your help was invaluable.

[DJ-Zep]

What was your problem?

[Gideon]

Evidently FF doesn’t use ActiveX. We learn something each day. I sent the link to half a dozen people and some of them saw it and some didnt. So I posted the code you gave me on the Mozilla forum and someone suggested this tweak.

<object id="MediaPlayer" width="184" height="45"
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
standby="Loading.. Please Wait."
type="application/x-oleobject">
<param name="FileName" value="http://www.5loaves2fishes.org.nz/Midi/Airbreth.mid" valuetype="ref"> <param name="AutoStart" value="false">
 
<embed src="http://www.5loaves2fishes.org.nz/Midi/Airbreth.mid" type="application/x-mplayer2"
width="184" "height="45" autostart="0">
</object>

And that did the trick. Here is one of my final pages:
http://www.5loaves2fishes.org.nz/Lakeside.htm

Wouldnt it be nice if Mozilla and Microsoft talked to eachother?

[DJ-Zep]

Oh my, I just noticed I ditched the embedment. Sorry about that. Glad you found your solution, however.