New Features

1. - View Modes: Normal and Large. I plan to add Full Screen in v.3.
2. – Skins menu with Obsidian and Jukebox player skins as a follow up example to my previous Flex application CSS skinning post
3. - MusicVisualizer container component that you can use with or without my Music Player control
4. - Alternative SmoothSpectrum visualization created by Thibault Imbert

MusicPlayer v.2 with MusicVisualizer

Here is Flex Music Player v.2 with Jukebox UI skin in Large view mode with Music Visualizer set to Smooth Spectrum, playing 15 Step:

Interacting with Music Visualizations

Click on the visualization to swap it.

Move your mouse over music visualization to change colors.

You can also change MusicPlayer’s mini visualization in the bottom left corner to alternate between wave, line and bars. This one is from Ben Stucki.

The skin swap and view mode toggle buttons are located in the bottom right corner of the Music Player.

Source Code Updates

View source and let me know if you run into problems or what new features you’d like to see added in v.3.

I refactored the original Visualizr and Smooth Spectrum code to tweak them for my needs and converted them to custom UIComponents for easy inclusion in Flex mxml views.

You can grab them individually or use my Music Visualizer component (com.randomFractals.media.controls.MusicVisualizer).

I also cleaned up my music player code (com.randomFractals.media.controls.MusicPlayer) and added comments.

Usage Example

Here is an example of embedding MusicVisualizer and MusicPlayer in your application:

<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:rf="com.randomFractals.media.controls.*"	
	width="100%" height="100%" 
	color="#FFFFFF" backgroundAlpha="0"  
	horizontalAlign="center" 
	verticalAlign="middle" 
	creationComplete="initPlayer(event);">
<!-- 
... action script code from below...
-->
    <mx:VBox id="musicBox"
        verticalGap="0"   
        horizontalAlign="center"
        verticalAlign="middle">
 
     <rf:MusicVisualizer id="musicVis"  
         width="{musicPlayer.width}" height="400"
         backgroundColor="#212121" />
 
     <rf:MusicPlayer id="musicPlayer"
resize="{musicVis.height = (musicPlayer.width - musicPlayer.width/3)}" 
         width="422" height="110" autoPlay="true" />
 
    </mx:VBox>

The AS code to initialize MusicPlayer and  load sample tracks is very simple, thanks to the Playr control library:

            
            import com.nocreativity.playr.*;
 
            private var playList:PlaylistManager;
 
            private function initPlayer(event:Event):void
            {
                // create a sample playlist
                playList = new PlaylistManager();
 
                // add sample tracks
                playList.addTrack(
                    createTrack('Radiohead',
                        'In Rainbows',
                        '15 Step',
                        'assets/music/15_Step.mp3', 228) );
 
                // add more tracks here
 
                // load playlist
                musicPlayer.playlist = playList;
            }
 
            private function createTrack(artist:String, album:String,
                title:String, file:String, seconds:uint):PlayrTrack
            {
                var track:PlayrTrack = new PlayrTrack();
                track.artist = artist;
                track.album = album;
                track.title = title;
                track.file = file;
                track.totalSeconds = seconds;
                return track;
            }

Related Posts

• Flex Music Player Example
• Simple Flex Music Player

If you are still looking for one, see my new Flex Music Player:

I added support for multiple tracks with the Prev./Next track buttons and a couple of sample tracks, enabled track scrubbing (just click on the track), replaced the playback component with the Playr, and added the music Visualizr from Ronny Welter. View source is enabled on this one, although it’s a little messy, but should give you a good head start.

I am planning to do a more extensive example with playlist management provided by the Playr, cleaned-up source code, and a sample of pulling music from last.fm soon.

Related Posts

• Some Degrafa Love
• Flex MusicPlayer v.2 with MusicVisualizer
• Simple Flex Music Player

While I am looking for a new gig, I’ll try to revive this blog by remixing and publishing some old toys I’ve prototyped to get my Flex chops together.

Here is the one that did not make the cut for that internal AIR Flair presentation. I had to play that jungle Bamboo Banga beat in WMP11.

(Click on the image to play and download sample code)

That’s my take on simple mp3 player in Flex. Click on that visualization to see some bars jump.

Most of the heavy lifting is done by the components from the flex community listed below.

Under the hood:

Obsidian Flex UI skin from scalenine.com gallery to give this player some polished look and feel.

nl.fxc.controls.MP3Player.as class from labs.flexcoders.nl for the audio playback control with minor changes to expose some properties and events to the main view controls. Why reinvent the wheel :)

Music Visualization is provided by the excellent Audio Visualization component by Ben Stucki.

I created the main mxml view, layout and custom icons. All in all about two pages of code and a couple of days to prototype it and publish.

Now, this music player is intentionally very basic and only plays one sample.mp3 track from the /assets/music folder.

If you are looking for a more versatile Flex music player that’s scriptable and supports playlists, I’d suggest you grab the latest Flex xml mp3 player which is an excellent port of the well known XSPF Web Music Player to Flex.

Related Posts

• Flex MusicPlayer v.2 with MusicVisualizer
• Flex Music Player Example
• Perlin Noise Music Vis