首页 » 编程语言 » html » 正文

HTML5标签:audio元素的使用方法及作用

html元素<audio> 标签是html5中新增的标签,主要用于在网页中插入可以播放的音频资源文件,可以实现音频文件的暂停、循环、回放、静音等多种功能。有关<audio> 标签的使用方法和作用详解如下:

<audio> 标签的定义

<audio> 标签定义页面中播放的音频文件,比如音乐或其他音频流;

<audio>标签,目前支持MP3、Wav、Ogg三种文件格式;

<audio> 标签是 HTML 5 的新标签

浏览器支持情况

<audio> 标签已被 IE9+, Firefox, Opera, Chrome 以及 Safari 支持 ;

但在Internet Explorer 8 以及更早的版本中,是不被支持的;

<audio> 标签语法

<audio src="音频地址"  >提示文本</audio>

src="音频地址",指定播放音频文件的url地址,<audio> 标签目前只支持播放MP3、Wav、Ogg三种文件格式的音频;

在<audio> 和 </audio> 之间放置“提示文本”,这样,当浏览器不支持<audio> 标签时,就会显示出“提示文本”。

<audio> 标签用法

使用<audio> 标签可以在页面中实现音频文件的暂停、循环、回放、静音等功能。

1、检测浏览器是否支持audio标签

只需将“提示文本”写在<audio> 和 </audio> 之间即可,演示代码如下: 

<audio src="music.mp3" >当前浏览器不支持audio标签</audio>

当使用的浏览器不支持<audio> 标签时,就会出现提示文字“当前浏览器不支持 audio 标签”,如果没有出现,则说明当前使用的浏览器是支持<audio> 标签的。

2、<audio> 标签属性用法

A、设置自动播放音频

<audio src="音频地址" autoplay="autoplay" >当前浏览器不支持audio标签</audio>

B、设置有播放、暂停、音量控件的音频

<audio src="音频地址"  controls="controls">当前浏览器不支持audio标签</audio>

C、设置音频循环播放

<audio src="音频地址"  loop="loop">当前浏览器不支持audio标签</audio>

D、设置音频为静音

<audio src="音频地址" muted="muted">当前浏览器不支持audio标签</audio>

E、设置音频预加载(即缓冲音频)

<audio src="音频地址" preload="auto">当前浏览器不支持audio标签</audio>

注意:如果使用了autoplay属性的话,那么,预加载preload属性将会失效。 

F、同时设置多个<audio> 标签属性

<audio src="音频地址" autoplay="autoplay"  controls="controls" loop="loop">当前浏览器不支持audio标签</audio>

以上代码表示,进入该音频网页时,会自动循环播放音频,而且还有可以控制该音频的播放/暂停按钮。

3、设置多个音频资源

我们可以在<audio>标签内嵌套多个<source> 标签, 就可以链接多个不同的音频资源文件,浏览器将根据<source>标签书写的先后顺序进行判断,选择自己支持的播放格式。

<audio  controls > 
<source src="music.ogg" type="audio/ogg"> 
<source src="music.mp3" type="audio/mpeg"> 
<source src="music.wav" type="audio/Wav"> 
当前浏览器不支持 audio 标签 
</audio>

由于不同的浏览器支持的音频播放格式有所不同,比如,火狐只支持ogg格式,而IE9只支持MP3格式,chrome好像可以全支持,为了达到最佳的兼容效果,我们就可以把<audio>标签支持的所有音频格式都设置进去,这样就可以让不同的浏览器自动判断选择自己支持的音频格式,判断顺序是按照从上到下的顺序,直到选择自己支持的播放格式为止!

<audio> 标签属性

属性描述
autoplay
autoplay如果出现该属性,则音频在就绪后马上播放。
controls
controls如果出现该属性,则向用户显示控件,比如播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)。
loop
loop

如果出现该属性,则每当音频结束时重新开始循环播放。

muted
muted如果出现该属性,则音频输出为静音。
preload
auto
metadata
none
规定当网页加载时,音频是否默认被加载以及如何被加载。

如果出现该属性,则可设置音频是否默认被加载以及用何种方式加载。

如果使用 "autoplay",则忽略该属性。

src
URL要播放的音频的 URL。可以是相对的URL也可以是绝对的URL,还可以用source标签来指定播放源。




欢迎您发表评论或留言