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">

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 


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"))




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.


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.


Tim Stevens

Tim Stevens
Be Silent