Displaying a dynamically loaded MP3 file’s ID3 information in Flex using the SoundEffect class

In a previous example, “Displaying a dynamically loaded MP3 file’s ID3 information in Flex”, we saw how to load an MP3 into Flex using the Sound class.

The following example shows you how you can dynamically load and play an MP3 in Flex using the SoundEffect class, and access the Sound object and it’s ID3 information.

Full code after the jump.

I didn’t include all the MP3 files in the source code ZIP. You can download the MP3s from http://ghosts.nin.com/main/order_options. Hooray for free Nine Inch Nails songs and Creative Commons licensing!

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private const NIN_URL:String = "http://ghosts.nin.com/";

            private function playSoundEffect(src:String):void {
                textArea.text = "";

                if (soundEffect.isPlaying) {
                    soundEffect.stop();
                }
                soundEffect.source = src;
                soundEffect.play([soundEffect]);
            }

            private function soundEffect_id3(evt:Event):void {
                var id3Info:ID3Info = Sound(soundEffect.sound).id3;
                textArea.text += ObjectUtil.toString(id3Info);
                textArea.text += "\\n\\n-------------------\\n\\n";
            }

            private function comboBox_change(evt:Event):void {
                var cb:ComboBox = evt.currentTarget as ComboBox;
                playSoundEffect(cb.selectedItem.@source);
            }
        ]]>
    </mx:Script>

    <mx:XML id="playlist" source="data/playlist.xml" />

    <mx:SoundEffect id="soundEffect"
            duration="10000"
            useDuration="true"
            id3="soundEffect_id3(event);" />

    <mx:ApplicationControlBar dock="true">
        <mx:ComboBox id="comboBox"
                prompt="Please select a song..."
                dataProvider="{playlist.song}"
                labelField="@title"
                change="comboBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            editable="false"
            width="100%"
            height="100%" />

    <mx:LinkButton id="linkButton"
            label="All songs copyright Nine Inch Nails (2008)"
            click="navigateToURL(new URLRequest(NIN_URL), '_blank');" />

</mx:Application>

View playlist.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex-using-the-soundeffect-class/ -->
<playlist>
    <song title="Track 1" source="assets/01 Ghosts I.mp3" />
    <song title="Track 2" source="assets/02 Ghosts I.mp3" />
    <song title="Track 3" source="assets/03 Ghosts I.mp3" />
    <song title="Track 4" source="assets/04 Ghosts I.mp3" />
    <song title="Track 5" source="assets/05 Ghosts I.mp3" />
    <song title="Track 6" source="assets/06 Ghosts I.mp3" />
    <song title="Track 7" source="assets/07 Ghosts I.mp3" />
    <song title="Track 8" source="assets/08 Ghosts I.mp3" />
    <song title="Track 9" source="assets/09 Ghosts I.mp3" />
</playlist>

View source is enabled in the following example.

Note that the SoundEffect only plays the first 10 seconds of each song. If you wanted to play the full song, simply omit the duration property in the <mx:SoundEffect /> tag, and set the useDuration property to false.

0 thoughts on “Displaying a dynamically loaded MP3 file’s ID3 information in Flex using the SoundEffect class

  1. Hi Peter,

    your blog is really one of the best on the web and I have been able to find the examples I need so far. But not this time.

    I have mp3 urls in XML and I am using this XML as dataProvider of a DataGrid.
    My problem is getting the labelFunction to display id3.songName instead of the url or filename.

    Any ideas?

    Best,
    Linko

  2. Linko,

    I believe the problem would be that (as far as I know) you need to _load_ the MP3 in order to access their ID3 metadata. So for your code to work you would need to have the label function try to load the MP3 and get the ID3 information. Or perhaps you could use a custom item renderer to do the same thing, but still, I don’t know that I’d try loading X number of MP3s simultaneously to get their ID3 information.

    Peter

  3. I used your code above, and when I trace the songName in soundEffect_id3() it shows names of all mp3s.

    However, since this is not my labelFunction I cannot return the name.

    	private function trackLabel(item:Object, column:DataGridColumn):String {
                    var url:String = pathString + item.@name;
    		var sound:Sound;
                    var soundLoaderContext:SoundLoaderContext;
                    var urlRequest:URLRequest = new URLRequest(url);
                    // Check policy file
                    soundLoaderContext = new SoundLoaderContext(1000, true);
                    sound = new Sound();
                    sound.addEventListener(Event.ID3, sound_id3);
                    sound.load(urlRequest, soundLoaderContext);
                    return sLabel;
    	}
            private function sound_id3(evt:Event):void {
                    sLabel = Sound(evt.currentTarget).id3.songName;
                    trace(sLabel);
            }