谭咏麟扬州演唱会:AS入门教程第9课第2节-mp3播放器[本文已收录教程库] - Flash互助课堂 - 中...

在这个播放器中,我内置了几首歌曲的连接,点击节目单会看到它们.同时提供了一个音乐地址的文本框,你可以输入任何歌曲的地址进行播放.在播放时,会有一个播放进度条,同其它的媒体播放器一样,你可以点击进度条来移动歌曲的播放点,达到快进和快退的目的.而播放控制按钮功能也同其它媒体播放器一样.播放器中设置了音量调节滑块和声道调节滑块.而闪动的光栅的高度则随音量的高低的变化而变化.
现在来制作这个播放器的.
1.首先来做一些准备工作.播放器的外观并非本教程的内容,但一些部件是必须的.
先作5个按钮:播放,暂停,停止,快进,快退,如下图:

它们的实例名称分别是:ply_btn,zd_btn,stop_btn,kj_btn,kt_btn
2.下面来制作进度条,新建一影片剪辑,画一细长矩形,新插入一层,再画一个相同长度不同颜色的矩形,并将它转换为影片剪辑元件,实例名称为:jdt_mc.回到主场景,将进度条影片剪辑放到舞台上,取实例名称为:jdk_mc.如图:

3.声道控制面板,新建一影片剪辑,按下图画出声道控制面板:

画一个小的矩形放到面板的中间刻度上,将小矩形转换为影片剪辑,或者就叫滑块吧.为它取实例名称:sdhk_mc.

回到主场景,将声道控制影片剪辑拖到舞台上,为它取实例名称:sd_mc
4.音量控制面板,新建影片剪辑,按下图画出音量控制面板:

将滑块元件(在上一步中创建的)拖到舞台上,放到音量最大处(右边),为它取实例名称:ylhk_mc

回到主场景,将音量控制影片剪辑拖到舞台上,为它取实例名称为:yl_mc
5.节目单按钮,做下面一样的影片剪辑,放在舞台上,取实例名称为:jmdbtn_mc

6.节目单,新建影片剪辑,画一矩形,在矩形上放一个文本框,输入歌曲名称,演唱者:

同样的方法创建其它的歌曲名称影片剪辑.
新建一影片剪辑,将这些歌曲名称影片剪辑,从库中拖入排好:

分别给这些歌名影片剪辑取实例名称:song1_mc,song2_mc……..song5_mc.
新建一图层,画一矩形盖住所有歌名,然后将这一层拖到最下面.这个矩形的颜色应与歌曲名称影片中的矩形颜色相同.
回到主场景,将节目单影片剪辑拖到舞台上,放到节目单按钮下面,取实例名称为:song_mc

7.光栅,新建影片剪辑,画如下图形:

放在舞台上,然后复制4个,共5个,分别取实例名称为:gb1,gb2,gb3,gb4,gb5

