Web Audio API实现简单变声效果

前言

想在网页中实现实时音频变声效果该如何实现呢，之前遇到这种处理音视频的需求，可能会想到需要借助C代码实现。但是现在随着浏览器性能的提升、web API的丰富，通过浏览器原生的API也可以操作音频数据实现很多复杂的效果，为web音频开发提供了更多的选择。下面介绍几种采用原生Web Audio API实现变声效果的过程中尝试的几种方案，感兴趣的同学一起来了解下吧。

说明：本文讨论范围为变声场景中的变速变调方案，有其它两种场景：变速不变调、变调不变速需求的同学请移步参考链接或其它方案

Web Audio API介绍

开始之前先简单了解下Web Audio API，Web Audio API提供了一组在web上操作音频的API，可以使开发者自选音频数据来源，为音频添加效果，使声音可视化，为声音添加空间效果等功能。音频的输入流可以理解为一组buffer，来源可以是读取音频文件产生到内存中的AudioBufferSourceNode，也可以是来自HTML中audio标签的MediaElementAudioSourceNode，也可以是来自音频流（例如麦克风）的MediaStreamAudioSourceNode。例如，采集自己设备上的麦克风声音连接到扬声器：

// 创建音频上下文
const audioContext = new AudioContext();
// 获取设备麦克风流
stream = await navigator.mediaDevices
  .getUserMedia({ audio: true})
  .catch(function (error) {
    console.log(error);
  });
// 创建来自麦克风的流的声音源
const sourceNode = audioContext.createMediaStreamSource(stream);
// 将声音连接的扬声器
sourceNode.connect(audioContext.destination);

就可以对着麦克风说话听到自己的声音了。对上述来源数据流的处理被设计成一个个的节点（Node），具有模块化路由的特点，需要添加什么样的效果添加什么样的node，例如一个最常见的操作是通过把输入的采样数据放大来达到扩音器的作用（GainNode），示例代码：

// 创建音频上下文
const audioContext = new AudioContext();
// 创建一个增益Node
const gainNode = audioCtx.createGain();
// 获取设备麦克风流
stream = await navigator.mediaDevices
  .getUserMedia({ audio: true})
  .catch(function (error) {
    console.log(error);
  });
// 创建来自麦克风的流的声音源
const sourceNode = audioContext.createMediaStreamSource(stream);
// 将声音经过gainNode处理
sourceNo