打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Flex实现多功能Mp3播放器
userphoto

2012.07.19

关注

功能描述

  • 暂停/播放
  • 停止
  • 上一首
  • 下一首
  • 音量调整
  • 播放进度调整

效果图如下:

 

 

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>

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Source of Flex Finance
flex摄像头拍照 java上传到数据库 .
Flash声音播放类Sound的若干使用注意事项
flex控制音量 slider hslider
Flex存储图片到数据库的例子
flex的一些图例
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服