JavaScript FAQ(二十四)—— 声音

简介: 二十一、声音 1、可以播放声音的浏览器(Audio-enabled Browsers)Q:什么可以浏览器可以执行播放声音的脚本?A:如果在声音播放描述的技术可以在Miscrosoft Internet Explorer 4.0及其更新版本中工作,那么同样可以在Netscape Navigator 3.0及其更新版本中工作。

二十一、声音

 

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: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来播放声音,例如<A HREF="mySound.mid">点击观察效果)。

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

目录
相关文章
|
JavaScript 前端开发 Java
JavaScript FAQ (十九)——文件访问
十六、文件访问(File Access)   1、读取文件(Reading a File) Q:如何将文件读取到JavaScript变量中? A:根据脚本运行的环境和文件的位置,你可以有以下选项: XMLHttpRequest 对象(通过URL读取网站上可用的文件) FileSystemObject(如果你在一个被信任的环境下使用Windows Scripting Hosting或者IE) 一个读取文件或者URL的“助手”Java applet  关于前两个选项的讨论,请点击上面的超链接。
832 0
|
JavaScript 前端开发
JavaScript FAQ(二十)—— 日期和时间
十七、日期和时间   1. 时钟示例(Clock Example) Q:我如何使用JavaScript编写一个时钟程序? A:一个简单的时钟程序就是每秒获取一个新的Date()(或者,更好些,一秒几次),然后将时间信息从Date()对象中显示出来。
788 0
|
JavaScript 前端开发 Windows
JavaScript FAQ(十五)——鼠标事件(二)
 十二、鼠标事件   2. 左键 vs.右键(Left vs. Right Button) Q:我如何检查用户点击的是右键还是左键? A:click事件只在左键发生,因此onClick事件处理器不用进行左右键测试。
777 0
|
JavaScript 前端开发 Windows
JavaScript FAQ(十六)——鼠标事件(三)
 十二、鼠标事件   5. Ctrl、Alt、Shift键(Ctrl, Alt, Shift Keys) Q:我如何检测和按下Ctrl、Alt和Shift键一起的鼠标事件? A:在当今的浏览器中,脚本可以检测鼠标事件发生时,用户是否按下了Ctrl、Alt或者Shift键中任何一个。
828 0
|
JavaScript 前端开发 机器学习/深度学习
JavaScript FAQ(十七)——颜色
十三、颜色    1. 背景色(Background Color) Q:如何修改页面背景色? A:可以通过设置document.bgcolor属性来改变背景色。例如,把背景色改为灰色: document.
870 0
|
JavaScript 前端开发 Windows
JavaScript FAQ(十八)—— CSS
 十五、层叠样式表(CSS)   1.  应用样式表(Applying Stylesheets) Q:我如何在页面上应用另外一个样式表? A:浏览器通过一个或者多个LINK命令(主要是在页面的HEAD区域)加载样式表(CSS文件),例如: JavaScript通过使用集合document.styleSheets访问样式表。
945 0
|
JavaScript 前端开发 数据安全/隐私保护
JavaScript FAQ(十一)——表单(Form)
 九、表单   1. 验证表单(Validating a Form) Q:我如何在表单数据提交服务器之前进行验证?A:要验证表单的输入,可以在表单的onSubmit事件处理器中调用你的验证函数。当用户提交表单时,浏览器首先会调用onSubmit事件处理器。
1021 0
|
JavaScript 前端开发
JavaScript FAQ(十二)——层
 十、层   1. 层内放置外部文件(External Files Within Layers) Q:我可以在将外部的HTML文件作为页面的一部分显示吗? A:可以,你可以通过使用下面方法实现: LAYER或者ILAYER标记,SRC=FILENAME.HTM(在Netscape4中) IFRAME标记,SRC=FILENAME.HTM(在Explore4+ 和 Netscape 6中) 你可以使用JavaScript检测浏览器的名称和版本(见客户端信息),然后生成需要的IFRAME或者LAYER标记。
758 0
|
前端开发 JavaScript
JavaScript FAQ(十三)——图片
十一、图片  1. OnMouseOver效果(OnMouseOver Effects) Q:我如何在用户鼠标放到图片上时更改这个图片? A:这里一个简单的例子: 鼠标移到文件上,它就会打开。鼠标移走,它就会关闭。
844 0
|
JavaScript 前端开发
JavaScript FAQ(十四)——鼠标事件(一)
十二、 鼠标事件   1. 鼠标事件属性(Mouse Event Properties ) Q:哪些事件属性我可以用来分析鼠标事件?A:Netscape Navigator 4和Internet Explorer 4(以及较新版本)支持相当少的事件属性。
758 0