02
Jan 09New Music Site for Original Compositions
Screenshot of http://polymath.mit.edu/music/player
A few weeks ago I set out to design a new website to showcase some of the music I’ve composed and had performed over the last two years. As with any website, I wanted to make sure it would be easily update-able. So I decided to use the very popular JW (Jeroen Wijering) Flash Media Player in order to take advantage of its ability to play XSPF (XML (Extensible Markup Language) Shareable Playlist Format) playlists. (Don’t you just love it when acronyms get compounded!) I’ve used the JW Flash player before for the Vi / deo site I made last summer. However, since a new version of the player had just been released, rather than use a similar implementation to the one over at Vi / deo, I decided instead to start from scratch, in order to take advantage of three key new features in the player.
JW Flash Player New Features
I designed my own skin, based on the Modieus (or “Stylish”) skin from Jeroen. The main improvements I made to the skin were customizing the look of the playlist items, so that each would not take up much vertical space. This makes the skin more suitable for music playlists. (It was originally intended more for video playlists.) The skin I made is available at Jeroen’s site here. You can also grab it here, just be aware of the license information found at Jeroen’s new site, Longtail Video.
2. New and Improved Javascript Interaction
The way I used this will be apparent in the site itself. The main feature I use is the ability to change the page’s content (the stuff displayed on the right-hand side) based on the current song being played by the player.
I do this by adding an event listener to the player’s ITEM event.
<script type="text/javascript">
var player;
function playerReady(obj) {
player = document.getElementById(obj['id']);
player.addControllerListener('ITEM','onPlaylistItemChange');
};
function onPlaylistItemChange(event) {
//handle event
}
</script>3. Plugins
There’s a really cool audio visualization plugin called Revolt. You just have to see it. It’s awesome.
The new music player site can be found at http://polymath.mit.edu/music/player/.
The xspf playlist which drives the site is here.
The Modieus_Slim skin that I made can be found here. (zip folder containing .fla, .swf, and other supporting files)