HTML音频操作
时间： 2022-05-26 17:11:16
来源：网络
作者：自由
分类：前端问题
简介：
在HTML5出现之前我们要想在浏览器中播放音频，没有一个官方浏览器遵循的播放标准（也就是没有提供一个可以专门来处理音频的HTML标签），我们依然需要使用适用于各种浏览器的音频播放插件才可以（比如：Flash，JavaApplet、ActiveX等）。
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标签播放音频
<audio src="song.ogg" ></audio>二、使用带控制按钮的Audio标签播放音频
<audio src="song.ogg" controls="controls"></audio>Audio标签的 control 属性给播放器窗口添加了 播放、暂停和音量控制的按钮，可以由用户手动进行控制。
三、使用Audio标签的浏览器兼容提示功能
<audio src="song.ogg" controls="controls">
您的浏览器不支持 audio 标签，请更换最新版浏览器
</audio>和Video 标签的功能一样，<audio> 与 </audio> 之间插入的内容会在不支持 audio 元素的浏览器中直接显示出来。
四、使用 Audio标签 和 source标签 来提高浏览器播放音频的兼容性
<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 标签的属性
标签：HTML 5基础入门
文章声明
版权声明:本文为作者原创，仅用于本站访客学习、研究和交流目的，未经授权禁止转载
本文标题:
HTML音频操作
了解
作者
一个90后草根站长！13年入行。一直潜心研究技术，一边工作一边积累经验，分享一些个人后端技术（java、python、c#、php等），以及前端相关等心得。
站长
推荐
友情
链接