Web Audio 入门之读取左右声道数据

---

说到音频，大家应该立刻会想到Audio，和Audio标签完全不同，Web Audio的功能更为强大。Audio 和 Web Audio的关系，就像img和canvas的关系一样。

Web Audio 和 Audio的关系

利用Web Audio，能做到的不是单纯的播放声音，可以制造声音，获取声音数据，修改声音数据。因此在应用上，可以用来在游戏中做声音模拟、声音的可视化、声音剪辑等等。

Web Audio的运行流程是这样的：最初的声音数据从源节点（sourceNode）出发，经过一个个声音处理器（audioNode），到达目标节点（destinationNode）

Web Audio运行流程

从上面的流程中，可以提取出最重要的三点：两个名词和一个动作。它们分别是：

• AudioContext、AudioNode
• connect

1 基础概念

1.1 AudioContext：音频上下文

绘图上下文，是从一个canvas元素中获取的。个人看法，音频播放是一个全局性的行为，所以是从window中获取的。

AudioContext  = new window.AudioContext()

1.2 AudioNode：音频处理器

AudioNode由AudioContext生成，种类繁多，但可以被简单明确的分为三类：

1. sourceNode，声音的源头处理器，它可以读取声音数据流；

sourceNode = audioContext.createBufferSource();

1. destinationNode，声音的的终点处理器，它可以传递声音数据流到播放设备上；

destinationNode = audioContext.destination;

1. 其它audioNode，语法一般如下

xxxNode = audioContext.createXxx

1.3 connect：连接音频处理器的方法

例如：

sourceNode.connect(xxxNode1)
xxxNode2.connect(xxxNode3)
xxxNode3.connect(destinationNode)

connect连接

2 实例

下面将以读取左右声道数据为例，介绍一下如何组合AudioNode来实现功能。

2.1 sourceNode读取声音数据

首先我们发出一个ajax请求，获取声音数据，这个过程有两点需要注意：

1. responseType必须为arraybuffer
2. 利用audioContext.decodeAudioData将返回数据解码为sourceNode可以接收的buffer

/**
 * 从一个url读取声音，并解码
 * @param url 声音文件url
 * @return buffer
 */
function getAudioBuffer(url) {
    var request = new XMLHttpRequest();
    return new Promise((resolve, reject) => {
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';
        request.onload = () => {
            audioContext.decodeAudioData(request.response, buffer => buffer ? resolve(buffer) : reject('decoding error'));
        };
        request.onerror = error => reject(error);
        request.send();
    });
}

然后，将声音数据的buffer给予sourceNode的操作，这一步非常简单

sourceNode.buffer = buffer;

2.2 声道分离

上一步我们拿到了声音数据，并传递给了sourceNode，接下来我们将sourceNode连接到一个可以分离声道的AudioNode上。

介绍声道分离前，先大致理解下音频处理器的抽象结构：

音频处理器抽象结构

sourceNode只有一个输出接口，destinationNode只由一个输入接口，其它的音频处理器的输入接口、输出接口数量不定，但至少会有一个。

sourceNode、destinationNode和其它audioNode

用于声道分离的这个audioNode比较特殊，它的有一个输入接口，但是有不定数量的输出接口。

声道分离处理器

我们只需要取前两个声道，所以传入参数2，并将源处理器连接上它，将音频数据分离出左声道和右声道。

// 创建声道分离处理器
var splitterNode = audioContext.createChannelSplitter(2);
// 源处理器连接声道分离处理器
sourceNode.connect(splitterNode)

声道分离

2.3 读取声音数据

上一步我们分别拿到了左声道和右声道的数据，现在，我们将对两个声道进行单独处理，分别连接到具有数据分析功能的处理器上，学名叫做：频谱分析器。频谱分析器不会对声音数据进行任何修改。

但是，我们之前说的是将一个audioNode连接到另一个audioNode上。要怎么样获取audioNode的指定输出，去连接另一个audioNode呢？

答案是connect方法提供两个参数：

fromNode.connent(toNode, fromNodeInputIndex, toNodeInputIndex)

例如：fromNode.connent(toNode, 0, 1)，将fromNode的第1个输出声道连接到toNode的第2个输入声道。

var leftAnalyserNode = audioContext.createAnalyser()
var rightAnalyserNode = audioContext.createAnalyser()
splitterNode.connect(leftAnalyserNode, 0)
splitterNode.connect(rightAnalyserNode, 1)

读取左右声道声音数据

2.4 从频谱分析器获取数据

我们已经“安装”好了频谱分析器，那么如何从它身上读取出数据来呢？这里面会涉及到一点有些复杂的概念了。简单起见，我只会告诉你，从频谱分析器能够获取声音的时域数据和频域数据。至于获取到这里数据以后，如何转换、对应成响度等数据，就不属于Web Audio的讨论范围了。

如下方法可以获取当前时刻声音的时域数据。

var leftFreqByteData = new Uint8Array(leftAnalyserNode.frequencyBinCount);
leftAnalyserNode.getByteTimeDomainData(leftFreqByteData)

2.5 合并声道

好了，我们已经拿到想要的数据了，下一站应该是destinationNode，不通过destinationNode进行声音播放，数据就无法流动起来，也就无法经过各个处理器，触发它们的处理功能。
声道合并处理器和声道分离处理器是一对好基友。声道处理器具有不定个输入，和一个输出，给它传入一个同样的参数2，将分离开来的声道再合并。

var mergerNode = audioContext.createChannelMerger(2);
leftAnalyserNode.connect(mergerNode, 0, 0)
rightAnalyserNode.connect(mergerNode, 0, 1)

合并声道

2.6 连接destinationNode

好了，现在我们把这条链路的最后一站装上

mergerNode.connect(destinationNode)

连接destinationNode

最后，别忘了通过souceNode.start(0)触发播放～

---