Web Audio API 太強(qiáng)了，讓我們一起領(lǐng)略音頻之美

作者：阿寶哥 2022-11-14 08:26:40

Web Audio API 提供了一個(gè)非常高效和通用的系統(tǒng)來(lái)控制 Web 上的音頻，允許開(kāi)發(fā)人員為音頻添加特殊效果、可視化音頻、添加空間效果等等。Web Audio API 讓用戶能夠在音頻上下文（AudioContext）中進(jìn)行音頻操作，具有模塊化路由的特點(diǎn)。基本的音頻操作是在音頻節(jié)點(diǎn)上執(zhí)行的，這些節(jié)點(diǎn)連接在一起形成一個(gè)音頻路由圖。

?在瀏覽器中，我們通常使用 audio 標(biāo)簽來(lái)播放音頻：

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
</audio>

雖然 audio? 標(biāo)簽使用起來(lái)很簡(jiǎn)單，但也存在一些局限。比如它只控制音頻的播放、暫停、音量等。如果我們想進(jìn)一步控制音頻，比如通道合并和拆分、混響、音高和音頻幅度壓縮等。那么僅僅使用 audio 標(biāo)簽是做不到的。為了解決這個(gè)問(wèn)題，我們需要使用 Web Audio API。

接下來(lái)，我將演示如何利用 AudioContext 對(duì)象來(lái)播放音頻：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Context</title>
</head>
<body>
    <input id="audioFile" type="file" accept="audio/*"/>
    <script>
    const inputFile = document.querySelector("#audioFile");
    inputFile.onchange = function(event) {
      const file = event.target.files[0]; 
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = evt {
          const encodedBuffer = evt.currentTarget.result;
          const context = new AudioContext();
          context.decodeAudioData(encodedBuffer, decodedBuffer => {
              const dataSource = context.createBufferSource();
              dataSource.buffer = decodedBuffer;
              dataSource.connect(context.destination);
              dataSource.start();
          })
      }
    }    
    </script>
</body>
</html>

在以上代碼中，我們使用 FileReader? API 來(lái)讀取音頻文件的數(shù)據(jù)。然后創(chuàng)建一個(gè) AudioContext? 對(duì)象并使用該對(duì)象上的 decodeAudioData? 方法解碼音頻。獲取到解碼后的數(shù)據(jù)后，我們會(huì)繼續(xù)創(chuàng)建一個(gè) AudioBufferSourceNode? 對(duì)象來(lái)存儲(chǔ)解碼后的音頻數(shù)據(jù)，然后將 AudioBufferSourceNode? 對(duì)象與 context.destination? 對(duì)象連接起來(lái)，最后調(diào)用 start 方法播放音頻。

看到這里，是不是覺(jué)得使用 AudioContext? 播放音頻文件很麻煩？實(shí)際上它非常強(qiáng)大。下面我將介紹如何使用 AudioContext、AnalyserNode、Canvas 來(lái)實(shí)現(xiàn)音頻可視化的功能。

可視化音頻文件主要分為以下 3 個(gè)步驟：

獲取音頻文件數(shù)據(jù)；
獲取音頻文件頻率數(shù)據(jù)；
使用 Canvas API 實(shí)現(xiàn)數(shù)據(jù)可視化。

1、獲取音頻文件數(shù)據(jù)

在以下的代碼中，我們使用 FileReader? API 來(lái)讀取音頻文件的數(shù)據(jù)。然后創(chuàng)建一個(gè) AudioContext? 對(duì)象并使用該對(duì)象上的 decodeAudioData 方法解碼音頻。當(dāng)然，你也可以從網(wǎng)絡(luò)上下載音頻文件。

