JW Flash Player New Features

1. Support for Skinning

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.

8 Responses to “New Music Site for Original Compositions”

1. adam Says:
   January 4th, 2009 at 2:32 am

   Hey guys, I’d love some feedback!

2. mp3 house Says:
   January 22nd, 2009 at 6:27 pm

   sounds interesting
   thanks for posting

3. waine Says:
   March 4th, 2009 at 5:49 pm

   This looks great!
   Im sure this can be developed even further.
   Would love to see overlays over the visual, e.g. Song title, author etc.

   Then im sure this would be a great skin for music playback!

4. adam Says:
   March 4th, 2009 at 5:52 pm

   Thanks waine. I will look into meta-data overlays.

5. Hanns Says:
   March 6th, 2009 at 5:22 pm

   I agree! A skin customised for music playback has great potential! Especially with JW Player. I think Waine’s idea is sound. Like other music players have titles, authors, albums etc being overlayed from the XSPF playlist, simple enough – no need to read meta-data.

   Anyway great JS interaction you have going on there. Has potential.

6. Vector Says:
   April 21st, 2009 at 11:53 am

   Nice, thanks for the skin. I would suggest making the top bigger to allow album art or something.

7. adam Says:
   April 21st, 2009 at 11:38 pm

   @Vector
   The height of the visualizer area and the playlist area can be customized with javascript.

   When instantiating the player with SWFObject, choose the height of the entire flash object.

   var so = new SWFObject('player.swf', 'id',
   			playerWidth  + 'px', playerHeight + 'px', '9');

   Then with the addVariable method you can choose the location and height of the playlist.

   so.addVariable('playlist', 'bottom');
   so.addVariable('playlistsize', playlistHeight + 'px');

   The difference between playerHeight and playlistHeight will be the height of the visualizer portion, which could, as you mentioned, be used for displaying album art.

8. Ploddy Says:
   October 4th, 2009 at 3:11 pm

   I agree, after searching around for a skin/player which is supports a header like display.. Iv ended up here.

   The player is nice however would look better if it had a header and perhaps a album art (*like last.fm*)

Leave a Reply