Web Audio: 從入門到精通

Web Audio API為Web開發者提供了一個強大的音頻處理和合成環境。本文將介紹Web Audio的基本操作、音頻處理能力和高級音頻特效。

一、開始使用Web Audio API

Web Audio API可以通過以下方式獲得：

const audioContext = new AudioContext();

這將創建一個AudioContext實例，這是Web Audio API的核心對象，用於管理音頻處理。

使用Web Audio API播放音頻的方式通常涉及以下操作：

// 創建一個Audio元素，設置src和preload
const audioElement = new Audio('audio.mp3');
audioElement.preload = 'auto';

// 創建一個AudioBufferSourceNode，並綁定到AudioContext
const sourceNode = audioContext.createBufferSource();

// 將Audio元素作為XMLHttpRequest傳遞，獲取AudioBuffer
const xhr = new XMLHttpRequest();
xhr.open('GET', audioElement.src, true);
xhr.responseType = 'arraybuffer';
xhr.onload = () => {
    audioContext.decodeAudioData(xhr.response, (buffer) => {
        sourceNode.buffer = buffer;
        sourceNode.connect(audioContext.destination);
    });
};
xhr.send();

// 播放音頻
sourceNode.start();

二、音頻處理

1. 控制音量

通過創建GainNode，可以控制音頻的音量。

// 創建GainNode
const gainNode = audioContext.createGain();

// 將GainNode連接到AudioContext的目標
gainNode.connect(audioContext.destination);

// 控制音量
gainNode.gain.value = 0.5;

2. 實現濾波器

Web Audio API支持幾種不同類型的濾波器。以下是其中一種低通濾波器的實現示例。

// 創建BiquadFilterNode
const filter = audioContext.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 1000;

// 將BiquadFilterNode連接到AudioContext的目標
filter.connect(audioContext.destination);

// 將音頻源連接到濾波器
sourceNode.connect(filter);

三、高級音頻特效

1. 實現音頻可視化

通過使用HTML5 Canvas，可以將音頻數據繪製成動態的可視化。

// 創建AnalyserNode
const analyser = audioContext.createAnalyser();

// 將AnalyserNode連接到AudioContext的目標
analyser.connect(audioContext.destination);

// 將音頻源連接到AnalyserNode
sourceNode.connect(analyser);

// 獲取音頻數據
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// 將音頻數據繪製到Canvas上
const canvas = document.querySelector('canvas');
const canvasCtx = canvas.getContext('2d');
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(255, 0, 0)';
canvasCtx.beginPath();

const sliceWidth = canvas.width * 1.0 / bufferLength;
let x = 0;
for(let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = v * canvas.height / 2;

    if(i === 0) {
        canvasCtx.moveTo(x, y);
    } else {
        canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();

2. 實現3D音效

使用PannerNode，可以將音頻源放置在3D空間中，根據聽覺角度和距離計算音頻的位置。

// 創建PannerNode
const panner = audioContext.createPanner();
panner.panningModel = 'HRTF';
panner.distanceModel = 'inverse';
panner.refDistance = 1;
panner.maxDistance = 10000;
panner.rolloffFactor = 1;
panner.coneInnerAngle = 360;
panner.coneOuterAngle = 0;
panner.coneOuterGain = 0;

// 在3D空間中設置音頻位置
panner.setPosition(x, y, z);

// 將PannerNode連接到AudioContext的目標
panner.connect(audioContext.destination);

// 將音頻源連接到PannerNode
sourceNode.connect(panner);

四、總結

通過Web Audio API，我們可以控制音量、使用濾波器進行音頻處理、實現音頻可視化和3D音效等高級特效。以上只是Web Audio API提供的一些功能，開發者可以根據實際需求進行靈活應用。