inputFile.onchange = function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = evt=>{
    const encodedBuffer = evt.currentTarget.result;
    const context = new AudioContext();
    context.decodeAudioData(encodedBuffer, decodedBuffer=>{
      const dataSource = context.createBufferSource();
      dataSource.buffer = decodedBuffer;
      analyser = createAnalyser(context, dataSource);
      bufferLength = analyser.frequencyBinCount;
      frequencyData = new Uint8Array(bufferLength);
      dataSource.start();
      drawBar();
    }
 )
}

2、獲取音頻文件頻率數(shù)據(jù)

要獲取頻率數(shù)據(jù)，我們需要利用 AnalyserNode 接口，該接口提供實(shí)時(shí)頻率和時(shí)域分析信息。

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 512;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);

AnalyserNode 對(duì)象上的 getByteFrequencyData()? 方法會(huì)將當(dāng)前頻率數(shù)據(jù)復(fù)制到傳入的 Uint8Array 對(duì)象。

3、使用 Canvas API 實(shí)現(xiàn)數(shù)據(jù)可視化

獲取頻率數(shù)據(jù)后，我們就可以使用 Canvas API 實(shí)現(xiàn)數(shù)據(jù)可視化，比如使用 CanvasRenderingContext2D 接口中的 fillRect 方法，對(duì)數(shù)據(jù)進(jìn)行可視化。

function drawBar() {
  requestAnimationFrame(drawBar);
  analyser.getByteFrequencyData(frequencyData);
  canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
  let barHeight, barWidth, r, g, b;
  for (let i = 0, x = 0; i < bufferLength; i++) {
    barHeight = frequencyData[i];
    barWidth = canvasWidth / bufferLength * 2;
    r = barHeight + 25 * (i / bufferLength);
    g = 250 * (i / bufferLength);
    b = 50;
    canvasContext.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    canvasContext.fillRect(x, canvasHeight - barHeight, barWidth, barHeight);
    x += barWidth + 2;
  }
}

分析完上面的處理流程，我們來(lái)看一下完整的代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Visualizations with Web Audio API</title>
    </head>
    <body>
        <input id="audioFile" type="file" accept="audio/*"/>
        <canvas id="canvas"></canvas>
        <script>
            const canvas = document.querySelector("#canvas");
            const inputFile = document.querySelector("#audioFile");

            const canvasWidth = window.innerWidth;
            const canvasHeight = window.innerHeight;
            const canvasContext = canvas.getContext("2d");
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            let frequencyData = [], bufferLength = 0, analyser;

            inputFile.onchange = function(event) {
                const file = event.target.files[0];

                const reader = new FileReader();
                reader.readAsArrayBuffer(file);
                reader.onload = evt=>{
                    const encodedBuffer = evt.currentTarget.result;
                    const context = new AudioContext();
                    context.decodeAudioData(encodedBuffer, decodedBuffer=>{
                        const dataSource = context.createBufferSource();
                        dataSource.buffer = decodedBuffer;
                        analyser = createAnalyser(context, dataSource);
                        bufferLength = analyser.frequencyBinCount;
                        frequencyData = new Uint8Array(bufferLength);
                        dataSource.start();
                        drawBar();
                    }
                    )
                }

                function createAnalyser(context, dataSource) {
                    const analyser = context.createAnalyser();
                    analyser.fftSize = 512;
                    dataSource.connect(analyser);
                    analyser.connect(context.destination);
                    return analyser;
                }

                function drawBar() {
                    requestAnimationFrame(drawBar);
                    analyser.getByteFrequencyData(frequencyData);
                    canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
                    let barHeight, barWidth, r, g, b;
                    for (let i = 0, x = 0; i < bufferLength; i++) {
                        barHeight = frequencyData[i];
                        barWidth = canvasWidth / bufferLength * 2;
                        r = barHeight + 25 * (i / bufferLength);
                        g = 250 * (i / bufferLength);
                        b = 50;
                        canvasContext.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
                        canvasContext.fillRect(x, canvasHeight - barHeight, barWidth, barHeight);
                        x += barWidth + 2;
                    }
                }
            }
        </script>
    </body>
</html>