HTML中可以播放声音的标签有bgsound、embed、audio、object等,下面先简单介绍这几个标签
<bgsound>:
<bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多。如下
<bgsound src="your.mid" autostart=true loop=infinite>
src="your.mid"
设定声音文件的路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop=infinite
是否自动反复播放。loop=2 表示重复两次,infinite 表示重复多次。
<embed>:
<embed> 是用来插入各种多媒体,格式可以是 midi、wav、aiff、au 等等,新版的 ie支持,但Chrome对这个标签的支持不好,无法实现循环播放的功能。其参数设定较多。如下:
<embed src="your.mid" autostart="true" loop="true" hidden="true">
src="your.mid"
设定声音文件的路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop="true"
是否自动反复播放。loop=2 表示重复两次,true 是, false 否。
hidden="true"
是否完全隐藏控制画面,true 为是,no 为否 (内定)
还有starttime、volume、width、high、align、absmiddle、absbottom、controls等参数。
<audio> 元素
<audio> 元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在大部分浏览器中都有效。
注意:这个标签在低版本IE中(如:IE8)没有效果。
例子:
<audio src="alert.wav" autoplay="autoplay" loop="loop"/>
属性列表:
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL。
<object> 元素
<object> 标签也可以定义外部(非 HTML)内容的容器。可以使用此元素向 XHTML 页面添加多媒体。
下面的代码片段能够显示嵌入网页中的 MP3 文件:
实例:
<object height="100" width="100" data="song.mp3"></object>
问题:
•不同的浏览器对音频格式的支持也不同。
•如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
•如果用户的计算机未安装插件,无法播放音频。
为实现循环播放音乐,可以采取如下的解决方案(jQuery下):
if($.browser.msie) {
$('body').append('<bgsound src="alert.wav" loop="-1"/>');
} else {
$('body').append('<audio src="alert.wav" autoplay="autoplay" loop="loop"/>');
}
因为IE的安装受限于操作系统,所以很多用户使用的IE版本并不高,就使用bgsound来播放音乐;其它浏览器比如FireFox、Chrome可以很方便地升级到最新版本,可以使用audio来播放音乐。
<bgsound>:
<bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多。如下
<bgsound src="your.mid" autostart=true loop=infinite>
src="your.mid"
设定声音文件的路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop=infinite
是否自动反复播放。loop=2 表示重复两次,infinite 表示重复多次。
<embed>:
<embed> 是用来插入各种多媒体,格式可以是 midi、wav、aiff、au 等等,新版的 ie支持,但Chrome对这个标签的支持不好,无法实现循环播放的功能。其参数设定较多。如下:
<embed src="your.mid" autostart="true" loop="true" hidden="true">
src="your.mid"
设定声音文件的路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop="true"
是否自动反复播放。loop=2 表示重复两次,true 是, false 否。
hidden="true"
是否完全隐藏控制画面,true 为是,no 为否 (内定)
还有starttime、volume、width、high、align、absmiddle、absbottom、controls等参数。
<audio> 元素
<audio> 元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在大部分浏览器中都有效。
注意:这个标签在低版本IE中(如:IE8)没有效果。
例子:
<audio src="alert.wav" autoplay="autoplay" loop="loop"/>
属性列表:
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL。
<object> 元素
<object> 标签也可以定义外部(非 HTML)内容的容器。可以使用此元素向 XHTML 页面添加多媒体。
下面的代码片段能够显示嵌入网页中的 MP3 文件:
实例:
<object height="100" width="100" data="song.mp3"></object>
问题:
•不同的浏览器对音频格式的支持也不同。
•如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
•如果用户的计算机未安装插件,无法播放音频。
为实现循环播放音乐,可以采取如下的解决方案(jQuery下):
if($.browser.msie) {
$('body').append('<bgsound src="alert.wav" loop="-1"/>');
} else {
$('body').append('<audio src="alert.wav" autoplay="autoplay" loop="loop"/>');
}
因为IE的安装受限于操作系统,所以很多用户使用的IE版本并不高,就使用bgsound来播放音乐;其它浏览器比如FireFox、Chrome可以很方便地升级到最新版本,可以使用audio来播放音乐。