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. 这是一个更加复杂的例子，这个例子没有单独的声音控制窗口。（下面有关于这个例子的讨论。）

<!-- ver=parseInt(navigator.appVersion) ie4=(ver>3 && navigator.appName!="Netscape")?1:0 ns4=(ver>3 && navigator.appName=="Netscape")?1:0 ns3=(ver==3 && navigator.appName=="Netscape")?1:0 function playSound() { if (ie4) document.all['BGSOUND_ID'].src='http://www.javascripter.net/faq/sound/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='http://www.javascripter.net/faq/sound/jsilence.mid'; if ((ns4||ns3) && navigator.javaEnabled() && navigator.mimeTypes['audio/x-midi'] ) { self.document.Bach.stop() } } // -->

在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:0
ns4=(ver>3  && navigator.appName=="Netscape")?1:0
ns3=(ver==3 && navigator.appName=="Netscape")?1:0

function 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=playOnHover
href=# 
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来播放声音，例如<AHREF="mySound.mid">（点击观察效果）。

当用户点击这个链接时，浏览器会打开一个单独的声音控制窗口。然后用户就必须手动关闭这个窗口。更糟糕的是，用户每次点击都会打开一个新窗口，即使已经好几个窗口在播放同一个文件了。