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: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">(点击观察效果)。

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

时间: 2024-10-25 22:33:50

JavaScript FAQ(二十四)—— 声音的相关文章

JavaScript FAQ(十四)——鼠标事件(一)

十二. 鼠标事件   1. 鼠标事件属性(Mouse Event Properties) Q:哪些事件属性我可以用来分析鼠标事件?A:Netscape Navigator 4和Internet Explorer 4(以及较新版本)支持相当少的事件属性.其中一些在两个浏览器上是一样的(例如,event.screenX或者event.typ):不过,多数还是平台相关.移动或点击鼠标,下面的文本框会显示你当前浏览器()的所有事件属性:(译者注:由于原文实例不能正确运行,这里只贴出相关的JavaScri

Windows 8风格应用开发入门 二十四 App Bar构建

构建应用栏的目的的显示导航.命令和始终隐藏不需要的使用的工具.我们可以把应用栏放在页面 顶部或底部或同时存在顶部和底部. 默认情况在AppBar是隐藏的,当用户单击右键.按下Win+Z .或从屏幕的顶部或底部边缘轻松时可显示或关闭AppBar.当然我们也可以通过编程的方式将AppBar设 置为当用户做选择或与应用交互时显示. 构建AppBar基本步骤 通常我们构建一个应用的 AppBar,只需要三步就可以完成: 开发入门 二十四 App Bar构建-jenkins构建自由风格"> 如何构建

C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(二十四)

C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(二十四) Be careful!前方怪物出没 游戏的精灵框架到此为止算告一段落,让我们一同来体验它带来的神奇效应. 一个安静的黄昏,主角悠闲的甩着它帅气的毛发独跑于林阴大道.怎知天色已晚即将进入月亮的领地,嘿嘿,我们的故事就从这里开始:Be careful,前方怪物出没! 实在不忍心让主角空有一身武艺而无处施展,本节为了不再让它孤单,我将向游戏中加入可爱的妖精妹妹与之为伴: 好象在哪见过呢?对,就是她了,可爱吧

Bootstrap&lt;基础二十四&gt; 缩略图

原文:Bootstrap<基础二十四> 缩略图 Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 class .thumbnail 的 <a> 标签. 这会添加四个像素的内边距(padding)和一个灰色的边框. 当鼠标悬停在图像上时,会动画显示出图像的轮廓. 下面的实例演示了默认的缩略图: <!DOCTYPE html>

今天不算二十四

问题描述 usingSystem;usingSystem.Collections;usingSystem.Diagnostics;namespaceSixtyFour{///<summary>///Expressionwithfractionsupport///</summary>classExpression{intnumerator,denominator,precedence;stringoper;Expressionopnd1,opnd2;publicExpression(

云计算设计模式(二十四)——仆人键模式

云计算设计模式(二十四)--仆人键模式 使用一个令牌或密钥,向客户提供受限制的直接访问特定的资源或服务,以便由应用程序代码卸载数据传输操作.这个模式是在使用云托管的存储系统或队列的应用中特别有用,并且可以最大限度地降低成本,最大限度地提高可扩展性和性能. 背景和问题 客户端程序和网络浏览器经常需要读取和写入文件或数据流,并从一个应用程序的存储空间.通常,应用程序将处理的运动数据,或者通过从存储读取它,并将其传输到客户端,或通过从客户机读取该载流并将其存储在数据存储中.然而,这种方法吸收了宝贵的资

引自天天安全网 ——※ 中华民族传统文化精髓___二十四孝 ※

一下是来自天天安全网的内容,强烈推荐! PS:做人不孝无异于禽兽,请宏扬我中华美德! "孝"是儒家伦理思想的核心,是千百年来中国社会维系家庭关系的道德准则,是中华民族的传统美德,是我中华民族传统文化之精髓.元代郭居敬辑录古代24个孝子的故事,编成<二十四孝>.后来的印本都配上图画,通称<二十四孝图>,成为宣扬孝道的通俗读物. 01 孝感动天舜,传说中的远古帝王,五帝之一,姓姚,名重华,号有虞氏,史称虞舜.相传他的父亲瞽叟及继母.异母弟象,多次想害死他:让舜修补谷

微信小程序把玩(二十四)toast组件

原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--t

二十四团建滴灌泵站灌水按动电钮

11月下旬,已进入冬闲,但在农二师二十四团的农田里却常能见到人欢机鸣的热闹场面.据该团基建部门负责人介绍,团场今冬将完成近6000亩农田固定加压滴灌泵站及管道的铺设工作,为来年优化作物灌溉环境,提高作物单产奠定扎实的基础.近年,该团不断加大推广节水灌溉的力度,团场先后实施砼板防渗.常压滴灌.移动首部加压滴灌,使作物生长环境不断得到改善,作物单产连年上台阶,如西红柿单产2004年仅4.8吨,今年上万亩西红柿单产突破了7吨.新技术.新措施的应用给职工们带来了看得见.摸得着的实惠,极大地激发他们推广新

JAVA之旅(二十四)——I/O流,字符流,FileWriter,IOException,文件续写,FileReader,小练习

JAVA之旅(二十四)--I/O流,字符流,FileWriter,IOException,文件续写,FileReader,小练习 JAVA之旅林林总总也是写了二十多篇了,我们今天终于是接触到了I/O了.如果你初学,不懂IO流,你可以从前往后慢慢看,但是你工作了一段时间你会发现,流的使用场景以及技术点是非常的强硬的,我们势必要掌握这个知识点,如果你觉得翻阅API比较鼓噪,看视频得不到精髓,看书看不到要点,你就跟随我的JAVA之旅,一起去探索吧! 一.I/O概述 I/O全名:Input Output