8.地址栏,在舞台上建一个动态文本框,取实例名称为:RUL_txt
9.再放两个动态文本,用来用数字显示进度.两个文本框的实例名称分别为:dqcd_txt,zcd_txt
10.好了,所有的东西都准备齐了,至于你想怎样将它们摆放得漂亮一些,那是你的事情了,本文不涉及到这些内容.我们要写代码了.
我们首先要获得歌曲的地址,将地址放到地址文本框中,当然,最简单的办法是,直接在地址框中输入地址.但我们内置了几首歌,这就要为这些歌名元件添加点击事件,当点击时,将歌曲地址放到地址框中.
在刚打开播放器时,我们让节目单不可见,点击节目单按钮后,才让节目单显示出来:
song_mc._yscale = 0;
这样节目单的高度为0,就不可见了.
jmdbtn_mc.onRelease = function(){
        if(song_mc._yscale > 0){
                song_mc._yscale = 0;
        }else {
        song_mc._yscale=100;
}
}
点击节目单按钮,如果节目单是打开的则关闭节目单,如果是关闭的则打开节目单.
节目单打开后,就可以点击歌曲名称将地址放到地址框中了:
song_mc.song1_mc.onRelease = function(){
        RUL_txt.text ="http://www.yuelin.net/%E5%9B%BD%E5%AE%B6160.mp3";
        song_mc._yscale=0;
}
song_mc.song2_mc.onRelease = function(){
        RUL_txt.text ="http://lfg.ourivy.com/sjweb/enjoyment/music/tiany.mp3";
        song_mc._yscale=0;
}
song_mc.song3_mc.onRelease = function(){
        RUL_txt.text ="http://xuegong.zhbit.com/jx/edit/uploadfile/2008223213733227.mp3";
        song_mc._yscale=0;
}
song_mc.song4_mc.onRelease = function(){
        RUL_txt.text ="http://www.lygmlr.gov.cn/music/%E7%94%BB%E5%BF%83.mp3";
        song_mc._yscale=0;
}
song_mc.song5_mc.onRelease = function(){
        RUL_txt.text ="http://1968.wzeg.com/UploadFiles/2008-6/436743781.mp3";
        song_mc._yscale=0;
}
song_mc.song6_mc.onRelease = function(){
        RUL_txt.text ="http://211.155.30.36:8089/music/Audio/6.mp3";
        song_mc._yscale=0;
}
地址栏中有了歌曲的地址,那么就可以点击播放按钮播放歌曲了.
首先要创建一个Sound类,用来加载mp3:
var wmp3:Sound = new Sound();
在播放前,应该将进度条设在0处:
jdk_mc.jdt_mc._xscale = 0;
将光栅的高度设为零,因为设光栅高度为零的动作要多次执行,所以将它做成一个函数,然后调用它:
function gbhl(){
        for(i=1;i<6;i++){
        gb_mc = eval("gb"+i);
    gb_mc._yscale = 0;
}
}
gbhl();
我们还需要一些变量后面有用:
var zcd;//歌曲的总长度
var dqcd;//当前已播放的长度,用于暂停按钮和进度条
var ztd =0;//暂停点,用于暂停按钮
var jd;//进度条的位置
var rul:String;//歌曲的地址
var sdz;//声道的值
var ylz;//音量的值
这些变量现在不用管它,在后面用到它们时会给予说明的.
接下来就该写播放按钮上的代码了,有了播放按钮,就可以兴赏音乐了.
在播放时,首先应该判断当前是从头开始播放还是处于暂停状态,如果是暂停,那么我们上面声明的变量ztd就不会是0,根据这个变量是否为零就可以确定是从头开始播放还是从ztd开始播放,如果ztd为零,首先从地址栏获得歌曲地址,然后判定地址是否为空,如果不为空则将进度条归零,然后加载歌曲,并播放歌曲.调用mp3pl()函数,这个函数是在歌曲播放过程中设置一些效果比如进度条,光栅等.如果ztd不为零,则歌曲从暂停点处播放,并调用mp3pl()函数.
ply_btn.onRelease = function(){
        if(ztd ==0){
        rul = RUL_txt.text;
        if(rul){
        jdk_mc.jdt_mc._xscale = 0;
        wmp3.loadSound(rul,true);
        wmp3.start();
        mp3pl(wmp3);
}
}else {
        wmp3.start(ztd);
        mp3pl(wmp3);
}
}
现在来看看mp3pl()函数,在这个函数中会用到Sound类的两个属性和一个方法,先介绍一下.
duration属性:该属性返回声音的总长度,以毫秒计算.
position属性:上一节已经介绍过,它返回声音已播放的长度,以毫秒计算.
getVolume()方法:返回声音单量的大小,数字为0-100.
在这个函数中,在onEnterFrame事件中,首先获取歌曲的总长度和当前已播放的长度,将这两个数字显示在文本框中,计算出播放进度,设置进度条的_xscale比例,显示播放进度,然后根据音量设置光栅的高度,首先将_yscale设为音量的一半,然后将另一半设为random()产生随机数,这样就产生闪动的效果.
function mp3pl(mp3){
onEnterFrame = function(){
                zcd = mp3.duration/1000;
                dqcd = mp3.position/1000;
                zcd_txt.text = Math.floor(zcd);
                dqcd_txt.text = Math.floor(dqcd);
                jd = dqcd/zcd*100;
                jdk_mc.jdt_mc._xscale = jd;
                if(dqcd!=zcd){
                for(i=1;i<6;i++){
                        gb_mc = eval("gb"+i);
            gb_mc._yscale =mp3.getVolume()/2+ random(mp3.getVolume()/2);
                }
               
                }
        }
}
现在应该基本成形了,剩下的就是几个按加上功能了.
当点击进度条时根据鼠标在进度条上的位置,确定歌曲重新从那一点上开始播放,达到快进或快退的功能.
jdk_mc.onRelease= function(){
        var djd = _xmouse - jdk_mc._x;
        var kjd = djd/jdk_mc._width*zcd;
        wmp3.stop();
        wmp3.start(kjd);
}
暂停按钮:记录当前已播放的长度,并存到ztd中,停止播放歌曲,这样当点击播放按钮时,因ztd不等于0,而使歌曲从ztd开始播放.
zd_btn.onRelease =function(){
        ztd = dqcd;
        wmp3.stop();
        delete onEnterFrame;
        gbhl();
}
停止按钮:将ztd设为0,停止播放歌曲.
stop_btn.onRelease=function(){
        wmp3.stop();
        ztd = 0;
        delete onEnterFrame;
        gbhl();
}
快进快退按钮,在当前已播放长度的基础上加上或减去5秒,重新播放歌曲
kj_btn.onRelease=function(){
        wmp3.stop();
        kjd = dqcd + 5;
        wmp3.start(kjd);
}
kt_btn.onRelease=function(){
        wmp3.stop();
        ktd = dqcd - 5;
        wmp3.start(ktd);
}
下面的声道控制,在Sound类,的setPan()方法可以设置声音的声道,值为0-100,0声音将完全由左声道播出,而100则完全由右声道播出.当移动声道控制上滑块,放开时根据滑块的位置设置声道的值.
sd_mc.sdhk_mc.onPress = function(){
        startDrag(this,true,0,0,sd_mc._width-this._width/2,0);
                        }
