使用Flex4做一个mp3 播放器

http://www.cnblogs.com/modou/articles/1897088.html

1.先来做一个最简单的MP3播放功能

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<?xml version= "1.0"  encoding= "utf-8" ?> <s:Application xmlns:fx= "http://ns.adobe.com/mxml/2009"                 xmlns:s= "library://ns.adobe.com/flex/spark"                 xmlns:mx= "library://ns.adobe.com/flex/mx"  minWidth= "955"  minHeight= "600" >      <s:layout>          <s:BasicLayout/>      </s:layout>        <fx:Script>          <![CDATA[                            private  var  snd:Sound;              private  var  channel:SoundChannel;                            protected  function  button1_clickHandler(event:MouseEvent): void              {                  snd = new  Sound( new  URLRequest( "http://localhost/flex/1.mp3" ));                  channel = snd.play();              }                protected  function  button3_clickHandler(event:MouseEvent): void              {                  channel.stop();              }            ]]>      </fx:Script>        <fx:Declarations>          <!-- 将非可视元素（例如服务、值对象）放在此处 -->      </fx:Declarations>      <s:BorderContainer x= "127"  y= "170"  width= "273"  height= "43" >          <s:Button x= "47"  y= "10"  label = "播放"  click= "button1_clickHandler(event)" />          <s:Button x= "151"  y= "10"  label = "停止"  click= "button3_clickHandler(event)" />      </s:BorderContainer> </s:Application>

 

2.在上面例子的基础上，做一些改进，增加对进度，以及音量的控制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<?xml version= "1.0"  encoding= "utf-8" ?> <s:Application xmlns:fx= "http://ns.adobe.com/mxml/2009"                 xmlns:s= "library://ns.adobe.com/flex/spark"                 xmlns:mx= "library://ns.adobe.com/flex/mx"  minWidth= "955"  minHeight= "600" >      <s:layout>          <s:BasicLayout/>      </s:layout>        <fx:Script>          <![CDATA[              import  mx.controls.Alert;              import  mx.events.FlexEvent;                            private  var  snd:Sound;              private  var  channel:SoundChannel;                            protected  function  button1_clickHandler(event:MouseEvent): void              {                  snd = new  Sound( new  URLRequest( "http://localhost/flex/1.mp3" ));                  channel = snd.play();              }                protected  function  button3_clickHandler(event:MouseEvent): void              {                  channel.stop();              }                  protected  function  hslider1_changeEndHandler(event:FlexEvent): void              {                  channel.stop();                  channel = snd.play(hslider1.value/hslider1.maximum * snd.length);              }                            protected  function  hslider2_changeEndHandler(event:FlexEvent): void              {                  var  trans:SoundTransform = new  SoundTransform(hslider2.value/hslider2.maximum, 0 );                  channel.soundTransform = trans;              }            ]]>      </fx:Script>        <fx:Declarations>          <!-- 将非可视元素（例如服务、值对象）放在此处 -->      </fx:Declarations>      <s:Label x= "127"  y= "126"  text= "进度："  width= "45" />      <s:HSlider id= "hslider1"  x= "179"  y= "127"  width= "221"  changeEnd= "hslider1_changeEndHandler(event)"  maximum= "100"  showDataTip= "false" />      <s:Label x= "127"  y= "146"  text= "音量："  width= "45" />      <s:HSlider id= "hslider2"  x= "180"  y= "150"  width= "221"  changeEnd= "hslider2_changeEndHandler(event)"  maximum= "10"  showDataTip= "false" />            <s:BorderContainer x= "127"  y= "170"  width= "273"  height= "43" >          <s:Button x= "47"  y= "10"  label = "播放"  click= "button1_clickHandler(event)" />          <s:Button x= "151"  y= "10"  label = "停止"  click= "button3_clickHandler(event)" />      </s:BorderContainer>  </s:Application>

 

3.更近一步完善MP3播放功能

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

