功能描述
- 暂停/播放
- 停止
- 上一首
- 下一首
- 音量调整
- 播放进度调整
效果图如下:
Flex实现比较简单,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
fontSize="12" creationComplete="init()"
minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
public var sound:Sound;
public var chan:SoundChannel;
private const server:String = "assets/sound/";
public var pausePos:int = 0;
public var tempper:Number = 0;
private var ac:ArrayCollection =new ArrayCollection(["斯琴高丽的伤心.mp3", "曲终人散.mp3","木兰情.mp3","烟花易冷.mp3"]);
private var timer:Timer = new Timer(10, 0);
[Embed(source="assets/sound/play.png")]
private var playIcon:Class;
[Bindable]
[Embed(source="assets/sound/stop.png")]
private var stopIcon:Class;
[Embed(source="assets/sound/pause.png")]
private var pauseIcon:Class;
[Bindable]
[Embed(source="assets/sound/pre.png")]
private var preIcon:Class;
[Bindable]
[Embed(source="assets/sound/next.png")]
private var nextIcon:Class;
[Bindable]
[Embed(source="assets/sound/pre2.png")]
private var pre2Icon:Class;
[Bindable]
[Embed(source="assets/sound/next2.png")]
private var next2Icon:Class;
[Bindable]
[Embed(source="assets/sound/sound.png")]
private var soundIcon:Class;
[Bindable]
[Embed(source="assets/sound/full.png")]
private var fullIcon:Class;
//歌曲序列编号
private var k:int=0;
private function init():void{
loadSound();
}
private function loadSound():void {
if(chan != null) {
chan.stop();
}
if(k==0){
img3.enabled=false;
}else if(k>=ac.length-1){
img4.enabled=false;
}else if(k==ac.length){
k=0;
}else{
img3.enabled=true;
img4.enabled=true;
}
myPanel.title=ac[k];
timer.stop();
sound = new Sound();
var req:URLRequest =new URLRequest(server + ac[k]);
sound.load(req);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();
pausePos = 0;
chan = sound.play();
img1.setStyle("skin",pauseIcon);
}
private function timerHandler(event:TimerEvent):void{
tempper = (chan.position/sound.length)*100;
bar.setProgress(tempper,100);
}
//播放和暂停按钮
private function playHandler():void{
var c:Class=img1.getStyle("skin");
if(c==pauseIcon){
chan.stop();
img1.setStyle("skin",playIcon);
pausePos = chan.position;
}else if(pausePos!=0){
chan = sound.play(pausePos);
img1.setStyle("skin",pauseIcon);
pausePos = chan.position;
}else{
loadSound();
}
}
//停止按钮
private function playStopHandler():void{
if(chan != null) {
timer.stop();
bar.setProgress(0,100);
chan.stop();
pausePos = 0;
img1.setStyle("skin",playIcon);
}
}
//进度条
protected function bar_clickHandler(event:MouseEvent):void{
var c:Class=img1.getStyle("skin");
if(c==pauseIcon){
chan.stop();
chan = sound.play((event.localX/bar.width) * sound.length);
}
}
//设置声音
private function scanVolume():void{
var stf:SoundTransform = new SoundTransform(volumeSlider.value,0);
chan.soundTransform = stf;
}
private function playPreHandler():void{
k--;
loadSound();
}
private function playNextHandler():void{
k++;
loadSound();
}
]]>
</mx:Script>
<mx:Panel id="myPanel" x="34" y="26" width="478" height="399" layout="absolute">
<mx:VideoDisplay x="0" y="0" width="100%" height="303"/>
<mx:ProgressBar x="0" y="311" height="9" width="100%" id="bar" labelPlacement="bottom" themeColor="#F20D7A"
minimum="0" maximum="100" label="" direction="right" mode="manual" click="bar_clickHandler(event)"/>
<mx:LinkButton id="img1" x="10" y="328" width="16" click="playHandler()"/>
<mx:LinkButton id="img2" x="34" y="328" width="16" click="playStopHandler()" icon="{stopIcon}"/>
<mx:LinkButton id="img3" x="58" y="328" width="16" click="playPreHandler()" icon="{preIcon}" disabledIcon="{pre2Icon}"/>
<mx:LinkButton id="img4" x="82" y="328" width="16" click="playNextHandler()" icon="{nextIcon}" disabledIcon="{next2Icon}"/>
<mx:Image id="img5" x="295" y="328" width="16" source="{soundIcon}"/>
<mx:HSlider x="319" y="328" width="91" change="scanVolume()" id="volumeSlider" height="20"/>
<mx:LinkButton id="img6" y="328" width="16" right="10" icon="{fullIcon}"/>
</mx:Panel>
</mx:Application>