Tuesday, 5 February 2008

Embedding Windows Media Player in Firefox and Internet Explorer

So this actually wasn't very hard! I was pleasantly surprised.

My remit was to have a list of audio files on a web page, which when clicked, played. I didn't want a video window, I wanted to use the Media Player mini-mode. This was for a proof of concept of a voicemail system using the wonderful, and groundbreaking, and probably revolutionary Web21C CallFlow service. Disclaimer - I have been involved in this project from the early days, so my opinion is most definitely biased.

I wanted to use this as an opportunity to play with the Windows Media player control, and accept the fact that I would get an inevitable backlash from Apple and *.nix users. My user base is pretty controlled - amounts to two or three people, and I reckon that none of them use anything other than corporate builds of Windows on a PC.

So here's the code.

First, put a player in the browser with this script in inline HTML

<SCRIPT type="text/javascript">

var
str = "";

if (-1 != navigator.userAgent.indexOf("Firefox"))
{
// create WMP for FF.
str = '<object id="mediaPlayer" type="application/x-ms-wmp" width="176" height="44">';
}
else {

// create WMP for IE
str = '<object id="mediaPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="176" height="44">';
}

str += '<param name="uiMode" value="mini">';
str += '<param name="autoStart" value="true">';
str += '</object>';


    // emit the object tag 
document.write(str);

</SCRIPT>





Using the Microsoft Ajax controls, (an UpdatePanel and a Timer) the server outputs some raw HTML straight into a asp:label control. Although the files to be played are WAV files they are very low resolution. CCIT μ-Law 8bit, telephone quality - lower resolution than most mp3s



foreach (string s inDirectory.GetFiles(@"dir"))


{


if(s.EndsWith(".wav"))


{


fi = newFileInfo(s);


lblMessages.Text = lblMessages.Text + "<BR><A href=\"#\" onClick=\"playFile('"+ fi.Name + "')\">"+"Message from "+ fi.Name.Split('.')[0] +" at "+ fi.CreationTime.ToString()+ "</a>";


}





}





And finally, the Javascript to play the file. Note the name of the page is VoiceRecording.aspx, and I need to strip bits out based on the current path of the page. (Yes, I need to improve my RegExs and do this better, but what the hell)



function playFile(s)
{
loc = document.location.toString();
document.mediaPlayer.URL = loc.substr(0,loc.indexOf("VoiceRecording",0)) + "VoiceMail/" s;
}


And there we go. Because I set the autoStart parameter to the object to true, as soon as the URL of the audio is set, it starts to play.



I'd give you a link to the page, but it's all hidden behind OpenId, and access is protected; it does stuff with the phone system that costs real money. Y'all will have to make do with a screenshot.



I've airbrushed out photos for the sake of privacy.





image

1 comment:

Anonymous said...

I have used the first part of this tutorial and is shows up fine in both IE and FF. NOw I need to stream music from a HTTP url. can I please have the code and instructions on where I need to add the code in relation to the code that created the player.

Any help will do.

Thanks

Tim Stevens

Tim Stevens
Work
Consume
Obey
Be Silent
Die