使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频（未完待续）

使用,mediastream,recording,api,web,audio,浏览器,处理,音频,未完待续 · 浏览次数 : 24

小编点评

**核心概念** **2.1 MediaStream** * 是一种媒体内容的流，包含多个轨道。 * 可以想象成多个视频轨道和音频轨道。 **2.2 MediaRecorder** * 是 MediaStream Recording API 的核心接口，用于进行媒体录制。 * 可以从用户麦克风、音频流或其他媒体来源获取 MediaStream。 **2.4 AudioContext** * 用于创建 AudioContext，处理 Web Audio API。 * 图像化音乐通过图中节点的连接来实现。 **如何录音** 1. 使用 `navigator.mediaDevices.getUserMedia()` 获取麦克风 MediaStream。 2. 创建 `MediaRecorder` 对象，指定 MediaStream 和选项。 3. 启动 MediaRecorder，监听 `ondataavailable` 事件，并在事件中处理采集到的数据。 4. 设置 `MediaRecorder` 的 `start()` 方法，开始录音。 **如何回放录音** 1. 使用 `MediaRecorder` 获取 MediaStream。 2. 创建新的 `MediaRecorder` 对象，指定 MediaStream 和选项。 3. 设置 `MediaRecorder` 的 `ondataavailable` 事件，并在事件中绘制绘制画面的数据。 **实现音频可视化效果** * 可以使用 canvas 和 ctx 绘制波形图或柱状图等可视化效果。 * 可以使用 Chart.js 或 D3.js 等图表库进行绘制。

正文

使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频

1. 背景

最近项目上有个需求，需要实现：录音、回放录音、实现音频可视化效果、上传wav格式的录音等功能。于是乎，我就顺便调研了下如何在浏览器中处理音频，发现 HTML5 中有专门的API用来处理音频。

2. 核心概念

2.1 MediaStream

一个MediaStream是一个媒体内容的流。一个流中可能包含几个轨道：比如若干视频轨道和若干音频轨道。可以把它想象成这样：

或者，更形象点：

2.2 MediaRecorder

MediaRecorder是MediaStream Recording API的核心接口，用来进行媒体录制。我们可以形象地把它想象成录音机：

new MediaRecorder(stream, options) ==>

这里的 stream 就是一个 MediaStream。它表示将要录制的流。它可以是：用户麦克风产生的数据流，或者来自<audio>, <video>, <canvas>的数据流等。

2.4 AudioContext

使用Web Audio API相关接口前，你必需创建一个AudioContext。一切操作都在这个环境里进行。一个AudioContext是一张图（Graph），里面有若干节点（Node），被有向线段连接，就像这样：

为了方便理解，我们可以把它想象成演唱会上的调音师：

它会把歌手和现场乐队的声音经过混合和加工，最终输出到扬声器里。

3. 如何录音

首先，我们可以使用getUserMedia向浏览器申请权限：

navigator.mediaDevices.getUserMedia({ audio: true }).then((stream: MediaStream) => {
  /*...*/
})

然后就可以从麦克风拿到MediaStream。

    const mediaRecorder = new MediaRecorder(stream,  options);
    mediaRecorder.start();

    mediaRecorder.ondataavailable = ...