HTML5 Audio(音频)

TML5 提供了播放音频文件的标准。

互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频，你需要使用以下代码：

实例

<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的浏览器不支持 audio 元素。</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

HTML5 Audio 标签

标签	描述
<audio>	定义了声音内容
<source>	规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在很多网站上都会使用到视频和音频，HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签，而嵌入音频可以使用 <audio> 标签。这两个标签都是 HTML 5 中新增的标签，两个标签中的属性和方法也很类似，但也有些不同。其中 audio 元素用于定义声音，比如音乐， video 元素用于定义视频，如电影等。

向网页中嵌入视频

<video> 标签可以用于定义视频，且提供了播放、暂停、音量控件来控制视频。举个例子，像我们侠课岛网站上，课程视频播放，就是通过 <video> 标签来实现的。下面我们来看一下如何向网页中嵌入一个视频。

示例：

首先我们准备一个视频，例如一个 test.mp4，然后使用 <video> 标签嵌入视频，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5学习(9xkd.com)</title>
    </head>
    <body>
        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
    </body>
</html>

在浏览器中的预览效果：

从上图中可以看到，我们通过 <video> 标签成功向网页中插入了一个视频，其中 src 属性用于引入要播放的视频的 URL，注意视频地址一定要正确，如果地址错误，视频是不能显示的。然后我们通过 width、height 属性设置了视频的宽度为 700px ，高度为 400px。

然后可以看到，视频上还显示了播放、调整音量等控件，当我们点击播放按钮时，视频就会开始播放。这是因为我们设置了 controls 属性，如果我们没有设置这个属性，视频将会显示一个静止的画面，并且不管怎么点击都是没有反应的。大家可以试一下，不设置 controls 属性然后在浏览器中查看演示效果，这里就不演示给大家看了。

video 元素中的常用属性如下所示：

有些比较老的浏览器可能不支持 <video> 标签，例如 IE8 及以下的浏览器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等浏览器都支持 <video> 标签。

所以我们可以在 <video> 标签中放置文本内容，这样当某个浏览器不支持此标签时，就可以显示提示内容：

<video src="./test.mp4" controls="controls" width="700px" height="400px">
    您的浏览器不支持 video 标签
</video>

这样用户就会知道，是因为浏览器不支持所以加载视频不成功，可以换一个浏览器。

视频的格式

像我们平时看到的视频格式有很多种，例如常见的有 mp4、AVI、mov、rmvb、Ogg 等等，目前 video 元素支持的视频格式有下面三种：

这三种视频格式，在不同的浏览器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 浏览器，Ogg 格式不支持IE、Safari 浏览器，WebM 格式不支持IE、Safari 浏览器等。

所以我们可能需要在不同的浏览器中使用不同的视频格式，这需要用到 <source> 标签。

source标签

<source> 标签可以为媒体元素定义媒介资源，例如 video 和 audio 元素。

例如 <video> 标签中可以包含多个 <source> 标签，<source> 标签可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

示例：

例如我们插入的视频播放器，带有两个源文件，浏览器会根据需要来选择源文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5学习(9xkd.com)</title>
    </head>
    <body>
        <video controls="controls" width="700px" height="400px">
            <source src="./test.mp4" type="video/mp4">
            <source src="./test.ogg" type="video/ogg">
            您的浏览器不支持 video 标签
        </video>
    </body>
</html>

像上述代码中，如果是 Safari 浏览器就会选择第一个源文件，如果是 Firefox 浏览器则会选择第二个源文件。

<source> 标签有三个属性：

向网页中嵌入音频

向网页中嵌入音频可以使用 <audio> 标签，此标签的使用和 <video> 标签类似。插入视频是有画面的，我们也可以调整视频的宽和高等，而插入音频是没有画面的。

audio 元素支持的格式和 video 元素也有一点区别：

示例：

例如我们插入一段音频，在浏览器中可以看到，是没有画面的，只有声音：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5学习(9xkd.com)</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="./test.mp4" type="audio/mpeg">
            <source src="./test.ogg" type="audio/ogg">
            您的浏览器不支持 audio 标签
        </audio>
    </body>
</html>

在浏览器中的演示效果：

向网页中嵌入音频时，也可以通过 <source> 标签来指定两个源文件，<source> 标签允许规定两个视频或者音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

audio 元素中的常用属性和 video 元素差不多，但是 audio 元素中没有 width、height 等属性。

常用属性如下所示：

总结

向网页中嵌入视频和音频其实很简单，要注意 video 元素和 audio 元素支持的视频、音频格式类型，如果插入的视频格式不支持，则视频或音频不会显示。

更多可以查看链接：https://www.9xkd.com/

击右上角的关注，不定期前端干货分享！！

在前端界当提到音视频的时候，大家最开始联想到的可能是<audio>和<video>音视频标签。But 大家可能忽视了在html5的api中有一个WebAudio的对象。可以实现时时对音频数据分析获取并可视化。效果如下面的视频(视频有音乐哦)：demo预览地址：https://aifly.github.io/toutiao/three.html

Web Audio

Web Audio API使用户可以在音频上下文(AudioContext)中进行音频操作。音频节点通过它们的输入输出相互连接，形成一个链或者一个简单的网。打个比方，我们平时一般听音乐，把耳机插在手机上，然后把耳塞塞在耳朵里，音频才可以传入到我们听觉系统里面。

而音频文件本身就是声音的采样数据，这些采样数据可以来自麦克风，也可以来自电子乐器，然后混合成一个单一的复杂的波形。

知识点：

1、获取音频上下文对象。

var ac = new (window.AudioContext || window.webkitAudioContext)();

2、创建媒体源。

var audioSrc = ac.createMediaElementSource(oAudio);//oAudio为<audio>对象

3、创建分析器。

var analyser = ac.createAnalyser();

4、我们要将刚获取到的媒体源对象和分析器对象相互链接

audioSrc.connect(analyser);

5、分析器和上下文的destination属性连接。

analyser.connect(ac.destination);

6、设置分析器的fftSize属性。

analyser.fftSize = 1024; //这个属性值一般是2的N次方。
frequencyBinCount 的值固定为analyser.fftSize值的一半. 该属性通常用于可视化的数据值的数量.也就是说 analyser.frequencyBinCount 的值为512

7、创建用于接收音频分析返回的数据。

this.arr = new Uint8Array(analyser.frequencyBinCount);
注意这里我们用了Uint8Array类型化的数组。我们平时写js程序的时候很少会用到这种数组。了解Webgl的童鞋应该知道这个类型化的数组用的比较多。

8、接下来就是要在一个循环周期函数里面不停的获取音频数据，然后将数据可视化。

(function render(){
requestAnimationFrame(render);
if (arr.length) {
analyser.getByteFrequencyData(arr);
....arr里面就会时进得到分析的音频的数据了。//dosomething
}
})();

数据的可视化载体我的这个案例里面是用的ThreeJs。因为threejs本身就是属于前端图形学的一个复杂的学科，这里就不再过多的赘述了，后面的文章我会单独分享有关ThreeJs的文章。这个案例的源代码已经在demo地址源代码中找得到。感兴趣的可以关注我，这个案例有什么问题的可以评论留言给我或者私信我哦。