B E L L E A Y A 雜七雜八創作小窩

Flash ActionScript3.0 簡易音樂播放

AS3的音樂功能已經相當好用
最大的優點在於它的分工相當明確

首先要有個概念就是要把音樂當作是一種「類別」
而利用這種類別的Play()方法就可進行播放

Play()這個方法也可以設定參數
比方說Play(10)代表是從第10毫秒開始播放
或者說Play(0,10)代表是從第0秒播、共播10次

但是Play()主要掌管的只有「播放」
如果要讓音樂停止
則是SoundChannel類別的工作了~

語法上可以將SoundChannel = 音檔.play()
也就是說在開始播放之後
就把工作交給SoundChannel這個類別來管

詳細情形將在下面直接以範例來說明
(範例的音樂是我自己作曲的唷)

這邊我用兩個範例
第一個是比較簡單的
只有播放、暫停(按播放鈕後按鈕會變暫停鈕)、停止

首先先新增新檔案
選擇ActionScript 3.0

在畫面上先把兩個按鈕圖做好
但是這兩個實際上是「影片片段」而非按鈕
理由是要讓播放鈕按了之後直接跳影格變暫停鈕

我將停止播放鈕命名其實體名稱為musicStop_mc
播放/暫停鈕命名其實體名稱為musicStart_mc

其中musicStart_mc裡面第五影格改成暫停鈕的圖

並且讓第一格跟第五格都增加影格動作 stop();

之後將要放的音樂匯入至元件庫
檔案→匯入→匯入至元件庫

匯入完成之後
在上面右鍵

選擇「連結」
(CS3版是分開的，CS4好像就併到屬性裡面)

將「匯出給ActionScript使用」打勾
並且將類別命名為music_snd
(當然類別可以自己隨便命名，只要不是保留字、自己記得住就可以)

回到主場景
並在第一個影格輸入以下程式

首先要先將聲音類別建立出來
我宣告一個名為playsnd的物件是屬於我音樂的music_snd類別
(就是剛剛連結那邊自訂的)
playsndCh則是SoundChannel類別的物件
之後要控管playsnd播放之後的事務

var playsnd:music_snd = new music_snd();
var playsndCh:SoundChannel;
 

然後再設一個變數用來儲存我播放頭的位置
這是要給暫停鈕使用的

var playsndTime=0;

接著

musicStop_mc.buttonMode=true;
musicStart_mc.buttonMode=true;

這兩行是將影片片段設定為可以像按鈕一樣點選
會從游標箭頭變成手指
給使用者較直觀

musicStop_mc.addEventListener(MouseEvent.CLICK, doStop);
musicStart_mc.addEventListener(MouseEvent.CLICK, doStart);

這兩行就將兩個按鍵的影片片段建立滑鼠的事件偵聽
其中停止的函數是doStop
開始/暫停的是doStart

停止的比較簡單
如果正在播放音樂的話if(playsndCh)
就把音樂整個停止
並且把SoundChannel設定為空值
播放頭的時間歸0
而開始/暫停鈕則回歸到影格1(也就是顯示為「播放鈕」)

function doStop(e:MouseEvent):void{
    if(playsndCh){
        playsndCh.stop();
        playsndCh=null;
        playsndTime=0;
        musicStart_mc.gotoAndStop(1);
    }
}

再來就是播放/暫停鈕的設定
因為要判定是否音樂正在播
如果沒在播的話就顯示播放鈕
如果已經有在播的話顯示暫停鈕

所以這邊就用if else判定playsndCh這個SoundChannel是否存在
若有的話則在按下之後
將播放頭的時間存入playsndTime
position是SoundChannel的屬性之一
可以偵聽到目前播放到音樂的什麼地方

存入playsndTime之後
就把SoundChannel停掉
並且將按鈕變換成播放

而如果沒有在播音樂
代表按下之後音樂要開始播
所以 playsndCh = playsnd.play(playsndTime);
因為playsndTime預設是0
所以直接播的話會從頭開始
但如果之前已經有開始播
就會從紀錄的播放頭秒數開始播
而這邊還要再增加一個監聽程式SOUND_COMPLETE
當音樂播下去直到播完之後要將所有值重設的

function doStart(e:MouseEvent):void{
    if(playsndCh){
        playsndTime=playsndCh.position;
        playsndCh.stop();
        playsndCh=null;
        musicStart_mc.gotoAndStop(1);
    }
    else{
        playsndCh = playsnd.play(playsndTime);
        musicStart_mc.gotoAndStop(5);
        playsndCh.addEventListener(Event.SOUND_COMPLETE, soundComplete);
    }
}

soundComplete就是在音樂全播完之後重設用
把SoundChannel都停掉
同時也把播放頭歸0
暫停鈕變回播放鈕

function soundComplete(e:Event):void{
    if(playsndCh){
        playsndCh.stop();
        playsndCh=null;
    }
    playsndTime=0;
    musicStart_mc.gotoAndStop(1);
}

上面的程式應該不難理解吧!!
如果可以吸收的話
再來就要再增加一個功能
就是顯示目前播放的位置

這其實有很多作法
包括直接套Flash內建的UI拉霸等等的
不過這邊我就簡單的用影片片段示範

首先我在下方增加一個拉Bar
並命名為musicPlayBar_mc

然後用變形工具點它一下
把中心點設定到最左邊(白色的圈圈那個)

並且將程式碼補上(灰色的是原本的)

首先先將musicPlayBar_mc的橫向延展度預設為0%
musicPlayBar_mc.scaleX=0;
這樣一進畫面他顯示的就是在0秒的時候

當然在整首歌播完也要讓它歸0
因此在soundComplete裡也要加

而播放bar因為要一直隨著音樂往右邊跑
所以要利用ENTER_FRAME來隨時進行更新

this.addEventListener(Event.ENTER_FRAME, doPlayBar);

而這邊運用的就是如果有在播放的話
橫向延展度的百分比就會等於 (目前播放頭秒數 / 總秒數)
目前播放頭所在位置就直用SoundChannel的position屬性即可
總長度則是音樂本身的屬性
因此是用playsnd這個物件本身的length屬性
相除之後就可以很容易算出scaleX了

function doPlayBar (e:Event):void {
    if(playsndCh){
        musicPlayBar_mc.scaleX=playsndCh.position/playsnd.length;
    }
}

以上都算是比較簡單的作法
如果往後還要加上音量、時間軸拉Bar、甚至直接可以從外部載入的功能
就還需要更多的物件與類別
以後再詳細講

 .

 .

 .

 .

 .

 .

 .　

 .

 .

 .

 .

 .

 .

 .

 .

 .　

 .

 .