<?xml version= "1.0"  encoding= "utf-8" ?> <s:Application xmlns:fx= "http://ns.adobe.com/mxml/2009"                 xmlns:s= "library://ns.adobe.com/flex/spark"                 xmlns:mx= "library://ns.adobe.com/flex/mx"  minWidth= "955"  minHeight= "600"  enterFrame= "application1_enterFrameHandler(event)" >      <s:layout>          <s:BasicLayout/>      </s:layout>        <fx:Script>          <![CDATA[              import  mx.controls.Alert;              import  mx.events.FlexEvent;                            private  var  snd:Sound;              private  var  channel:SoundChannel;              private  var  trans:SoundTransform;              private  var  playStatus: Number  = 0 ;              private  var  playPosition: Number  = 0 ;                            protected  function  button1_clickHandler(event:MouseEvent): void              {                  // 标示当前播放状态，0是未加载，1是播放，2是暂停                  if (playStatus== 0  || playStatus== 1 )                  {                      if (playStatus== 0 )                      {                          snd = new  Sound( new  URLRequest( "http://localhost/flex/1.mp3" ));                          trans = new  SoundTransform();                          trans.volume = hslider2.value/hslider2.maximum;                      }                                            playButton. label  = "暂停" ;                      channel = snd.play(playPosition);                      playStatus = 2 ;                  }                  else  if (playStatus== 2 )                  {                      playButton. label  = "播放" ;                      channel.stop();                      playStatus = 1 ;                  }              }                protected  function  hslider1_changeEndHandler(event:FlexEvent): void              {                  channel.stop();                  channel = snd.play(hslider1.value/hslider1.maximum * snd.length);              }                            protected  function  hslider2_changeEndHandler(event:FlexEvent): void              {                  trans.volume = hslider2.value/hslider2.maximum;                  channel.soundTransform = trans;              }                            // 把毫秒格式化为时间              protected  function  formatDate(num: Number ): String              {                  var  total: int  = int (num / 1000 );                  var  second: int  = total% 60 ;                  total = (total-second)/ 60 ;                  var  minute: int  = total% 60 ;                  total = (total-minute)/ 60 ;                  var  hour: int  = total;                                    var  returnValue: String  = "" ;                  if (hour!= 0 ) returnValue = String (hour) + ":" ;                  if (minute< 10 ) returnValue += "0" ;                  returnValue += String (minute) + ":" ;                  if (second< 10 ) returnValue += "0" ;                  returnValue += String (second);                  return  returnValue;              }                  // 把播放进度绑定到播放时间的标签上，以及调整进度的组件上              protected  function  application1_enterFrameHandler(event:Event): void              {                  timeLabel.text = formatDate(channel.position) + " / "  + formatDate(snd.length);                  playPosition = channel.position;                  hslider1.value = channel.position/snd.length * hslider1.maximum;              }            ]]>      </fx:Script>        <fx:Declarations>          <!-- 将非可视元素（例如服务、值对象）放在此处 -->      </fx:Declarations>      <s:BorderContainer x= "131"  y= "147"  width= "369"  height= "108" >          <s:Label x= "83"  y= "47"  text= "进度："  width= "45" />          <s:HSlider id= "hslider1"  x= "135"  y= "48"  width= "221"  changeEnd= "hslider1_changeEndHandler(event)"  maximum= "100"  showDataTip= "false" />          <s:Label x= "83"  y= "67"  text= "音量："  width= "45" />          <s:HSlider id= "hslider2"  x= "136"  y= "71"  width= "221"  changeEnd= "hslider2_changeEndHandler(event)"  value= "5"  maximum= "10"  showDataTip= "false" />          <s:Button id= "playButton"  x= "12"  y= "53"  label = "播放"  click= "button1_clickHandler(event)"  width= "55" />          <s:Label id= "timeLabel"  x= "139"  y= "12"  text= "00:00 / 00:00"  />          <s:Label x= "83"  y= "12"  text= "播放进度：" />      </s:BorderContainer>  </s:Application>

这里针对上一个例子，做了如下修改：

1）可以显示当前MP3播放时间

2）用一个按钮控制MP3的播放、暂停状态

3) 把播放进度绑定到调整进度条组件上，随时更新进度条位置

做了这些改动，基本上算是一个MP3播放器了，虽然依然很简陋，毕竟只是一个学习的例子，就将就着吧，呵呵