Displaying a dynamically loaded MP3 file’s ID3 information in Flex

The following example shows how you can dynamically load an MP3 file into Flex using the Sound class and get the MP3 file’s ID3 information using the id3 event (Event.ID3) and the Sound object’s id3 property.

Full code after the jump.

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/ -->
<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 URL:String = "http://www.helpexamples.com/flash/sound/song2.mp3";
            private var sound:Sound;
            private var soundLoaderContext:SoundLoaderContext;

            private function loadSound(url:String):void {
                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);

                textArea.text = "";
            }

            private function sound_id3(evt:Event):void {
                var id3Info:ID3Info = Sound(evt.currentTarget).id3 as ID3Info;
                textArea.text += ObjectUtil.toString(id3Info);
                textArea.text += "\\n---------- ---------- ----------\\n";
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Load MP3"
                click="loadSound(URL);" />
    </mx:ApplicationControlBar>

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

</mx:Application>

View source is enabled in the following example.

The following example shows how you can use data binding to update values in a Label control using a Model:

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

    <mx:Script>
        <![CDATA[
            private const SONG1:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
            private const SONG2:String = "http://www.helpexamples.com/flash/sound/song2.mp3";

            private var sound:Sound;
            private var soundLoaderContext:SoundLoaderContext;

            private function loadSound(url:String):void {
                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);
            }

            private function sound_id3(evt:Event):void {
                model.id3info = Sound(evt.currentTarget).id3;
            }
        ]]>
    </mx:Script>

    <mx:Model id="model">
        <model>
            <id3info></id3info>
        </model>
    </mx:Model>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Song 1" click="loadSound(SONG1);" />
        <mx:Button label="Song 2" click="loadSound(SONG2);" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="album:">
            <mx:Label text="{model.id3info.album}" />
        </mx:FormItem>
        <mx:FormItem label="artist:">
            <mx:Label text="{model.id3info.artist}" />
        </mx:FormItem>
        <mx:FormItem label="songName:">
            <mx:Label text="{model.id3info.songName}" />
        </mx:FormItem>
        <mx:FormItem label="track:">
            <mx:Label text="{model.id3info.track}" />
        </mx:FormItem>
        <mx:FormItem label="year:">
            <mx:Label text="{model.id3info.year}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

Tagged as: id3