共计 2423 个字符，预计需要花费 7 分钟才能阅读完成。
【重构前端常识体系之 HTML】HTML5 给网页音频带来的变动
引言
音乐播放，置信大家都很相熟，然而早在之前的音乐播放之前，你的浏览器会问你，是否下载 flash 插件。然而当初，预计一些年老的开发者都不必理解 flash 是啥了。因为 HTML5 来了，它扭转了这所有。
HTML5 音频的播放形式
是的，HTML5 带来了不止一种可能播放音频的形式。
应用插件
浏览器插件是一种扩大浏览器规范性能的小型计算机程序。
插件能够应用 object 标签 或者 embed 标签增加在页面上。
embed 形式
embed 定义一个内部的容器，用来装放 MP3 等音频文件。
例如
<embed height="50" width="100" src="demo.mp3">成果
缺点
- embed 标签在 HTML 4 中是有效的，因为它是 HTML5 新出的标签
- 依赖浏览器的反对
- 依赖插件的装置
obejct 形式
obejct 也能够定义一个内部的容器，用来装放 MP3 等音频文件。
例如
<object height="50" width="100" src="demo.mp3"></object>成果
缺点
- 依赖浏览器的反对
- 依赖插件的装置
audio 形式
audio 标签是 HTML5 专门为音频出的一个标签。举荐应用！
<audio src="horse.mp3" controls></audio>成果
缺点
- embed 标签在 HTML 4 中是有效的，因为它是 HTML5 新出的标签
- 依赖浏览器的反对
最好的解决方案
下面讲了三种应用音频的形式，能够将一些联合起来应用。
示例
<audio controls height="100" width="100">
<source src="demo.mp3" type="audio/mpeg">
<source src="demo.ogg" type="audio/ogg">
<embed height="50" width="100" src="demo.mp3">
</audio>解说
看到以上用到了三个标签，这样做的益处是 audio 会尝试用 mp3 或 ogg 来播放音频，如果播放失败了，会回退到 embed。
成果
显示的成果根本与 audio 统一！
audio 标签
audio 的属性
一些罕用的 audio 属性，全局属性在这里就没有列出来来了。更多请到 w3school 查阅。
| 属性 | 形容 |
|---|---|
| autoplay | 设置或返回是否在加载实现后随即播放音频 / 视频 |
| controls | 设置或返回音频 / 视频是否显示控件（比方播放 / 暂停等） |
| loop | 设置或返回音频 / 视频是否应在完结时从新播放 |
| muted | 设置或返回音频 / 视频是否静音 |
| preload | 设置或返回音频 / 视频是否应该在页面加载后进行加载 |
| src | 设置或返回音频 / 视频元素的以后起源 |
audio 的事件
事件这是咱们用来跟音频产生交互的重要武器。
同样的只给出局部事件，更多请到 w3school 查阅。
| 事件 | 形容 |
|---|---|
| pause | 当音频 / 视频已暂停时 |
| play | 当音频 / 视频已开始或不再暂停时 |
| playing | 当音频 / 视频在已因缓冲而暂停或进行后已就绪时 |
| canplay | 当浏览器能够播放音频 / 视频时 |
| timeupdate | 当目前的播放地位已更改时 |
来一个音频播放器的案例
讲了那么多，不就是等一个案例吗，来！
码上！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
<title>audio 音频 demo</title>
<style>
* {
margin: 0;
padding: 0;
}
body {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "微软雅黑"
}
h1 {
width: 100%;
font-size: 1.5em;
text-align: center;
line-height: 3em;
color: #33942a;
}
#audio {width: 100%;}
.control-body {
display: flex;
align-items: center;
justify-content: center;
}
#control {
width: 150px;
height: 150px;
border-radius: 200px;
border: none;
box-shadow: #888 0 0 8px;
}
</style>
</head>
<body>
<script>
function play() {let audio = document.getElementById("audio");
if (audio.paused) {audio.pasue();
} else {audio.play();
}
}
</script>
<h1>audio 音频播放 demo</h1>
<div class="control-body">
<button class="control" id="control" onclick="play()"> 开始 </button>
</div>
<audio id="audio" src="http://96.ierge.cn/15/235/471737.mp3"></audio>
</body>
</html>总结
音频确实在当初的网页中用的非常平时了，应用的的形式也产生了很大的扭转。后续写一个对于音频的 demo 案例！
重构前端常识体系，你要一起吗？
博客阐明与致谢
文章所波及的局部材料来自互联网整顿，其中蕴含本人集体的总结和认识，分享的目标在于共建社区和坚固本人。
援用的材料如有侵权，请分割自己删除！
感激万能的网络，W3C，菜鸟教程等！
感激勤奋的本人，集体博客，GitHub 学习，GitHub
公众号【归子莫】，小程序【子莫说】
如果你感觉对你有帮忙的话，无妨给我点赞激励一下，好文记得珍藏哟！关注我一起成长！
所属专栏：重构前端常识体系（HTML）
幸好我在，感激你来！