Audio plugin with MP3 metadata Flash plugins - Demo 3 / 7
The Goal
We want to show MP3 song data on top of a splash screen. We will use audio streaming plugin for the playback and a JPG image as a splash screen. When using audio with a splash screen we must use a playlist where the clip that is configured before the audio clip works as a splash.
We use onStart event to capture the audio metadata which may be injected to the MP3 file. This metadata is then shown above the splash using content plugin. Here is our example.
The Code
Here is the JavaScript configuration for this example. You must have audio plugin placed on the same folder as your flowplayer Flash component is.
$f("player", "/swf/flowplayer-3.1.5.swf", {
playlist: [
// first entry in a playlist work as a splash image for the MP3 clip
'/img/demos/national.jpg',
{
// our song
url: '/video/fake_empire.mp3',
// 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: '/swf/flowplayer.content-3.1.0.swf',
backgroundColor:'#002200',
top:25, right: 25, width: 160, height: 60
},
// and a bit of controlbar skinning
controls: {
backgroundColor:'#002200',
height: 30,
fullscreen: false
}
}
});
Show this example as a standalone version. See it's commented source code to see how things are laid out.