Posts Tagged ‘music visualizer’

January 15th, 2009

Flex MusicPlayer v.2 with MusicVisualizer

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:

flexmusicplayer2

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

January 15th, 2009 | Posted in Flex, music | Tagged with , |