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實現各種音頻效果和聲音處理。