sd_mc.sdhk_mc.onRelease = function(){
        stopDrag();
        sdz = (this._x)/sd_mc._width*100;
        wmp3.setPan(sdz);
}
音量控制,在Sound类中可以使用setVolume()方法设置声音的音量,值为0-100,当移动音量控制上滑块,放开时根据滑块的位置设置音量的值.
yl_mc.ylhk_mc.onPress = function(){
        startDrag(this,true,0,0,yl_mc._width-this._width/2,0);
        }
yl_mc.ylhk_mc.onRelease = function(){
        stopDrag();
        ylz = (this._x)/yl_mc._width*100;
        wmp3.setVolume(ylz);
        }
OK,现在真正的完全完成了,静下心来兴赏音乐吧.
完整的代码:

1. song_mc._yscale = 0;
   
2. var wmp3:Sound = new Sound();
   
3. var zcd;
   
4. var dqcd;
   
5. var ztd =0;
   
6. var jd;
   
7. var rul:String;
   
8. var sdz;
   
9. var ylz;
   
10. jdk_mc.jdt_mc._xscale = 0;
    
11. gbhl();
    
12. ply_btn.onRelease = function(){
    
13.         if(ztd ==0){
    
14.         rul = RUL_txt.text;
    
15.         if(rul){
    
16.         jdk_mc.jdt_mc._xscale = 0;
    
17.         wmp3.loadSound(rul,true);
    
18.         wmp3.start();
    
19.         mp3pl(wmp3);
    
20. }
    
21. }else {
    
22.         wmp3.start(ztd);
    
23.         mp3pl(wmp3);
    
24. }
    
25. }
    
26. jdk_mc.onRelease= function(){
    
27.         var djd = _xmouse - jdk_mc._x;
    
28.         var kjd = djd/jdk_mc._width*zcd;
    
29.         wmp3.stop();
    
30.         wmp3.start(kjd);
    
31. }
    
