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;
            }
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • blogmarks
  • NewsVine
  • Reddit
  • Sphinn
  • SphereIt
  • TwitThis
  • Furl
  • Spurl
  • Ma.gnolia
  • Slashdot
  • StumbleUpon
  • email
  • Print

Related Posts

12 Responses to “Flex MusicPlayer v.2 with MusicVisualizer”

  1. Scott C. Lemon

    Awesome app … I’m playing with the code, but have one problem that I can’t figure out.

    I am trying to add a podcast to the playlist, which works, except for one thing. What do I use for the “length” parameter when I don’t know what it is?

    I was hoping to find some value to pass in where you would update the total length as the download occurred … but that is not happening.

    Suggestions?

  2. MechanisM

    Great Player!!! But one thing..visualisation not works for me =((

  3. Taras

    Hmm. What browser, flash player and os are you testing it with?

    I’ve noticed that sometimes Firefox and Flock VMs with Flash Player 10.0.12.36 get bogged down if you have tons of tabs open and visualization is not displayed.

    Other than that I’ve tested it and seen it work with the following browsers:

    Firefox 3.0.6
    IE8 RC 1
    Opera 9.6
    Safari 3.2.1

    on WinXP with Flash Player 10.0.12.36 and

    Firefox 3.0.6
    IE7
    Safari 3.2.1

    on Vista Ultimate 64-bit with Flash Player 9.0.124

    Does anyone else have issues with the music visualization display?

  4. david

    great job,can this player support mid,wav,wma format?

  5. Taras

    David,

    My Flex music player is using Playr API for playback, which only supports mp3s at the moment. See Playr’s howto for more info: http://playr.nocreativity.com/#/howto

    I am sure it can be extended to play other formats, or you can convert your tracks to mp3.

    Check out FFmpeg at http://www.ffmpeg.org/, if you are looking to convert. It’s the Swiss knife of media encoding that many popular music and video streaming sites are using behind the scenes to convert uploaded audio and video.

  6. Taras

    See Welter’s response on infoq.com (http://www.infoq.com/news/2009/02/playr-as-library):

    “One thing that still doesn’t fit right is the duration of the track. Right now, you have to pass this value along (in seconds) using XML or a few features will not work. The ID3 tag gives you the length of the track only for the part that has been loaded. For example: if you’ve got a track of 240 seconds that has only been loaded halfway, ActionScript will return 120 seconds for the length property of the sound. In other words, it gives the buffered part of the track. I’ve tried all kinds of stuff, but I can’t get the correct length right, so I’ll just stick with the XML until I get this right.”

    It’s not an easy problem to solve, although I think it can be remedied with some bandwidth detection tricks, if ID3 tags are not providing that info.

  7. MemoMusic « LogField

    [...] 3. Flex MusicPlayer v.2 with MusicVisualizer [...]

  8. karl

    Hello,

    I am kind of new to this whole flex scene, but I just have a quick question. I was trying to follow along to your usage example, but it seems like it is missing some components or files to compile correctly. What else does it need to be embedded in my app?
    Also on the viewsource of your app, when I try to download it it says the file is not found. Thanks!

  9. Taras

    You can get the latest Flex Music Player v.2 source code from here: http://www.tarasnovak.com/lab/FlexMusicPlayer/02/srcview/index.html

  10. Joseph Hillhouse

    Thank you so much!! Can I use it in my commercial application?

  11. Taras

    sure thing, as long as you comply with the included MIT license.

Leave a Reply