Computational Methods for Research in Speech Science

How to play sound from a web page using Flash

This page provides a tutorial for the use of the free WordPress Audio Player to replay audio from a web page.

1. Prepare your audio file

To replay a sound recording over the web, it is a good idea to compress it and convert it to MP3 format. There are many free tools for doing this, for example WinLAME.

Here is a step-by-step picture guide to using winLAME:

1.		2.
3.		4.

2. Get the AudioPlayer Flash and JavaScript files

The latest version of the standalone player files can be downloaded from WordPress Audio Player Download.

Copy the files audio-player.js and player.swf to your web folder.

3. Include the JavaScript file and initialise the Flash player

Put code like this in the header of your web page:

    <script type="text/javascript" src="audio-player.js"></script>
    <script type="text/javascript">
        AudioPlayer.setup("player.swf", { width: 290 });
    </script>

The "width" command sets the width of the player when it is playing. There are other display parameters you can adjust, see the WordPress player site for more information.

4. Embed the flash object in your code

First create a placeholder for where the player is going to be embedded. A <div> tag is quite a good choice:

    <div id="player001">Player goes here!</div>

Then enter this script to replace the placeholder with the flash player:

    <script type="text/javascript">
        AudioPlayer.embed("player001", { soundFile: "mp3_file.mp3" });
    </script>

The ID for the <div> should match the ID used in the embed() function call. If you have more than one player, repeat this code but with unique IDs for each player instance.

5. The player is displayed when the page is viewed

This is what you get:

Also see the page How to play video from a web page using Flash.

Back to Computational Methods Home