课堂导入
在我们的交互式动画里，对声音的控制非常重要，应用广泛，如何控制声音的播放、暂停、后退、前进呢？让我们一起来学习吧！
学习目标
1、掌握在flash中加载声音的方法；
2、掌握声音播放控制的基本方法。
学习任务单
素材下载
教学视频
教学课件
拓展资源
（一）思考一下：如何制作一个完整的音乐播放器呢？
（二）操作步骤
步骤1：播放声音。创建mp3播放器背景影片剪辑sound，圆角绘制矩形框，填充颜色、添阴影效果。从外部打开mps音乐文件并播放。将sound影片剪辑链接属性设置为：playas.mp3play。创建playas.mp3play.as脚本文件，输入代码：
package playas{
import flash.display.*;
import flash.events.*;
import flash.system.*;
import flash.utils.*;
import flash.media.*;
import playas.thedraw;
//import playas.control;
import flash.net.URLRequest;
public class mp3play extends Sprite {
public static var Url:String = "mp3/music.mp3";//设置mp3路径
public static var _instance:mp3play;
public static var mymp3=new Sound();
public static var music=new SoundChannel();
public function mp3play() {//构造函数
System.useCodePage=true;
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
//setplay(); //添加波形显示元件
mymp3.load(new URLRequest(Url)); //加载声音文件
music=mymp3.play(); //设置声音状态为播放
}
//private function setplay() {//波形控件添加
//var playEffect=new thedraw();
//playEffect.x=25;
//playEffect.y=120;
//addChild(playEffect);//添加波形图
//}
}
}
其中部分代码注释是因为暂时不显示声音的波形，待程序全部编写完成，需将注释部分取消注释。此时程序可以播放mp3音乐。
步骤2：下面要实现音乐的播放音量、进程等控制，需要创建控件。
（1）播放控制：创建影片剪辑play_b，第１帧放置播放按钮,输入代码：stop();第2帧放置暂停按钮。如下图示。
（2）停止控制：以按钮元件方式准备一个停止按钮，命名为：stop_b
（3）音量控制：创建影片剪辑vol_bg和vol_mask，vol_bg中放音量进度条背景，相对于舞台左对齐，上对齐，音量进度条宽度、高度略小于背景，左对齐，上对齐。
（4）播放进度控制：创建2个影片剪辑元件，分别放置进度条背景线条、前景条，分别命名为line、sco，和创建游标按钮元件，命名为mybar。注意：所创建的元件相对于舞台左对齐，上对齐。创建control_bar影片剪辑，组合进度条的mybar、sco、line三个内容，实例名称与相应的影片剪辑及按钮同名。
（5）播放时间显示：创建时间显示文本框，动态文本，命名为：showtxt。
（6）创建影片剪辑control，将以上控件逐一拖入，实例名用相应的影片剪辑或按钮名称命名，如下图：
（7）将control影片剪辑拖入，实例名为：control。
步骤3：创建control.as脚本文件，输入下列代码：
package playas{
import flash.display.*;
import flash.events.*;
import flash.utils.*;//使用MC时引入
import flash.text.TextField;
import flash.net.NetStream;
import flash.media.SoundTransform;
import flash.geom.Rectangle;//位置类
import flash.net.URLRequest;
import playas.mp3play;
public class control extends Sprite {
private var pos:Number=0;
public static var runTime;
private var len:Number;
private var playtag:Boolean=true;//播放时为T
private var drag:Boolean=false;
private var soundv:SoundTransform;
public function control() {
runTime=new Timer(100);
// 创建一个时间对象来累加管理播放器的时间点。
runTime.start();
control_bar.sco.width=1;
control_bar.mybar.x=-20;
soundv=new SoundTransform();
vol_bg.addEventListener(MouseEvent.CLICK,volumeOnClick);
vol_mask.addEventListener(MouseEvent.CLICK,volumeOnClick);
//声音控制器
play_b.gotoAndStop(2);
runTime.addEventListener(TimerEvent.TIMER,timeEvent);
play_b.addEventListener(MouseEvent.CLICK,onPlay);
control_bar.line.addEventListener(MouseEvent.CLICK,seekOnClick);
control_bar.sco.addEventListener(MouseEvent.CLICK,seekOnClick);
stop_b.addEventListener(MouseEvent.CLICK,onStop);
control_bar.mybar.addEventListener(MouseEvent.MOUSE_DOWN,mousedown_bar);
}
private function volumeOnClick(event:MouseEvent):void {
var time:Number=vol_bg.mouseX/vol_bg.width;
soundv.volume=time;
vol_mask.scaleX=time;
mp3play.music.soundTransform=soundv;
}
// seedOnClick函数的作用是当鼠标载播放条上的相应点单击时进行跳转操作。
private function seekOnClick(event:MouseEvent):void {
if ( playtag) {
var time:Number=((control_bar.line.mouseX-2)/control_bar.line.width)*len;
mp3play.music.stop();
mp3play.music=mp3play.mymp3.play(time);
mp3play.music.soundTransform=soundv;
}
}
// mousedown_bar鼠标拖动播放点时的事件函数
private function mousedown_bar(event:MouseEvent):void {
if ( playtag) {
drag=true;
var theRec:Rectangle = new Rectangle(0, 0, control_bar.line.width-5, 0);//x=0 y=0 w=200 h=0
control_bar.mybar.startDrag(false,theRec);//是否锁定中点：false 限制拖动矩形：theRec
this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseup);
}
}
//结束拖动操作，计算拖动进度条对应的播放时间time，并开始播放音乐
private function mouseup(event:MouseEvent):void {
if (drag) {
drag=false;
control_bar.mybar.stopDrag();
var time:Number=(control_bar.mybar.x/control_bar.line.width)*len;
mp3play.music.stop();
mp3play.music=mp3play.mymp3.play(time);
}
}
//停止播放操作，重置进度条，播放按钮跳转到第1帧，然后将显示时间重新设置为0。
private function onStop(event:MouseEvent):void {
if ( playtag) {
playtag=false;
mp3play.music.stop();
runTime.stop();
pos=0;
play_b.gotoAndStop(1);
control_bar.mybar.x=-2;
control_bar.sco.width=0;
showtxt.text ="00:00";
}
}
//如果视频处于播放状态，当单击播放按钮后暂停播放
private function onPlay(event:MouseEvent):void {
if (! playtag) {
playtag=true;
play_b.gotoAndStop(2);
mp3play.music=mp3play.mymp3.play(pos);
runTime.start();
mp3play.music.soundTransform=soundv;
} else {
playtag=false;
pos=mp3play.music.position;
play_b.gotoAndStop(1);
mp3play.music.stop();
runTime.stop();
}
}
//每一秒钟执行一次侦听函数，设置进度条和播放时间
private function timeEvent(event:TimerEvent) {
var loaded:int = mp3play.mymp3.bytesLoaded;
var total:int = mp3play.mymp3.bytesTotal;
pos =mp3play.music.position;
len = mp3play.mymp3.length;
if (total > 0) {
var loadnum:Number = loaded / total;
if (loadnum!=1) {//如果音乐还没加载完，那么显示播放时间的文本框用来显示当前加载进度。
len /=loadnum;
showtxt.text=int(loadnum*100)+"%";
control_bar.line.scaleX=loadnum;
} else {
control_bar.line.scaleX=1;
showtxt.text =revise(int((pos/1000)/60))+":"+revise(int(pos/1000)%60);
}
//var percentPlayed:Number =pos/len;
//下面控制已播放标记sco和播放点mybar，当前所播放完成的标记长度等于播放条要滚动的所有长度乘以音乐总长度len与当前音乐点pos的比值。
if (! drag) {
control_bar.sco.width=(control_bar.line.width)*(pos/len);
control_bar.mybar.x=control_bar.sco.width-2;
} else {//当播放点被子拖动时停止对x轴的控制，bar自动适应
control_bar.sco.width=control_bar.mybar.x+10;
}
}
}
private function revise(num) {
if (num<10) {
num = "0"+num;
}
return num;
}
}
}
步骤4：创建波形显示文件thedraw.as，首先使用SoundMixer类来控制swf中嵌入的声音流，然后使用SoundMixer类的computerSpectrum方法来获取当前声音波形的快照，接着将其放在指定的ByteArray对象中，并且这些值已设定为标准的浮点值（-1~1）格式。输入下列代码：
package playas{
import flash.display.Sprite;
import flash.events.*;
import flash.media.SoundMixer;
import flash.utils.ByteArray;
public class thedraw extends Sprite {
private var shapeNum=50;//波形数
private var dx=3;//波形间距
private var set_y:Number=0;//设置波形图打印的Y轴，需要和thedraw类里的值一至
private var set_x:Number=0;//设置波形图打印的X轴
private var bytes: ByteArray;
public function thedraw() {
for (var i:uint=0; i<shapeNum; i++) {
var circle=new shape();
circle.name = "rect"+i;
circle.x=set_x+i*dx;//x,y位置
circle.y=set_y;
circle.height=3;
addChild(circle);//添加它到场景中
var pix=new shape(); //从这里开始创建矩形上方跳动的高度为2个像素的小矩形。
pix.name = "pix"+i;
pix.x=set_x+i*dx;//x,y位置
pix.y=set_y;
pix.height=2;
addChild(pix);//添加它到场景中
}
bytes = new ByteArray();
this.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
private function onEnterFrame( event: Event ):void {
SoundMixer.computeSpectrum( bytes, true, 0 );
var value: Number;
var shape;
var set_h;
var usepix;
//control.volbut.x=50
var i=0;
for (var j = 0; i<shapeNum*2; j++) {
value = bytes.readFloat();
set_h=(int(value*100000)/1000)/3;
if (j%2==0) {//总共有255个音波，这里用不着那么多把他们折叠起来
//每隔两个浮点取值一次
if (i<shapeNum) {
shape=getChildByName("rect"+i);
if (shape.height<set_h) {
shape.y=set_y-set_h;
shape.height=set_h;
}
} else {
usepix=getChildByName("pix"+(i-shapeNum));
shape=getChildByName("rect"+(i-shapeNum));
var use_y=set_y-shape.height-set_h-1;
if (usepix.y>use_y) {
usepix.y=use_y;
}
}
i++;
}
}
}
}
}
import flash.display.*;
import flash.events.*;
class shape extends Sprite {
//注:一个绘图类,就当作一个mc了,所有的设置与属性等,都是针对这个mc了
public var max_h:Number=0;//设置Y轴，需要和sound类里的一致
public function shape() {
graphics.beginFill(0xFB62009);
graphics.drawRect(0,0,1,30);//画矩形
graphics.endFill();
this.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
//下面添加onEnterFrame事件，当矩形高度大于3像素时会自动缩小，形成不断变化的波形图
private function onEnterFrame( event: Event ):void {
if (this.height>3) {//控制长条的情况
this.height--;
this.y=max_h-this.height;
} else {
if (this.height!=2) {//短条方块的高是2，如果是短条不设置高
this.y=max_h-this.height;
}
}
if (this.height==2 && this.y<max_h) {
this.y++;//控制短条Y轴
}
if (this.y>max_h-this.height) {//保持底部对齐
this.y=max_h-this.height;
}
}
}
课后检测
同学们，请扫描以下二维码进行课后检测，我们将全程记录你的答题情况。
