一个基于flex的交互式mp3播放器

  1 <?xml version="1.0" encoding="utf-8" ?>
  2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3     paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" 
  4     layout="absolute" pageTitle="Recording Editor"
  5     width="1000" height="90"
  6     creationComplete="onLoad()" initialize="onInit()"
  7 >
  8     <mx:Script>
  9         <![CDATA[
 10 // config {{{
 11 private static const initialAlpha : Number = .3;
 12 private static const finalAlpha : Number = 1;
 13 // config }}}
 14 
 15 // imports {{{
 16 import flash.net.URLRequest;
 17 import flash.media.Sound;
 18 import flash.media.SoundLoaderContext;
 19 import mx.events.SliderEvent;
 20 import mx.controls.sliderClasses.Slider;
 21 import flash.events.ProgressEvent;
 22 import flash.external.*;
 23 // imports }}}
 24 
 25 // resources {{{
 26 [Embed(source="images/prev.png")]
 27 [Bindable] private var imgPrevClass:Class;
 28 [Embed(source="images/dimprev.png")]
 29 [Bindable] private var imgDimPrevClass:Class;
 30 
 31 [Embed(source="images/play.png")]
 32 [Bindable] private var imgPlayClass:Class;
 33 [Embed(source="images/dimplay.png")]
 34 [Bindable] private var imgDimPlayClass:Class;
 35 
 36 [Embed(source="images/stop.png")]
 37 [Bindable] private var imgStopClass:Class;
 38 [Embed(source="images/dimstop.png")]
 39 [Bindable] private var imgDimStopClass:Class;
 40 
 41 [Embed(source="images/next.png")]
 42 [Bindable] private var imgNextClass:Class;
 43 [Embed(source="images/dimnext.png")]
 44 [Bindable] private var imgDimNextClass:Class;
 45 // resources }}}
 46 
 47 // init {{{
 48 Security.allowDomain('*');
 49 Security.loadPolicyFile('/lessondev/crossdomain.xml');
 50 // init }}}
 51 
 52 // vars {{{
 53 private var murl:String = '/lessondev/file/tmp/';
 54 private var snd:Sound;
 55 private var request:URLRequest;
 56 [Bindable] private var ldr:Loader;
 57 private var channel:SoundChannel;
 58 [Bindable] private var position:Number = 0;
 59 // vars }}}
 60 
 61 public function onInit():void { // {{{
 62     ExternalInterface.addCallback("setPosition", setPosition);
 63     ExternalInterface.addCallback("onStop", onStop);
 64 } // }}}
 65 
 66 private function onLoad():void { // {{{
 67     btnPrev.enabled = false;
 68     btnPlay.enabled = false;
 69     btnStop.enabled = false;
 70     btnNext.enabled = false;
 71 
 72     request = new URLRequest(murl + this.parameters.wav + '.mp3');
 73 
 74     var sndcontext:SoundLoaderContext = new SoundLoaderContext(10000, true);
 75     snd = new Sound();
 76     snd.addEventListener( Event.COMPLETE, onSoundComplete );
 77     snd.addEventListener( ProgressEvent.PROGRESS, onSoundProgress );
 78     addEventListener( Event.ENTER_FRAME, onEnterFrame );
 79     snd.load(request, sndcontext);
 80 } // }}}
 81 
 82 public function setPosition( p : Number ):void { // {{{
 83     position = p * 10;
 84     if(position >= snd.length)
 85     {
 86         position = snd.length;
 87         btnNext.enabled = false;
 88         btnPrev.enabled = true;
 89     }
 90     else if(position <= 0)
 91     {
 92         position = 0;
 93         btnPrev.enabled = false;
 94         btnNext.enabled = true;
 95     }
 96     else
 97     {
 98         btnPrev.enabled = true;
 99         btnNext.enabled = true;
100     }
101 } // }}}
102 
103 private function onPrev():void { // {{{
104     position -= 5000;
105     if(position <= 0)
106     {
107         position = 0;
108         btnPrev.enabled = false;
109     }
110     btnNext.enabled = true;
111     request = new URLRequest( 'javascript: move_cursor(' + position + ');' );
112     navigateToURL(request, '_self');
113 } // }}}
114 
115 private function onPlay():void { // {{{
116     channel = snd.play(position);
117     channel.addEventListener(Event.SOUND_COMPLETE, onPlayComplete );
118     btnPrev.enabled = false;
119     btnPlay.enabled = false;
120     btnStop.enabled = true;
121     btnNext.enabled = false;
122 } // }}}
123 
124 private function onStop():void { // {{{
125     channel.stop();
126     channel.removeEventListener(Event.SOUND_COMPLETE, onPlayComplete );
127     btnPrev.enabled = true;
128     btnPlay.enabled = true;
129     btnStop.enabled = false;
130     btnNext.enabled = true;
131 } // }}}
132 
133 private function onNext():void { // {{{
134     position += 5000;
135     if(position >= snd.length)
136     {
137         position = snd.length;
138         btnNext.enabled = false;
139     }
140     btnPrev.enabled = true;
141     request = new URLRequest( 'javascript: move_cursor(' + position + ');' );
142     navigateToURL(request, '_self');
143 } // }}}
144 
145 private function onSoundProgress( event : ProgressEvent ) : void // {{{
146 {
147     progress.label = 'Loading snd data: ' + event.bytesLoaded.toString() + '/' + event.bytesTotal.toString();
148     progress.setProgress( event.bytesLoaded, event.bytesTotal);
149 } // }}}
150 
151 private function onSoundComplete( event : Event ) : void // {{{
152 {
153     slide.maximum = snd.length / 10;
154     loader.visible = false;
155     content.visible = true;
156     btnPlay.enabled = true;
157     btnNext.enabled = true;
158 } // }}}
159 
160 private function onPlayComplete( event : Event ) : void // {{{
161 {
162     channel.removeEventListener(Event.SOUND_COMPLETE, onPlayComplete );
163     position = 0;
164     channel.stop();
165     btnPrev.enabled = true;
166     btnPlay.enabled = true;
167     btnStop.enabled = false;
168     btnNext.enabled = false;
169     request = new URLRequest( 'javascript: move_cursor(' + position + ');' );
170     navigateToURL(request, '_self');
171 } // }}}
172 
173 private function onEnterFrame( event : Event ) : void // {{{
174 {
175     if ( channel != null && btnPlay.enabled == false )
176     {
177         position = channel.position;
178         request = new URLRequest( 'javascript: move_cursor(' + position + ');' );
179         navigateToURL(request, '_self');
180     }
181 } // }}}
182 
183 private function onSlide( event:SliderEvent ):void { // {{{
184     position = event.value * 10;
185     request = new URLRequest( 'javascript: move_cursor(' + position + ');' );
186     navigateToURL(request, '_self');
187 } // }}}
188 
189         ]]>
190     </mx:Script>
191 
192     <!-- styles {{{ -->
193     <mx:Style>
194 .btn
195 {
196     paddingLeft: 5;
197     horizontalGap: -5;
198 }
199 .progress
200 {
201     barColor: red;
202     color: green;
203     paddingLeft: 4;
204     paddingRight: 4;
205 }
206 .vbox
207 {
208     borderStyle: solid;
209     borderColor: #a586ca;
210     paddingLeft: 4;
211     paddingRight: 4;
212     paddingTop: 4;
213     paddingBottom: 4;
214 
215 }
216 Application
217 {
218     backgroundColor: #d1d1ef;
219 }
220 ToolTip
221 {
222     backgroundColor: #484842;
223     color: #ffffff;
224 }
225     </mx:Style>
226     <!-- styles }}} -->
227 
228     <mx:VBox id="loader" horizontalCenter="0" verticalCenter="0" styleName="vbox">
229         <mx:ProgressBar id="progress" width="300" mode="manual" styleName="progress" />
230     </mx:VBox>
231     <mx:Fade id="fadeIn" duration="600" alphaFrom="{initialAlpha}" alphaTo="{finalAlpha}" />
232 
233     <mx:VBox id="content" width="100%" paddingBottom="10" paddingTop="10" paddingLeft="30" paddingRight="30"
234         alpha="{initialAlpha}" visible="false" showEffect="fadeIn"
235     >
236         <mx:HBox horizontalAlign="center" width="100%">
237             <mx:Button styleName="btn" id="btnPrev" label="Prev" icon="{(btnPrev.enabled)?imgPrevClass:imgDimPrevClass}" click="onPrev()" />
238             <mx:Button styleName="btn" id="btnPlay" label="Play" icon="{(btnPlay.enabled)?imgPlayClass:imgDimPlayClass}" click="onPlay()" />
239             <mx:Button styleName="btn" id="btnStop" label="Stop" icon="{(btnStop.enabled)?imgStopClass:imgDimStopClass}" click="onStop()" />
240             <mx:Button styleName="btn" id="btnNext" label="Next" icon="{(btnNext.enabled)?imgNextClass:imgDimNextClass}" click="onNext()" />
241         </mx:HBox>
242 
243         <mx:HSlider id="slide" change="onSlide(event)"
244             width="100%" minimum="0" maximum="0" value="{position / 10}"
245             dataTipPlacement="top"
246         />
247     </mx:VBox>
248 
249 </mx:Application>
250