AudioContext：Web音频API的核心

一、基础介绍

AudioContext是Web Audio API的核心，它提供了一个音频处理和回放的接口，使我们能够创建和连接各种音频源、处理器和输出器。

在创建AudioContext对象时，需要通过构造函数进行实例化：

let audioContext = new AudioContext();

这将创建一个新的AudioContext实例，可以使用实例的方法来创建并连接其他音频模块。

二、音频源

在使用AudioContext进行音频处理之前，需要定义音频源。音频源可以是音频文件、麦克风、或由JavaScript动态生成的音频。

1. 音频文件

我们可以通过创建Audio对象并将其传递给AudioBufferSourceNode来加载和播放音频文件：

let audio = new Audio('audio.mp3');
let audioBufferSourceNode = audioContext.createBufferSource();
audioBufferSourceNode.buffer = audioContext.createBuffer(audio);
audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start();

在上述代码中，我们首先创建一个Audio对象，然后使用其创建一个AudioBufferSourceNode。我们将AudioBufferSourceNode连接到AudioContext的目标，然后调用start()方法开始播放。

2. 麦克风

使用getUserMedia方法，我们可以捕获麦克风的音频：

navigator.mediaDevices.getUserMedia({
  audio: true
}).then(function(stream) {
  let microphoneNode = audioContext.createMediaStreamSource(stream);
  microphoneNode.connect(audioContext.destination);
});

在上述代码中，我们通过getUserMedia方法获得音频流，创建MediaStreamAudioSourceNode并将其连接到AudioContext的目标。

三、音频处理器

音频处理器是一个处理音频流的节点。通过创建不同类型的音频处理器并将其连接到AudioContext，我们可以实现各种音频效果。

1. 音量控制

使用GainNode，我们可以控制音频的音量：

let gainNode = audioContext.createGain();
audioBufferSourceNode.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 0.5; // 50%音量

在上述代码中，我们创建了一个GainNode，并将其连接到AudioBufferSourceNode和AudioContext的目标。然后，我们将gain值设置为0.5，即将音量降低到50%。

2. 滤波器

滤波器是一种能够改变音频频谱的音频处理器。在Web Audio API中，有多种类型的滤波器可供使用：

BiquadFilterNode：二次滤波器，可以使用不同的类型（如低通、高通、带通等）进行设置
ConvolverNode：用于3D声音效果的混响器，将音频信号反射到虚拟空间中
DelayNode：延迟音频，可以用于制造回声效果

以下是使用BiquadFilterNode创建低通滤波器的示例代码：

let biquadFilterNode = audioContext.createBiquadFilter();
biquadFilterNode.type = 'lowpass';
biquadFilterNode.frequency.value = 1000;
audioBufferSourceNode.connect(biquadFilterNode);
biquadFilterNode.connect(audioContext.destination);

3. 调音台

通过创建多个音频处理器并按顺序连接它们，我们可以创建一个类似于音响调音台的效果：

let filter1 = audioContext.createBiquadFilter();
filter1.type = 'lowpass';
filter1.frequency.value = 1000;

let filter2 = audioContext.createBiquadFilter();
filter2.type = 'highpass';
filter2.frequency.value = 200;

let gainNode = audioContext.createGain();
gainNode.gain.value = 0.5;

audioBufferSourceNode.connect(filter1);
filter1.connect(filter2);
filter2.connect(gainNode);
gainNode.connect(audioContext.destination);

在上述代码中，我们首先创建两个BiquadFilterNode，然后将它们连接到GainNode。最后，我们将GainNode连接到AudioContext的目标。

四、输出器

在AudioContext中，输出器表示将音频数据发送到哪里。Web Audio API中有多个输出器可供使用，最常用的是DestinationNode。

DestinationNode表示AudioContext的目标，即将音频数据发送到计算机硬件的默认输出设备：

audioBufferSourceNode.connect(audioContext.destination);

总结

AudioContext是Web音频API的核心之一，它提供了一个音频处理和回放的接口，使我们能够创建和连接各种音频源、处理器和输出器。通过定义音频源、音频处理器和输出器，我们可以使用Web Audio API实现各种音频效果和声音处理。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/242117.html