This is a message.

Audio Plugin

Display information about the currently playing song

standalone demo

We will use our audio plugin for the playback and a JPG image as a splash screen.

We use the onStart event to capture the audio metadata that is available in the MP3 id3 tag. This metadata is then shown above the splash using the content plugin.

Configuration

Here is the JavaScript configuration for this example. You must have the audio plugin placed on the same folder where you have your Flowplayer Flash component.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
// our song
url: 'http://releases.flowplayer.org/data/fake_empire.mp3',
 
// "cover art"
coverImage: 'http://releases.flowplayer.org/data/national.jpg',
 
// when music starts grab song's metadata and display it using content plugin
onStart: function(song) {
var meta = song.metaData;
 
this.getPlugin("content").setHtml(
"<p>Artist: <b>" + meta.TPE1 + "</b></p>" +
"<p>Album: <b>" + meta.TALB + "</b></p>" +
"<p>Title: <b>" + meta.TIT2 + "</b></p>"
);
}
},
 
plugins: {
 
// content plugin settings
content: {
url: "flowplayer.content-3.2.9.swf",
backgroundColor:'#002200',
top:25, right: 25, width: 160, height: 60
},
 
// and a bit of controlbar skinning
controls: {
backgroundColor:'#002200',
height: 30,
fullscreen: false
}
}
 
});

JavaScript