1. 程式人生 > >HTML5:Animate cc互動之“聲音”的“開始、暫停功能

HTML5:Animate cc互動之“聲音”的“開始、暫停功能

一、實現效果

開啟第一個頁面,聲音是在播放的,點選按鈕,跳到下一個地方,開啟第2個聲音,2個聲音之間是不會衝突的。

二、步驟

1.確定An cc軟體的幀數中,有沒有加入聲音事件,不能加入逐幀聲音,會有衝突,如圖:

a.幀標籤註釋,正確


b.逐幀聲音,錯誤


2.確定你已經有加了路徑的create.js指令碼

3.在第0幀,呼叫所有聲音

var sounds = {path:"./assets/",//assets是指聲音檔案

            manifest: [
                        {id: "sy1", src: { mp3:"01.mp3"}},
			{id: "sy2", src: { mp3:"02.mp3"}},//sy1-20是你自定義的ID,是你要呼叫的
			{id: "sy3", src: { mp3:"03.mp3"}},
			{id: "sy4", src: { mp3:"04.mp3"}},
			{id: "sy5", src: { mp3:"05.mp3"}},
			{id: "sy6", src: { mp3:"06.mp3"}},
			{id: "sy7", src: { mp3:"07.mp3"}},
			{id: "sy8", src: { mp3:"08.mp3"}},
			{id: "sy9", src: { mp3:"09.mp3"}},
			{id: "sy10", src: { mp3:"10.mp3"}},
			{id: "sy11", src: { mp3:"11.mp3"}},
			{id: "sy12", src: { mp3:"12.mp3"}},
			{id: "sy13", src: { mp3:"13.mp3"}},
			{id: "sy14", src: { mp3:"14.mp3"}},
			{id: "sy15", src: { mp3:"15.mp3"}},
			{id: "sy16", src: { mp3:"16.mp3"}},
			{id: "sy17", src: { mp3:"17.mp3"}},
			{id: "sy18", src: { mp3:"18.mp3"}},
			{id: "sy19", src: { mp3:"19.mp3"}},
			{id: "sy20", src: { mp3:"20.mp3"}}
    ]};
createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.FlashAudioPlugin]);
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.registerSounds(sounds);

4.在相應的幀處停止聲音

createjs.Sound.stop();	//停止聲音
createjs.Sound.play("sy20");//播放聲音

5.注意!如果你有個返回首頁按鈕,那麼你要,點選按鈕後跳轉的幀數不是第0幀,而是要變成第1幀去。

所謂的第0幀是指,第一幀,因為在編輯器的js程式碼中是指第0幀,所以這樣稱呼。