Streaming plugin: audio Play MP3 songs with Flowplayer

Introduction

The audio plugin lets you stream MP3 data into Flowplayer. Here is a setup for audio streaming together with a cover image followed by its configuration:

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

<!-- install flowplayer into container -->
<script>
$f("player", "/swf/flowplayer-3.1.5.swf", {

	// first entry in the playlist works as splash and second entry is the audio file
	playlist: ['/img/demos/national.jpg', '/demos/plugins/fake_empire.mp3']

});
</script>

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.1.5.swf, then 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", "/swf/flowplayer-3.1.5.swf", {
	plugins: {
		audio: {
			url: '/my-plugins/flowplayer.audio.swf'
		}
	}
});

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

Configuration

Audio and image clips can also have properties in the playlist. For example:

playlist: [

	// setup album cover scaling
	{url: 'album_cover.jpg', scaling: 'orig'},

	// our MP3 does not start automatically
	{url: 'my_song.mp3', autoPlay: false}

]

Many of the clip properties are allowed here excluding all properties that are clearly related to video playback. In rare situations you may want to display your image on the playlist so that it is not used as the splash image. In that case you can set the "image" property to false as follows:

playlist: [

	// display an image for 10 seconds
	{url: 'some_image.jpg', duration: 10},

	// then play music *without* using the image as splash
	{url: 'my_song.mp3', image: false}

]

Events and MP3 metadata

As with all clips, you can setup 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 has ID3 tagging in it, then you can get access to that data in the onStart event (and all events that follow that) from the metaData object. Here is an example:

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

Typical properties in the metaData object include:

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

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:

<!-- setup player container  -->
<div id="audio" style="display:block;width:750px;height:30px;"
	href="/demos/plugins/fake_empire.mp3"></div>

JavaScript code

// install flowplayer into container
$f("audio", "/swf/flowplayer-3.1.5.swf", {

	// fullscreen button not needed here
	plugins: {
		controls: {
			fullscreen: false,
			height: 30
		}
	},

	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.

Download

Get the latest version of the Flowplayer pseudostreaming plugin. It is compatible with all 3.0+ releases.

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

See the version history for this tool.

NOTE We are no longer providing packed scripts. Althought they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

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.