HTML音频操作

2022-08-17 14:27:53 浏览数 (1)

HTML5 在浏览器中播放音频

    如视频播放一样,在HTML5出现之前我们要想在浏览器中播放音频,没有一个官方浏览器遵循的播放标准(也就是没有提供一个可以专门来处理音频的HTML标签),我们依然需要使用适用于各种浏览器的音频播放插件才可以(比如:Flash,JavaApplet、ActiveX等)。

    HTML5 正式发布后,他给我们提供了处理音频的标准方法:audio 标签,我们可以通过 audio 标签处理音频文件;audio 标签能够播放声音文件或者音频流,遗憾的是当今的主流浏览器任然没有完全兼容他,只有最新的版本才开始兼容,相信未来的浏览器会逐渐兼容所有的HTML5新特性!

HTML5 Audio 音频格式及浏览器兼容性

    如视频播放标签一样,HTML5 中的 Audio 标签也是提供了对几种音频格式的支持,截至到现在 <audio>元素支持三种音频格式文件: MP3、Wav、Ogg。

    Internet Explorer 9 、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签(Internet Explorer 8 及更早IE版本不支持 <audio> 标签),具体如下表所示:

音频格式

IE 9

Firefox 3.5

Opera 10.5

Chrome 3.0

Safari 3.0

MIME-type

Ogg

audio/ogg

MP3

audio/mpeg

Wav

audio/wav

HTML5 Audio 音频播放实例

    我们之前一直在反复强调,在学习任何新东西的时候,直接从实例入手,先亲自动手操作他的整个运作过程,这样对于我们对新事物的认识和理解是非常深刻的,对于HTML5 播放音频,我们来看如何进行代码实现,如下:

一、使用简单格式的Audio标签播放音频
代码语言:javascript复制
<audio src="song.ogg" ></audio>
二、使用带控制按钮的Audio标签播放音频
代码语言:javascript复制
<audio src="song.ogg" controls="controls"></audio>

Audio标签的 control 属性给播放器窗口添加了 播放、暂停和音量控制的按钮,可以由用户手动进行控制。

三、使用Audio标签的浏览器兼容提示功能
代码语言:javascript复制
<audio src="song.ogg" controls="controls">
您的浏览器不支持 audio 标签,请更换最新版浏览器
</audio>

和Video 标签的功能一样,<audio> 与 </audio> 之间插入的内容会在不支持 audio 元素的浏览器中直接显示出来。

四、使用 Audio标签 和 source标签 来提高浏览器播放音频的兼容性

代码语言:javascript复制
<audio controls="controls">
  <source src="/upload/audio/audio_example.ogg" type="audio/ogg">
  <source src="/upload/audio/audio_example.mp3" type="audio/mpeg">
  您的浏览器不支持HTML5 Audio 标签,无法播放此音频
</audio>

在上面的其他例子中我们只是使用一个 Ogg 音频文件格式,这种格式目前只兼容 Firefox、Opera 以及 Chrome 浏览器。要想兼容 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。audio 标签 允许包含多个 source 标签。source 标签可以链接不同的音频文件格式。浏览器将使用第一个可识别的音频文件格式。

HTML5 Audio 标签的属性

属性名

属性值

描述

autoplay

autoplay

如果使用该属性,则音频文件在加载就绪后马上播放

controls

controls

如果使用该属性,则向用户显示一些控制控件,比如:播放按钮、暂停按钮等

loop

loop

如果使用该属性,则每当音频文件播放结束时,会重新开始重复播放

preload

preload

如果使用该属性,则音频文件在页面加载时进行加载,并预先准备播放,如果使用 "autoplay",则忽略该属性的功能

src

url

要播放的音频文件的 URL,比如:http://www.w3capi.com/upload/audio/audio_example.mp3

0 人点赞