$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
    plugins: {
        audio: {
            url: '/my-plugins/flowplayer.audio.swf'
        }
    }
});

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
    clip: {
        url: "/path/to/audiofile-without-suffix",
        provider: "audio"
    }
});

Example

Here is the HTML code for the above demo:

<!-- set up player container  -->
<div id="player" style="display:block;width:640px;height:453px;"></div>

The following is the javascript code for the above demo:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
 
    clip: {
       url: "http://releases.flowplayer.org/data/fake_empire.mp3",
 
       // this style of configuring the cover image was added in audio
       // plugin version 3.2.3
       coverImage: { url: "http://releases.flowplayer.org/data/national.jpg",
                    scaling: 'orig' }
    }
 
});

coverImage

The plugin provides an additional clip property to accomodate for an image to be displayed during playback:

Events and MP3 metadata

As with all clips, you can set up event listeners for your MP3 files. For example, you can trigger your custom events when the music starts, stops, pauses and resumes. If your MP3 is ID3 tagged, you can gain access to the id3-tags' data via the metaData object in the onMetaData event and all subsequient clip events. Here is an example:

clip: {
    onMetaData: function(song) {
        alert("Now playing: " + song.metaData.TIT2);
    }
}

Note: Exclusively ID3 version 2.3 tags and higher are supported. Meta information from MP3 files carrying ID3v1 tags, ID3v2.2 (obsolete) or both ID3v1 and ID3v2 tags cannot be retrieved.

Typical properties in the metaData object include:

Take a look at this demo where the song metadata is placed on top of the album cover using the content plugin.

MP3 duration

MP3 files do not carry exact information about their duration. On the first fetch the plugin therefore calculates a near approximation of the MP3 file's duration which is then updated once the file is entirely buffered. If you need to get hold of the precise duration immediately at the start of the first playback, you should deliver the MP3 via the RTMP protocol.

Example: Flowplayer as a music box

You can easily configure Flowplayer to work as a standalone audio player not using any images and videos. Here is an example:

<!-- set up player container  -->
<a id="mb" style="display:block;width:648px;height:30px;"
    href="/media/data/fake_empire.mp3"></a>

// install flowplayer into container
$f("mb", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
 
    // fullscreen button not needed here
    plugins: {
        controls: {
            fullscreen: false,
            height: 30,
            autoHide: false
        }
    },
 
    clip: {
        autoPlay: false,
        // optional: when playback starts close the first audio playback
        onBeforeBegin: function() {
            $f("player").close();
        }
 
    }
 
});

Streaming audio with RTMP

It's also possible to stream audio using the RTMP protocol. This protocol allows users to do random seeking in the clip's timeline. See how the RTMP plugin is configured to play audio.

Note: Streaming audio via RTMP is done without the audio plugin. Therefore the coverImage clip property which is specifically provided by the audio plugin is not available.

Download

Please right-click and choose "Save link as..." (or similar)

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.