Audio Plugin
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.11.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: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.swf",
backgroundColor:'#002200',
top:25, right: 25, width: 160, height: 60
},
// and a bit of controlbar skinning
controls: {
backgroundColor:'#002200',
height: 30,
fullscreen: false
}
}
});