JavaScript FAQ（二十四）—— 聲音

二十一、聲音

 

1、可以播放聲音的瀏覽器（Audio-enabled Browsers）

Q：什麼可以瀏覽器可以執行播放聲音的指令碼？

A：如果在聲音播放描述的技術可以在Miscrosoft Internet Explorer 4.0及其更新版本中工作，那麼同樣可以在Netscape Navigator 3.0及其更新版本中工作。要在Internet Explorer中播放聲音，在4.0以及後來版本中測試就足夠了。然後在Netscape Navigator中，你必須確保以下幾點：

• 瀏覽器版本是3.0或者更新版本
• 啟用Java（不僅僅是JavaScript！）
• 瀏覽器能夠識別你要播放音頻檔案的mime類型
• LiveAudio外掛程式可用

例如，如果你想在下面的EMBED標記中播放音效檔mySound.mid

<EMBED NAME="mySound" SRC="mySound.mid" mce_SRC="mySound.mid"     LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

那麼，就需要使用下面的代碼進行測試：

ver=parseInt(navigator.appVersion)    if (ver>2 && navigator.appName=="Netscape"              && navigator.mimeTypes['audio/x-midi']              && navigator.javaEnabled()               && document.mySound.IsReady() )    {     // put Netscape-specific code here    }    if (ver>3 && navigator.appName.indexOf("Microsoft")!=-1)     {     // put Explorer-specific code here    }

2、音頻檔案格式（Audio File Formats）

Q：網頁可以播放那些類型的音頻檔案？

A：所有啟用音訊瀏覽器都支援回放WAV和MIDI格式（.mid、.midi和.wav檔案）的音頻檔案。根據使用者瀏覽器和系統配置的不同的，其他格式檔案也許支援或不支援。例如，ReadAudio只能使用者安裝了RealPlayer才可以回放。

 

3、使用JavaScript播放聲音（Playing Sound from JavaScript）

Q：我如何編寫一個播放聲音JavaScript指令碼呢？

A：有幾種不同的方式可以通過JavaScript播放聲音。我們來看幾個例子：

樣本1. 這是一個最簡單的播放音效檔的跨瀏覽器指令碼：

self.location="AUDIO_FILE_URL"

點擊這裡測試樣本1代碼。瀏覽器會開啟一個單獨的聲音控制視窗。那麼使用者需要手動關閉這個視窗。注意，樣本1對使用者並不友好：使用者每一次點擊運行指令碼，瀏覽器都會開啟一個新的聲音控制視窗，即使已經有音頻視窗已經在播放同樣的檔案！

樣本2. 這是一個更加複雜的例子，這個例子沒有單獨的聲音控制視窗。（下面有關於這個例子的討論。）

 在Microsoft Internet Explorer中，有幾種方式可以通過JavaScript而不開啟單獨的聲音控制視窗來播放音效檔的方式。例如，可以使用IE特定的BGSOUND標籤：

<BGSOUND ID="BGSOUND_ID" LOOP=1 VOLUME="-600" SRC="jsilence.mid" mce_SRC="jsilence.mid">

使用下面的JavaScript代碼通過BGSOUND標籤播放音效檔mySound.mid：

//開始播放 document.all['BGSOUND_ID'].src='mySound.mid' //停止播放document.all['BGSOUND_ID'].src='jsilence.mid'

這裡的mySound.mid代表你實際要播放的音效檔的名字；jsilence.mid是一個“什麼都不做”的音效檔——它不播放任何聲音，但是可以用停止其他音效檔的回放。

在Netscape Navigator中，你必須使用LiveAudio外掛程式；因此，你需要在頁面放一個EMBED標籤。例如，如果你想播放檔案mySound.mid並且隱藏LiveAudio視窗，你可以使用下面的EMBED標籤：

<EMBED NAME="mySound" SRC="mySound.mid" mce_SRC="mySound.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

使用下面的JavaScript代碼在Netscape中控制聲音：

//開始播放 document.mySound.play() //停止播放 document.mySound.stop()

樣本2的代碼如下。代碼首先測試瀏覽器是否啟用了音頻，然後使用該頁描述的技術。你會看到兩個JavaScript函數playSound()和stopSound()，它們開始和停止回放。

<BGSOUND id="BGSOUND_ID" LOOP=1 SRC="jsilence.mid" mce_SRC="jsilence.mid"><EMBED NAME="Bach" SRC="Bach.mid" mce_SRC="Bach.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND><mce:script language="JavaScript"><!--ver=parseInt(navigator.appVersion)ie4=(ver>3  && navigator.appName!="Netscape")?1:0ns4=(ver>3  && navigator.appName=="Netscape")?1:0ns3=(ver==3 && navigator.appName=="Netscape")?1:0function playSound() { if (ie4) document.all['BGSOUND_ID'].src='Bach.mid'; if ((ns4||ns3)  && navigator.javaEnabled()  && navigator.mimeTypes['audio/x-midi']  && self.document.Bach.IsReady() ) {  self.document.Bach.play() }}function stopSound() { if (ie4) document.all['BGSOUND_ID'].src='jsilence.mid'; if ((ns4||ns3)  && navigator.javaEnabled()  && navigator.mimeTypes['audio/x-midi'] ) {  self.document.Bach.stop() }}// --></mce:script><form name=myform><input type=button value="Play Sound" onClick="playSound()"><input type=button value="Stop Sound" onClick="stopSound()"></form>

 

4、停止聲音（Stopping Sound）

Q：如何編寫停止聲音播放的JavaScript函數？

A：如果你使用self.location="AUDIO_FILE_URL" （見樣本1）開啟了一個單獨的視窗，那麼沒有什麼簡單的程式方式停止聲音。使用者只能手動關閉視窗。

要能夠通過JavaScript停止聲音播放，你需要使用樣本2中描述的技術。

 

我們假設Microsoft Internet Explorer通過特定的BGSOUND標籤播放音效檔mySound.mid

<BGSOUND ID="BGSOUND_ID" SRC="mySound.mid" mce_SRC="mySound.mid">

要停止播放，可以使用代碼：

document.all['BGSOUND_ID'].src='jsilence.mid' 

這裡的jsilence.mid是一個“什麼都不做”的音效檔——它不播放任何聲音。

現在假設，NetScape Navigator使用EMBED標籤播放音效檔mySound.mid：

<EMBED NAME="mySound" SRC="mySound.mid" mce_SRC="mySound.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

然後你可以使用下面的代碼停止回放：

document.mySound.stop();

5、onMouseOver事件播放聲音（Playing Sound onMouseOver）

Q：我可以在onMouseOver事件發生時播放聲音嗎？

A：可以。你可以在超連結的onMouseOver事件處理器中調用聲音回放函數。試一下下面的例子：滑鼠指標經過下面的超連結時，瀏覽器就開始播放聲音。

J.S.Bach's Suite in B-minor

 這是這個超連結的原始碼：

<a class=playOnHoverhref=# title="This hyperlink plays a sound onMouseOver."onClick="return false"onMouseOver="playSound();return true"onMouseOut ="stopSound();return true"> J.S.Bach's Suite in B-minor </a>

函數playSound()和stopSound()的代碼見聲音播放部分。

 

6、預載入音效檔（Preloading Sound Files）

Q：我如何預載入一個音效檔？

A：在Netscape Navigator 3.0及其後續版本和Microsoft Internet Explorer 4.0及其後續版本中，你可以使用下面的EBMED標籤預載入一個音效檔mySound.mid：

<EMBED NAME="mySound" SRC="mySound.mid" mce_SRC="mySound.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

然後就可以使用聲音播放部分的技術播放這個檔案。

 

7、背景聲音（Background Sound）

Q：如何設定網頁的背景聲音？

A：在所有啟用聲音的瀏覽器上，你都可以使用EMBED標籤播放背景聲音。例如，你如果想在瀏覽器完全載入頁面後就播放檔案bkground.mid，可以使用下面的EMBED標籤：

<EMBED NAME="bkgroundID" SRC="bkground.mid" mce_SRC="bkground.mid"LOOP=TRUE AUTOSTART=TRUE HIDDEN=TRUE MASTERSOUND>

要停止背景聲音，可以調用跨瀏覽器的方法：

document.bkgroundID.stop();

如果你的目標瀏覽器是Microsoft Internet Explorer（比如，在內網中），那麼你可以使用IE專用的BGSOUND標籤：

<BGSOUND ID="bkgroundID" LOOP=0 VOLUME="-600" SRC="bkground.mid" mce_SRC="bkground.mid">

這裡再次說明，bkground.mid代表你實際要播放的音效檔的名稱。

 

8、不使用JavaScript播放聲音（Playing Sound Without JavaScript）

Q：我是否可以不使用JavaScript播放音效檔？

A：可以。你可以在一個超連結中指定音效檔的URL來播放聲音，例如<A HREF="mySound.mid">（點擊觀察效果）。

當使用者點擊這個連結時，瀏覽器會開啟一個單獨的聲音控制視窗。然後使用者就必須手動關閉這個視窗。更糟糕的是，使用者每次點擊都會開啟一個新視窗，即使已經好幾個視窗在播放同一個檔案了。