Flex4 - 制作一个带波形的MP3播放器
作者:hangge | 2015-03-31 09:32
下面是一个使用Flex制作的MP3播放器,除了音量调节,左右声道调节,播放暂停外。还会通过对声音的采样进行动态波形图的绘制。效果图如下:
<?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"
creationComplete="initApp()"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
//导入声音相关类
import flash.display.Graphics;
import flash.events.TimerEvent;
import flash.filters.GlowFilter;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundMixer;
import flash.media.SoundTransform;
import flash.net.URLRequest;
import flash.utils.Timer;
import mx.events.SliderEvent;
//声音对象与声音控制对象
private var sound:Sound;
private var soundChannel:SoundChannel;
//播放位置和播放状态
private var position:Number = 0;
private var isPlaying:Boolean = false;
//定时器
private var soundTimer:Timer = new Timer(100,0);
private function initApp():void{
//还没加载完,按钮不可用
btn_play.enabled = false;
btn_pause.enabled = false;
//左右声道均衡
slider_pan.value = 0;
//音量最大
slider_volume.value = 1;
//
var url:URLRequest = new URLRequest("./music.mp3");
sound = new Sound();
//声音加载完毕监听
sound.addEventListener(Event.COMPLETE, completeHandler);
//声音播放完毕监听
sound.addEventListener(Event.SOUND_COMPLETE,mp3EndHandler);
sound.load(url);
//滑块与按钮监听
slider_volume.addEventListener(SliderEvent.CHANGE,changeVolume);
slider_pan.addEventListener(SliderEvent.CHANGE,changePan);
btn_play.addEventListener(MouseEvent.CLICK,playSound);
btn_pause.addEventListener(MouseEvent.CLICK,pauseSound);
//定时器添加监听
soundTimer.addEventListener(TimerEvent.TIMER,showSoundWave);
//定义一个发光效果,用于波形图上
var glow:GlowFilter = new GlowFilter();
glow.color = 0xAEB4E6;
glow.blurY = 6;
glow.strength = 3;
soundWave.filters = [glow];
}
//改变音量
internal function changeVolume(evt:SliderEvent):void{
//得到声音的soundTransform对象
var soundControl:SoundTransform = soundChannel.soundTransform;
soundControl.volume = evt.value;
//应用新的设置
soundChannel.soundTransform = soundControl;
}
//左右声道
internal function changePan(evt:SliderEvent):void{
var soundControl:SoundTransform = soundChannel.soundTransform;
soundControl.pan = evt.value;
soundChannel.soundTransform = soundControl;
}
//加载完毕
internal function completeHandler(evt:Event):void{
btn_play.enabled = true;
btn_pause.enabled = true;
}
//播放完毕
internal function mp3EndHandler(evt:Event):void{
position = 0;
soundTimer.stop();
isPlaying = false;
}
//开始播放
internal function playSound(evt:MouseEvent):void{
soundChannel = sound.play();
isPlaying = true;
position = 0;
soundTimer.start();
}
//暂停
internal function pauseSound(evt:MouseEvent):void{
//判断是否在播放
if(isPlaying){
position = soundChannel.position;
soundChannel.stop();
soundTimer.stop()
}else{
soundChannel = sound.play(position);
soundTimer.start();
}
isPlaying = !isPlaying;
}
//显示波形
internal function showSoundWave(evt:TimerEvent):void{
var g:Graphics = soundWave.graphics;
//清除以前绘制对象
g.clear();
//接受波形数据
var soundData:ByteArray = new ByteArray();
SoundMixer.computeSpectrum(soundData,true,0);
//线条样式
g.lineStyle(1,0x006699,1);
//i每次加2,读取128个数据单位
//0~255是左声道,256~512是右声道
for(var i:Number = 0;i<256;i+=2){
//读取32位的浮点数
var n:Number = soundData.readFloat();
//放大32倍,看得更清楚
g.lineTo(i,36*n);
g.moveTo(i,36*n);
}
}
]]>
</fx:Script>
<s:Panel x="37" y="51" width="337" height="170" title="Mp3播放器">
<s:HSlider id="slider_volume" x="42" y="18" width="90"
minimum="0" maximum="1" liveDragging="true"/>
<s:HSlider id="slider_pan" x="215" y="18" width="90"
minimum="-1" maximum="1" liveDragging="true"/>
<s:Label x="3" y="19" text="音量:"/>
<s:Label x="154" y="20" text="左右声道:"/>
<s:Group styleName="soundBox" x="6" y="58" width="256" height="36">
<s:Group width="100%" height="100%" id="soundWave" >
</s:Group>
</s:Group>
<s:HGroup bottom="10">
<s:Spacer width="2" />
<s:Button label="播放" id="btn_play" width="50" height="20"/>
<s:Spacer />
<s:Button label="暂停" id="btn_pause" width="50" height="20"/>
</s:HGroup>
</s:Panel>
</s:Application>
全部评论(0)