播放音效

有網友問說是否能在按鈕或是圖片按下時有音效？這種效果大多是跟Flash結合在一起，若只用JavaScript來做的話是比較少見，不過要用JavaScript來做的話並不難。

有兩種比較簡單的方法來做到這樣的效果，先來介紹第一種。

第一種是用Embed，方法就跟網頁也有動畫快遞的方法一樣，在Div裡面放入一個Embed。

讓我們先來看Body裡面的Code：



我放了一個按鈕、一張圖片及一個超連結，其中按鈕跟超連結被Cilck時跟圖片被滑鼠指到時都會觸發playSound()函式，並帶入不同參數；最後一個Div是用來放制Embed用的(跟網頁也有動畫快遞的方法是一樣的)。

接著就是JavaScript：



宣告了一個music陣列用來存放音效檔案的路徑，因為我把他跟網頁放在同一目錄下，所以寫成醬就可以了。playSound()函式只是在Div中放置一個Embed，比網頁也有動畫快遞的寫法更簡單吧。

醬就能在按鈕跟超連結被按下時及圖片被滑鼠指到時出現音效了，這些Event都可以依自己的需求來改，看是要用onClick、onMouseOver或onDblClick什麼都行，也可以在計算字(元)數中增加當字數超過限定時出現音效呢！

不過有沒有覺得當觸發Event時，播放音效的時間有點慢的感覺，這是因為Embed還要再載入音效的關係。所以還有另一種方法來改善這問題。

第二種是用bgSound，這屬性是用來替網頁加背景音樂用的，我們也可以用來播放音效。

Body裡面的Code跟第一種有點不一樣：



用了bgSound來取代原先的Div，bgSound中的src屬性為音樂的路徑，loop表示重覆播放幾次。

再來看JavaScript：



這邊只有改playSound()函式，只要指定bgSound的src就可以了。怎樣~應該是比第一種分法更EZ了吧。試著執行後，應該會發現當觸發完Event後出現音效的時間比第一種更即時了吧。

歡迎大家提供下載音效的網站：

http://sound.flash8.net/

範例瀏覽：

http://abgne.myweb.hinet.net/0011/0011_1.html

http://abgne.myweb.hinet.net/0011/0011_2.html


以上內容於2005/10/09發表在小弟的Blog裡http://blog.xuite.net/abgne/diary1/4112955

x0