Flex Examples

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.