This is a message.

Play audio with Flowplayer

The audio plugin lets you stream MP3 data into Flowplayer. You can even show the cover image when the audio file is playing.

Loading the plugin

Flowplayer can automatically load the audio plugin when it encounters a clip whose file name ends with MP3 or mp3. It loads the file from the same folder from which the player was loaded. For example, if the player is loaded from /swf/flowplayer-3.2.18.swf, then the audio plugin has to be located in the /swf/ directory. If you want to use different paths or different filenames you must explicitly load the audio plugin as follows:

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

JavaScript

Note: providing a different name for the audio plugin other than "audio" will cause the plugin to load twice.

If the audio file's suffix is not MP3 or mp3 you must specify the plugin-label as provider of the clip unless you have already a streaming provider configured:

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

JavaScript

Again the audio plugin must be loaded explicitly; this time it is located in the same directory as the core player, so we only need to specify its filename.

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>

HTML

The following is the javascript code for the above demo:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.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' }
}
 
});

JavaScript

coverImage

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

Clip PropertyTypeDefault ValueDescription

coverImage

object

null

An image to be displayed during the playback of the MP3 clip. Typical properties:

  • url: the location of the image
  • scaling: as for the clip property

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);
}
}

JavaScript

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:

PropertyDescriptionExample

TALB

Album name

Boxer

TCON

Music category

Indie

TENC

Encoding

Exact Audio Copy (Secure mode)

TIT2

Song title

Fake Empire

TPE1

Artist

The National

TRCK

Track number

1

TYER

Album year

2007

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>

HTML
// install flowplayer into container
$f("mb", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.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();
}
 
}
 
});

JavaScript

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

flowplayer.audio-3.2.11.swf

just the working flash file to get you going

flowplayer.audio-3.2.11.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.audio-3.2.11-src.zip

source code

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

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

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 with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.