继上一篇之后，再发布一篇音频播放器的代码，代码很简单，只是实现了最基本的播放功能，还有待完善。
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="710" height="445"
backgroundColor="#000000" creationComplete="completeHandler()"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import com.doc.view.docmanager.player.helper.PlayItem;
import com.doc.view.docmanager.player.helper.PlayList;
import mx.events.FlexEvent;
import mx.events.MetadataEvent;
import mx.events.SliderEvent;
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.utils.StringUtil;
private var _source:String;
private var _autoPlay:Boolean;
private var sound:Sound;
private var soundChn:SoundChannel;
private var fileName:String;
private var timer:Timer;
private var totalTime:Number;
//播放列表
private var _playList:PlayList;
//当前播放视频的索引
private var _currentIndex:int = 0;
//当前播放位置
private var pos:int = 0;
//用来控制音量的临时变量
private var volumn:SoundTransform = new SoundTransform();
//是否已经初始化
private var isInit:Boolean = false;
//是否在暂停状态
private var isPause:Boolean = false;
//是否在播放状态
private var isPlay:Boolean = false;
//是否静音
private var isMute:Boolean = false;
//临时保存音量
private var tmpVolumn:Number = 5;
/*图标定义*/
//播放
[Embed(source="assets/player/play.jpg")]
[Bindable]
private var playImage:Class;
[Embed(source="assets/player/play_over.jpg")]
[Bindable]
private var playOverImage:Class;
//暂停
[Embed(source="assets/player/pause.jpg")]
[Bindable]
private var pauseImage:Class;
[Embed(source="assets/player/pause_over.jpg")]
[Bindable]
private var pauseOverImage:Class;
//停止
[Embed(source="assets/player/stop.jpg")]
[Bindable]
private var stopImage:Class;
[Embed(source="assets/player/stop_over.jpg")]
[Bindable]
private var stopOverImage:Class;
//上一个
[Embed(source="assets/player/previous.jpg")]
[Bindable]
private var previousImage:Class;
[Embed(source="assets/player/previous_over.jpg")]
[Bindable]
private var previousOverImage:Class;
//下一个
[Embed(source="assets/player/next.jpg")]
[Bindable]
private var nextImage:Class;
[Embed(source="assets/player/next_over.jpg")]
[Bindable]
private var nextOverImage:Class;
//音量
[Embed(source="assets/player/sound.jpg")]
[Bindable]
private var soundImage:Class;
[Embed(source="assets/player/sound_over.jpg")]
[Bindable]
private var soundOverImage:Class;
//静音
[Embed(source="assets/player/mute.jpg")]
[Bindable]
private var muteImage:Class;
[Embed(source="assets/player/mute_over.jpg")]
[Bindable]
private var muteOverImage:Class;
//音乐图标
[Embed(source="assets/player/music.jpg")]
[Bindable]
private var musicImage:Class;
// 设置flv地址，rtmp和http都支持，绝对路径
public function set playList(playList:PlayList):void{
this._playList = playList;
var data:ArrayCollection = new ArrayCollection();
for(var i:int = 0; i < playList.size(); i++)
{
data.addItem(this._playList.getItem(i).name);
}
this.videoList.dataProvider = data;
setCurrentIndex(0);
}
//设置当前播放的索引
private function setCurrentIndex(index:int):void
{
if(this._playList.validIndex(index))
{
this._currentIndex = index;
}
else
{
if(index >= _playList.size())
{
this._currentIndex = 0;
}
else
{
this._currentIndex = _playList.size() - 1;
}
}
this.videoList.selectedIndex = _currentIndex;
setSource(this._playList.getItem(this._currentIndex));
}
//设置当前的播放文件
private function setSource(playItem:PlayItem):void
{
if(soundChn != null)
{
try
{
soundChn.stop();
} catch(error:Error){}
}
if(sound != null)
{
try
{
sound.close();
} catch(error:Error){}
}
sound = new Sound(new URLRequest(playItem.url));
sound.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
this.totalTime = sound.length;
this.slider.maximum = this.totalTime;
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
this.volumnSlider.setThumbValueAt(0, 5);
this.musicLabel.text = playItem.name;
if(this._autoPlay){
this.play();
}
}
private function ioErrorHandler(event:IOErrorEvent):void
{
this.slider.setThumbValueAt(0, 0);
this.isPause = false;
this.isPlay = false;
changeImage(1);
showTip0("找不到文件");
}
public function get source():String{
return this._source;
}
public function set autoPlay(auto:Boolean):void{
this._autoPlay = auto;
}
public function get autoPlay():Boolean{
return this._autoPlay;
}
//初始化完毕后设置video对象的大小，要把video对象加入到Flex的UI控件中，必须先用UIComponent或其子类包装。
private function completeHandler():void{
this.isPause = false;
this.addEventListener(FlexEvent.EXIT_STATE, function():void{
close();
});
}
//播放结束
private function completeHandler2(event:Event):void
{
next();
}
//在该事件中不断更新进度条的位置
private function enterFrameHandler(event:Event):void{
if(!this.soundChn || !this.sound) return;
this.slider.maximum = Math.round(this.sound.length / 1000);
this.slider.setThumbValueAt(0, Math.round(this.soundChn.position / 1000));
showTip(formatTime(this.soundChn.position / 1000) + "/" + formatTime(this.sound.length / 1000));
}
//播放当前文件
public function play():void{
try{
this.soundChn = this.sound.play(0);
this.soundChn.addEventListener(Event.SOUND_COMPLETE, completeHandler2);
resetVolumn();
}
catch(error:Error){
showTip0("发生错误:" + error.message);
this.isPause = false;
this.isPlay = false;
changeImage(1);
}
this.isPause = false;
this.isPlay = true;
changeImage(1);
showTip0("正在播放");
}
//播放上一个
public function previous():void
{
setCurrentIndex(this._currentIndex - 1);
}
//播放下一个
public function next():void
{
setCurrentIndex(this._currentIndex + 1);
}
//播放 or 暂停
private function playPause():void{
if(isPlay)
{
if(isPause){
this.isPause = false;
changeImage(1);
this.soundChn = this.sound.play(pos);
this.soundChn.addEventListener(Event.SOUND_COMPLETE, completeHandler2);
showTip0("正在播放");
}
else{
this.isPause = true;
changeImage(1);
this.soundChn.stop();
pos = this.soundChn.position;
showTip0("已暂停");
}
}
else
{
setCurrentIndex(_currentIndex);
}
}
//停止播放
private function stop():void{
this.slider.setThumbValueAt(0, 0);
this.isPause = false;
this.isPlay = false;
changeImage(1);
try
{
this.soundChn.stop();
this.soundChn = null;
} catch(error:Error)
{
}
showTip0("已停止");
}
//拖拽进度滑块
private function thumbDragHandler():void{ //拖拽进度条时，删除对enterFrame事件的监听，以便使此时的进度条与播放头脱离
this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
//释放进度滑块
private function thumbReleaseHandler():void{ //拖拽释放后，根据进度条该点的值让视频的播放头跳到该时间点
this.soundChn.stop();
this.soundChn = this.sound.play(slider.value * 1000);
this.soundChn.addEventListener(Event.SOUND_COMPLETE, completeHandler2);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
//调整音量事件
private function volumnChangeHandler():void{ //视频音量控制
resetVolumn();
this.isMute = false;
this.mute.source = soundImage;
}
//重置NetStream的音量
private function resetVolumn():void
{
if(!this.soundChn) return;
volumn.volume = this.volumnSlider.value / 10;
this.soundChn.soundTransform = volumn;
}
//格式化音量进度条的提示
private function formatVolumnSliderTooltip(value:Number):String
{
return (int(value * 10)) + "%";
}
//格式化播放进度条的提示
private function formatTime(value:Number):String
{
var hour:int;
var minute:int;
var second:int;
hour = int(value / 3600);
minute = int(value / 60) - hour * 60;
second = int(value % 60);
if(hour > 0)
{
return (hour < 10 ? ("0" + hour) : hour) + ":" + (minute < 10 ? ("0" + minute) : minute) + ":" + (second < 10 ? ("0" + second) : second);
}
else
{
return (minute < 10 ? ("0" + minute) : minute) + ":" + (second < 10 ? ("0" + second) : second);
}
}
//关闭所有连接
public function close():void
{
this.stop();
}
//静音
private function resetMute():void
{
if(isMute)
{
this.volumnSlider.value = tmpVolumn;
mute.source = soundImage;
isMute = false;
}
else
{
this.tmpVolumn = this.volumnSlider.value;
this.volumnSlider.value = 0;
mute.source = muteImage;
isMute = true;
}
resetVolumn();
}
/*鼠标进入图标时，改变图标*/
private function changeOverImage(type:int):void
{
// 停止
if(type == 0)
{
this.stopBtn.source = stopOverImage;
}
//播放
else if(type == 1)
{
if(isPlay)
{
if(isPause)
{
this.playPauseBtn.source = playOverImage;
}
else
{
this.playPauseBtn.source = pauseOverImage;
}
}
else
{
this.playPauseBtn.source = playOverImage;
}
}
//音量
else if(type == 2)
{
if(isMute)
{
this.mute.source = muteOverImage;
}
else
{
this.mute.source = soundOverImage;
}
}
//上一个
else if(type == 3)
{
this.previousBtn.source = previousOverImage;
}
//下一个
else if(type == 4)
{
this.nextBtn.source = nextOverImage;
}
}
/*鼠标移出图标时，改变图标*/
private function changeImage(type:int):void
{
//停止
if(type == 0)
{
this.stopBtn.source = stopImage;
}
//播放
else if(type == 1)
{
if(isPlay)
{
if(isPause)
{
this.playPauseBtn.source = playImage;
}
else
{
this.playPauseBtn.source = pauseImage;
}
}
else
{
this.playPauseBtn.source = playImage;
}
}
//音量
else if(type == 2)
{
if(isMute)
{
this.mute.source = muteImage;
}
else
{
this.mute.source = soundImage;
}
}
//上一个
else if(type == 3)
{
this.previousBtn.source = previousImage;
}
//下一个
else if(type == 4)
{
this.nextBtn.source = nextImage;
}
}
//显示提示信息
private function showTip(msg:String):void
{
this.timpTip.text = msg;
}
//另一处提示信息
private function showTip0(msg:String):void
{
this.timpTip0.text = msg;
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" x="0" y="0">
<mx:Canvas id="playArea" width="500" height="100%" x="-1" y="-1" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderColor="#FFFFFF" borderStyle="solid">
<mx:Canvas id="videoBox" width="100%" x="0" y="0" height="360"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image x="192.5" y="98" width="106" height="105" source="{musicImage}"/>
<mx:Label id="musicLabel" x="40" y="221" text="Label" width="409" height="37" textAlign="center" fontFamily="黑体" color="#FFFFFF" fontSize="30"/>
</mx:Canvas>
<mx:VBox id="sliderBar" y="360" height="18" width="100%" backgroundColor="#000000"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HSlider id="slider" width="498" minimum="0" snapInterval="1"
showTrackHighlight="true" liveDragging="true" thumbDrag="thumbDragHandler()"
thumbRelease="thumbReleaseHandler()" dataTipFormatFunction="formatTime"
allowTrackClick="false" y="420" trackColors="[0xEEEEEE,0x0000FF]">
</mx:HSlider>
</mx:VBox>
<mx:Canvas id="controlBar" width="100%" height="60" y="375" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image source="{stopImage}" id="stopBtn" click="stop()"
mouseOver="changeOverImage(0)" mouseOut="changeImage(0)"
width="32" height="32" x="7" y="14"/>
<mx:Image source="{previousImage}" id="previousBtn" click="previous()"
mouseOver="changeOverImage(3)" mouseOut="changeImage(3)"
width="32" height="32" x="51" y="14"/>
<mx:Image source="{playImage}" id="playPauseBtn" click="playPause()"
mouseOver="changeOverImage(1)" mouseOut="changeImage(1)"
width="64" height="64" x="85" y="-3"/>
<mx:Image source="{nextImage}" id="nextBtn" click="next()"
mouseOver="changeOverImage(4)" mouseOut="changeImage(4)"
width="32" height="32" x="152" y="14"/>
<mx:Label id="timpTip0" width="87" textAlign="center" x="188" y="22" color="#FFFFFF"/>
<mx:Label id="timpTip" width="115" textAlign="center" x="273" y="22" color="#FFFFFF"/>
<mx:Image id="mute" click="resetMute()" source="{soundImage}"
mouseOver="changeOverImage(2)" mouseOut="changeImage(2)"
width="32" height="32" x="392" y="14"/>
<mx:HSlider id="volumnSlider" width="75" value="2" minimum="0" maximum="10" snapInterval="0.1"
change="volumnChangeHandler()" liveDragging="true" x="421" y="18" dataTipFormatFunction="formatVolumnSliderTooltip"/>
</mx:Canvas>
</mx:Canvas>
<mx:Canvas width="210" height="100%" x="500" y="0">
<mx:VBox width="100%" height="20" y="5" horizontalAlign="center">
<mx:Label textAlign="center" text="播放列表" color="#FFFFFF" width="79" fontFamily="宋体" fontSize="15" fontWeight="bold"/>
</mx:VBox>
<mx:List x="-1" y="25" width="209" height="420" backgroundColor="#000000" color="#FFFFFF" id="videoList" itemClick="{setCurrentIndex(this.videoList.selectedIndex)}"></mx:List>
</mx:Canvas>
</mx:Canvas>
</mx:Canvas>
脚步无法到达的地方，目光可以到达；目光无法到达的地方，梦想可以到达。
