« Quick Average Request Time from Apache access_log
ErrorDocument * index.php »

Browser Based Audio Preview / Listen - IE6/7/+, FF2+ - HTTP/HTTPS

The following code segment is an extract from a Smarty template which allows you to embed Windows Media Player in a web page and use javascript to initiate playback. AUDIOFILE.WAV is a marker name, you will need to use a valid URL.

The code uses two different methods for Internet Explorer (IE) and Firefox (FF).

For IE, it uses an object tag and the object model to initiate playback with player.controls.play and stop. Note the assignment of the source URL and data, this allows you to change which audio (or video) is being played.

The FF approach uses a pop up, opened with window.open. This loads a very small page which includes the player tag. The pop up is named, so later requests will reload the same window.

The template uses $bFF as a flag to indicate whether to deliver the page content for IE or FF. $bFF is true if the user agent is Firefox, false otherwise. The template logic can be replaced with PHP.


{if !$bFF}
<object id="wmp_p" name="wmp_p" style="display:none" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="0" height="0"></object>
<script type="text/javascript">/* <![CDATA[ */
var sAudioFile='AUDIOFILE.WAV';
{literal}
var player=document.getElementById('wmp_p');
function StartMeUp()
{
        if (sAudioFile!='')
        {
            player.URL=sAudioFile;
            player.data=sAudioFile;
            player.controls.play();
        }
}
function ShutMeDown()
{
    player.controls.stop();
}
{/literal}
/* ]]> */
</script>
{else}
<script type="text/javascript">
/* <![CDATA[ */
var sAudioFile='AUDIOFILE.WAV';
{literal}
function StartMeUp()
{
        if (sAudioFile != '')
                window.open('player.php?'+sAudioFile,"player","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=275, height=95");
}
function ShutMeDown()
{
        if (sAudioFile != '')
                window.open('player.php?',"player","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=275, height=95");
}
{/literal}
/* ]]> */
</script>
{/if}
<a href="javascript:StartMeUp();" title="Listen" id="Preview" name="Preview"><img src="images/cp/16x16/actions/player_play.png" alt="Listen" /></a>

player.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Audio Preview</title>
</head>
<body>
<div>
    <img src="images/cp/64x64/apps/arts.png" />
        /* Some code omitted for brevity */
    <!-- Some code omitted for brevity -->
    <object id="wmp_p" data="<?php echo $_SERVER['QUERY_STRING'];?>" type="application/x-ms-wmp" width="175" height="75" >
      <param name="autostart" value="true" />
      <param name="volume" value="10" />
      <param name="uiMode" value="mini" />
      <p>Error - the plugin has not loaded</p>
    </object>
</div>
</body>
</html>

Difficulties were encountered playing HTTPS audio with a self-signed certificate under FF. After research, the simplest resolution was to route audio requests through HTTP.

Resources:

http://www.w3schools.com/media/media_playerref.asp
http://port25.technet.com/pages/
http://support.mozilla.com/en-US/kb/Using+the+Windows+Media+Player+plugin+with+Firefox
For MP3s, you can use: http://docs.dojocampus.org/dojox/av/FLAudio

——————————-

This post courtesy of Lyrix, Inc. ( http://lyrix.com ) - Mobiso ( http://mobiso.com )

HTML / CSS
 Print article This entry was posted by elvis on 06/21/10 at 03:19:30 pm . Follow any responses to this post through RSS 2.0.