簡單的音效功能,應該沒人想自己寫吧。
先看幾個現存可用的:

  • Audio Engine

    就是 Scriptaculous 的 sound.js,單純地產生 <embed> 來發聲,在 ie 使用 bgsound,其他瀏覽器則仰賴 QuickTime 支援。可做 track 控制及全域 enable/disable 的切換;再移植版 jQuery 的 jquery.sound.js 還可設定 timeout 將產生的 <embed> 移除。

    $.sound.play( '/path/to/some.wav' , {track: "track1";} );
  • JSSoundKit (Javascript Sound Kit)

    透過 ActionScript 的 ExternalInterface,寫出一個 proxyMethods 方法來操作 Flash Sound 物件。功能自然也跟 ActionScript 2.0 的 Sound 類別一樣。

    var mysound = new Sound();
    mysound.loadSound('/path/to/some.wav' , true);
  • SoundManager2

    同樣依靠 flash,但它是再設計封裝過的、更完整的 API,也比 JSSoundKit 穩定可靠。壓縮後約 18 kb 說龐大難養也不至於。

    soundManager.play('mySound','/path/to/some.mp3');


※以上僅介紹我試用過的,當然有其他選擇,例如 MooTools 用的 mooSound


最後我懶得探索,於是自己寫了 jQuery plugin:flashSound,測試一下還算堪用,不過它只有最基本的功能(包括停用音效),可以發出登登登的聲音,但是要做歌曲播放器的話,很勉強喔。

詳細使用方面,接受兩種風格的寫法,其之一:

$.flashSound( 'foo.mp3', {id: 'se1'} );     // 讀取聲音檔(還不會播放),並將物件命名為 se1
$.flashSound.play('se1');                   // 播放
$.flashSound.play('se1', true);             // 播放,但先停止前一個播放的聲音
$.flashSound.stop('se1');                   // 停止播放
$.flashSound.remove('se1');                 // 移除 flash 物件

或者

var se1 = $.flashSound( 'foo.mp3' );   // 讀取聲音檔
se1.play();                            // 播放
se1.play(true);                        // 播放,但先停止前一個播放的聲音
se1.stop();                            // 停止播放
se1.remove();                          // 移除 flash 物件
// 請留意若在 se1 建立前呼叫 play, stop,會發生「物件沒有該方法」的錯誤。

另外全域啟用╱停用音效的方法是:

$.flashSound.enable();        // 全面啟用 flashSound
$.flashSound.disable();       // 全面停用 flashSound


下載、測試請至 flashSound 首頁參觀。