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", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.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' } 
	}

});
</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.2.4.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", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.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 cover image clips can also have properties. For example:

playlist: [

	clip: { 
	   url: 'http://releases.flowplayer.org/data/fake_empire.mp3',
	   
	   // cover image with scaling specified
	   coverImage: { url: '/img/demos/national.jpg', scaling: 'orig' } 
	}

]

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="http://releases.flowplayer.org/data/fake_empire.mp3"></div>

JavaScript code

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

});

Secure your audio files from direct download

Starting from 3.2.1 (requires flowplayer version 3.2.3), you can use the secure streaming plugin to securely stream your audio content from http and lighttpd servers.

HTML coding

We have a player container that is small so that it only holds the controlbar.

<!-- setup player container  -->
<div id="audiosecure" style="display:block;width:750px;height:30px;"
	href="http://flashy2.flowplayer.org:81/secvideo/1989.mp3"></div>

JavaScript coding

We use the secure streaming plugin for protecting the mp3 files from direct downloads.

// install flowplayer into container
$f("audiosecure", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", {

	// fullscreen button not needed here
	plugins: {
		controls: {
			fullscreen: false,
			height: 30,
			autoHide: false
		},
		
        secure: {
			// path to latest version
			url: 'flowplayer.securestreaming-3.2.0.swf',

			// URL used to fetch a timestamp from the server
			timestamp: '4c7f4b64',

			// identical to lighttpd.conf / secdownload.secret
			token: 'simplek'
		}		
	},

	clip: {
		autoPlay: false,
        urlResolvers: 'secure'
	}

});

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.

Flowplayer Twitter feed