Random Fractals

I fixed some bugs and added new features to my Flex Music Player example.

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;
            }

After analyzing my blog stats, I’ve discovered to my surprise that I get the most direct hits from Google search for a simple Flex music player example.

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.

It’s been a while since my first post. I parted with Pathfinder Dev a few weeks ago, switched this blog to self-hosting, and currently looking for new opportunities.

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.

Read the rest of this entry »