32. function mp3pl(mp3){
    
33. onEnterFrame = function(){
    
34.                 zcd = mp3.duration/1000;
    
35.                 dqcd = mp3.position/1000;
    
36.                 zcd_txt.text = Math.floor(zcd);
    
37.                 dqcd_txt.text = Math.floor(dqcd);
    
38.                 jd = dqcd/zcd*100;
    
39.                 jdk_mc.jdt_mc._xscale = jd;
    
40.                 if(dqcd!=zcd){
    
41.                 for(i=1;i<6;i++){
    
42.                         gb_mc = eval("gb"+i);
    
43.             gb_mc._yscale =mp3.getVolume()/2+ random(mp3.getVolume()/2);
    
44.                 }
    
45.                
    
46.                 }
    
47.         }
    
48. }
    
49. jmdbtn_mc.onRelease = function(){
    
50.         if(song_mc._yscale > 0){
    
51.                 song_mc._yscale = 0;
    
52.         }else {
    
53.         song_mc._yscale=100;
    
54. }
    
55. }
    
56. song_mc.song1_mc.onRelease = function(){
    
57.         RUL_txt.text ="http://www.yuelin.net/%E5%9B%BD%E5%AE%B6160.mp3";
    
58.         song_mc._yscale=0;
    
59. }
    
60. song_mc.song2_mc.onRelease = function(){
    
61.         RUL_txt.text ="http://lfg.ourivy.com/sjweb/enjoyment/music/tiany.mp3";
    
62.         song_mc._yscale=0;
    
63. }
    
64. song_mc.song3_mc.onRelease = function(){
    
65.         RUL_txt.text ="http://xuegong.zhbit.com/jx/edit/uploadfile/2008223213733227.mp3";
    
66.         song_mc._yscale=0;
    
67. }
    
68. song_mc.song4_mc.onRelease = function(){
    
69.         RUL_txt.text ="http://www.lygmlr.gov.cn/music/%E7%94%BB%E5%BF%83.mp3";
    
70.         song_mc._yscale=0;
    
71. }
    
72. song_mc.song5_mc.onRelease = function(){
    
73.         RUL_txt.text ="http://1968.wzeg.com/UploadFiles/2008-6/436743781.mp3";
    
74.         song_mc._yscale=0;
    
75. }
    
76. song_mc.song6_mc.onRelease = function(){
    
77.         RUL_txt.text ="http://211.155.30.36:8089/music/Audio/6.mp3";
    
78.         song_mc._yscale=0;
    
79. }
    
80. function gbhl(){
    
81.         for(i=1;i<6;i++){
    
82.         gb_mc = eval("gb"+i);
    
83.     gb_mc._yscale = 0;
    
84. }
    
85. }
    
86. stop_btn.onRelease=function(){
    
87.         wmp3.stop();
    
88.         ztd = 0;
    
89.         delete onEnterFrame;
    
90.         gbhl();
    
91. }
    
92. zd_btn.onRelease =function(){
    
93.         ztd = dqcd;
    
94.         wmp3.stop();
    
95.         delete onEnterFrame;
    
96.         gbhl();
    
97. }
    
98. kj_btn.onRelease=function(){
    
99.         wmp3.stop();
    
100.         kjd = dqcd + 5;
     
101.         wmp3.start(kjd);
     
102. }
     
103. kt_btn.onRelease=function(){
     
104.         wmp3.stop();
     
105.         ktd = dqcd - 5;
     
106.         wmp3.start(ktd);
     
107. }
     
108. sd_mc.sdhk_mc.onPress = function(){
     
109.         startDrag(this,true,0,0,sd_mc._width-this._width/2,0);
     
110.                         }
     
111. sd_mc.sdhk_mc.onRelease = function(){
     
112.         stopDrag();
     
113.         sdz = (this._x)/sd_mc._width*100;
     
114.         wmp3.setPan(sdz);
     
115. }
     
116. yl_mc.ylhk_mc.onPress = function(){
     
117.         startDrag(this,true,0,0,yl_mc._width-this._width/2,0);
     
118.         }
     
119. yl_mc.ylhk_mc.onRelease = function(){
     
120.         stopDrag();
     
121.         ylz = (this._x)/yl_mc._width*100;
     
122.         wmp3.setVolume(ylz);
     
123.         }

复制代码