html5 im如何获取语音,前端教程：如何实现前端录音功能

原标题：前端教程：如何实现前端录音功能

前端实现录音有两种方式，一种是使用MediaRecorder，另一种是使用WebRTC的getUserMedia结合AudioContext，MediaRecorder出现得比较早，只不过Safari/Edge等浏览器一直没有实现，所以兼容性不是很好，而WebRTC已经得到了所有主流浏览器的支持，如Safari 11起就支持了。所以我们用WebRTC的方式进行录制。

利用AudioContext播放声音的使用，我已经在《Chrome 66禁止声音自动播放之后》做过介绍，本篇我们会继续用到AudioContext的API.

为实现录音功能，我们先从播放本地文件音乐说起，因为有些API是通用的。

1. 播放本地音频文件实现

播放音频可以使用audio标签，也可以使用AudioContext，audio标签需要一个url，它可以是一个远程的http协议的url，也可以是一个本地的blob协议的url，怎么创建一个本地的url呢？

使用以下html做为说明：

提供一个file input上传控件让用户选择本地的文件和一个audio标签准备来播放。当用户选择文件后会触发onchange事件，在onchange回调里面就可以拿到文件的内容，如下代码所示：

这里使用一个FileReader读取文件，读取为ArrayBuffer即原始的二进制内容，把它打印如下所示：

可以用这个ArrayBuffer实例化一个Uint8Array就能读取它里面的内容，Uint8Array数组里面的每个元素都是一个无符号整型8位数字，即0 ~ 255，相当于每1个字节的0101内容就读取为一个整数。更多讨论可以见这篇《前端本地文件操作与上传》。

这个arrayBuffer可以转成一个blob，然后用这个blob生成一个url，如下代码所示：

主要利用URL.createObjectURL这个API生成一个blob的url，这个url打印出来是这样的：

blob:null/c2df9f4d-a19d-4016-9fb6-b4899bac630d

然后丢给audio标签就能播放了，作用相当于一个远程的http的url.

在使用ArrayBuffer生成blob对象的时候可以指定文件类型或者叫mime类型，如下代码所示：