利用Flex的Sound类动态显示导入MP3文件时的ID3信息

By Minidxer | March 7, 2008

下面的例子展示了在Flex中，如何利用Sound类动态读入MP3文件以及如何利用id3事件(Event.ID3)和Sound对象的id3属性取得MP3文件的ID3信息。

下面是完整的代码：


Download: load-Mp3-File-id3-information.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.utils.ObjectUtil;
  11.  
  12.             private const URL:String = "http://www.helpexamples.com/flash/sound/song2.mp3";
  13.             private var sound:Sound;
  14.             private var soundLoaderContext:SoundLoaderContext;
  15.  
  16.             private function loadSound(url:String):void {
  17.                 var urlRequest:URLRequest = new URLRequest(url);
  18.                 // Check policy file
  19.                 soundLoaderContext = new SoundLoaderContext(1000, true);
  20.  
  21.                 sound = new Sound();
  22.                 sound.addEventListener(Event.ID3, sound_id3);
  23.                 sound.load(urlRequest, soundLoaderContext);
  24.  
  25.                 textArea.text = "";
  26.             }
  27.  
  28.             private function sound_id3(evt:Event):void {
  29.                 var id3Info:ID3Info = Sound(evt.currentTarget).id3 as ID3Info;
  30.                 textArea.text += ObjectUtil.toString(id3Info);
  31.                 textArea.text += "\n---------- ---------- ----------\n";
  32.             }
  33.         ]]>
  34.     </mx:Script>
  35.  
  36.     <mx:ApplicationControlBar dock="true">
  37.         <mx:Button id="button"
  38.                 label="Load MP3"
  39.                 click="loadSound(URL);" />
  40.     </mx:ApplicationControlBar>
  41.  
  42.     <mx:TextArea id="textArea"
  43.             editable="false"
  44.             width="100%"
  45.             height="100%" />
  46.  
  47. </mx:Application>
下面是执行效果（点击Load MP3）：

下面的例子展示了如何利用Model绑定数据(data binding)来更新Label控件上的值：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/05/displaying-a-dynamically-loaded-mp3-files-id3-information-in-flex/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private const SONG1:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
  11.             private const SONG2:String = "http://www.helpexamples.com/flash/sound/song2.mp3";
  12.  
  13.             private var sound:Sound;
  14.             private var soundLoaderContext:SoundLoaderContext;
  15.  
  16.             private function loadSound(url:String):void {
  17.                 var urlRequest:URLRequest = new URLRequest(url);
  18.                 // Check policy file
  19.                 soundLoaderContext = new SoundLoaderContext(1000, true);
  20.  
  21.                 sound = new Sound();
  22.                 sound.addEventListener(Event.ID3, sound_id3);
  23.                 sound.load(urlRequest, soundLoaderContext);
  24.             }
  25.  
  26.             private function sound_id3(evt:Event):void {
  27.                 model.id3info = Sound(evt.currentTarget).id3;
  28.             }
  29.         ]]>
  30.     </mx:Script>
  31.  
  32.     <mx:Model id="model">
  33.         <model>
  34.             <id3info></id3info>
  35.         </model>
  36.     </mx:Model>
  37.  
  38.     <mx:ApplicationControlBar dock="true">
  39.         <mx:Button label="Song 1" click="loadSound(SONG1);" />
  40.         <mx:Button label="Song 2" click="loadSound(SONG2);" />
  41.     </mx:ApplicationControlBar>
  42.  
  43.     <mx:Form>
  44.         <mx:FormItem label="album:">
  45.             <mx:Label text="{model.id3info.album}" />
  46.         </mx:FormItem>
  47.         <mx:FormItem label="artist:">
  48.             <mx:Label text="{model.id3info.artist}" />
  49.         </mx:FormItem>
  50.         <mx:FormItem label="songName:">
  51.             <mx:Label text="{model.id3info.songName}" />
  52.         </mx:FormItem>
  53.         <mx:FormItem label="track:">
  54.             <mx:Label text="{model.id3info.track}" />
  55.         </mx:FormItem>
  56.         <mx:FormItem label="year:">
  57.             <mx:Label text="{model.id3info.year}" />
  58.         </mx:FormItem>
  59.     </mx:Form>
  60.  
  61. </mx:Application>

原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | 1 Comment » | 143 views Tags: , , ,

Related Post

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll