Archive for the ‘music’ Category

Spark Path Sound Visualizer

Flex 4 SDK final is out. It’s time to update and post some early Flex 4 prototypes I’ve built with Beta 1 and 2 last year.

Here is a simple Spark Path Sound Visualizer I put together to check out new Spark Path primitive:

Spark Path Sound Visualizer

spark.primitives.Path graphic element was introduced in Flex 4 as part of new FXG and MXML graphics components for displaying vector-based graphics.

Spark Path is a handy view primitive for drawing shapes, maps, charts, or sound visualizations as in this example. Although, I do wish it exposed its PathSegmentsCollection and PathSegment types for manipulating path data dynamically via ActionScript. More on this after the fold:

Read the rest of this entry »

Closing the Flex SVG Loop

Here is how my Shapes and Strokes creation looks like in Flex SVG Explorer (second sample in the Load SVG File dropdown):

shapesandstrokessmall

Obviously some strokes got lost in translation there, but I am still very happy with the outcome considering my initial goals for the two prototypes.

What does it all mean?

Basically, it means that by using two different Flex SVG libraries (SVG Viewer API and Degrafa) I’ve closed the full cycle SVG manipulation loop in Flex:

1) Create new SVG-based graphic with Degrafa SVG Painter and export it to SVG markup;

2) Load the created SVG document in Flex SVG Explorer using SVG Viewer API for further inspection and manipulation.

Now I can take a little breather, wait for the two libraries to improve, and slowly work on adding shape templates, object handles and other tools for creating and editing of SVG graphics in Flex.

Perhaps I should combine the two tools into one, or just wait till SVG to Degrafa converter and API comes out. Then I could just stick with Degrafa for loading and manipulating SVG. Some utility classes or toString methods to get SVG element markup of Degrafa objects would be nice too . Maybe I’ve missed it in the current codebase.

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

Flex Music Player Example

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:

flexmusicplayer

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.

Perlin Noise Music Vis

Here is a fun Perlin noise music vis with The X-Ecutioners “cuttin’ it up, scratchin’ it… They sounded so good they made everybody dance. (Check it out.)” — Like This:

(Click on the visualization to change color channels)

Doesn’t it look like a crowd dancing in the club? Well, close enough. Here is the real deal: