家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。

今天給大家帶來的主題是 standardized-audio-context，即 Web Audio API 的跨瀏覽器包裝器，旨在嚴格遵循相關標準。話不多說，直接進入正題！

1.Web Audio API

1.1 什么是 Web Audio API

Web Audio API 提供了在 Web 上控制音頻的一個非常有效的通用系統，允許開發者自選音頻源，對音頻添加特效，使音頻可視化，添加空間效果（如平移）等等。

總之，Web Audio API 使用戶可以在音頻上下文（AudioContext）中進行音頻操作，同時具有模塊化路由的特點。在音頻節點上操作基礎的音頻，連接在一起構成音頻路由圖。即使在單個上下文中也支持多源，盡管這些音頻源具有多種不同類型通道布局。這種模塊化設計提供了靈活創建動態效果的復合音頻的方法。

一個簡單而典型的 Web Audio 流程如下：

• 創建音頻上下文
• 在音頻上下文里創建源 — 例如 <audio>, 振蕩器，流
• 創建效果節點，例如：混響、雙二階濾波器、平移、壓縮
• 為音頻選擇一個目的地，例如系統揚聲器
• 連接源到效果器，對目的地進行效果輸出

1.2 使用 Web Audio API

下面的示例展示了諸多 Web Audio API 接口的使用，包括對聲音的音量進行改變。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// 定義音頻上下文
// Webkit/blink 瀏覽器需要前綴，Safari 沒有 window 將無法工作
var voiceSelect = document.getElementById("voice");
//  用于選擇語音效果選項的選擇框
var visualSelect = document.getElementById("visual");
// 用于選擇音頻可視化選項的選擇框
var mute = document.querySelector(".mute");
// 靜音按鈕
var drawVisual;
// requestAnimationFrame
var analyser = audioCtx.createAnalyser();
// 創建一個AnalyserNode用來獲取音頻時間和頻率數據以實現數據可視化。
var distortion = audioCtx.createWaveShaper();
// 創建了表示非線性失真的WaveShaperNode，通常被用來給音頻添加失真效果
var gainNode = audioCtx.createGain();
// 創建一個 GainNode，可用于控制音頻圖的整體增益（或音量）
var biquadFilter = audioCtx.createBiquadFilter();
// 創建一個 BiquadFilterNode 表示一個二階濾波器，可配置為幾種不同的常見濾波器類型
function makeDistortionCurve(amount) {
  // 為失真/波形整形器節點使用創建曲線形狀的函數
  var k = typeof amount === "number" ? amount : 50,
    n_samples = 44100,
    curve = new Float32Array(n_samples),
    deg = Math.PI / 180,
    i = 0,
    x;
  for (; i < n_samples; ++i) {
    x = (i * 2) / n_samples - 1;
    curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x));
  }
  return curve;
}
navigator.getUserMedia(
  {
    // 限制 - 此應用程序僅需要音頻
    audio: true,
  },
  // 成功回調
  function (stream) {
    source = audioCtx.createMediaStreamSource(stream);
    source.connect(analyser);
    analyser.connect(distortion);
    distortion.connect(biquadFilter);
    biquadFilter.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    // 將不同的音頻圖節點連接在一起
    visualize(stream);
    voiceChange();
  },
  // 錯誤回調
  function (err) {
    console.log("The following gUM error occured: " + err);
  }
);
function visualize(stream) {
  WIDTH = canvas.width;
  HEIGHT = canvas.height;
  var visualSetting = visualSelect.value;
  console.log(visualSetting);
  if (visualSetting == "sinewave") {
    analyser.fftSize = 2048;
    var bufferLength = analyser.frequencyBinCount;
    // FFT 值的一半
    var dataArray = new Uint8Array(bufferLength);
    // 創建一個數組來存儲數據
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    function draw() {
      drawVisual = requestAnimationFrame(draw);
      analyser.getByteTimeDomainData(dataArray);
      // 獲取波形數據并將其放入上面創建的數組中
      canvasCtx.fillStyle = "rgb(200, 200, 200)";
      // 用畫布畫出波浪
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle = "rgb(0, 0, 0)";
      canvasCtx.beginPath();
      var sliceWidth = (WIDTH * 1.0) / bufferLength;
      var x = 0;
      for (var i = 0; i < bufferLength; i++) {
        var v = dataArray[i] / 128.0;
        var y = (v * 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();
    }
    draw();
  } else if (visualSetting == "off") {
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    canvasCtx.fillStyle = "red";
    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  }
}
function voiceChange() {
  distortion.curve = new Float32Array();
  biquadFilter.gain.value = 0;
  // 每次使用 voiceChange 函數時都會重置效果
  var voiceSetting = voiceSelect.value;
  console.log(voiceSetting);
  if (voiceSetting == "distortion") {
    distortion.curve = makeDistortionCurve(400);
    // 使用波形成形器節點對聲音應用失真
  } else if (voiceSetting == "biquad") {
    biquadFilter.type = "lowshelf";
    biquadFilter.frequency.value = 1000;
    biquadFilter.gain.value = 25;
    // 使用雙二階將 Lowshelf 濾波器應用于聲音
  } else if (voiceSetting == "off") {
    console.log("Voice settings turned off");
    // 不執行任何操作，因為選擇了關閉選項
  }
}
// 用于更改可視化和語音設置的事件偵聽器
visualSelect.onchange = function () {
  window.cancelAnimationFrame(drawVisual);
  visualize(stream);
};
voiceSelect.onchange = function () {
  voiceChange();
};
mute.onclick = voiceMute;
function voiceMute() {
  // 切換靜音和取消靜音
  if (mute.id == "") {
    gainNode.gain.value = 0;
    // gain set to 0 to mute sound
    mute.id = "activated";
    mute.innerHTML = "Unmute";
  } else {
    gainNode.gain.value = 1;
    // gain set to 1 to unmute sound
    mute.id = "";
    mute.innerHTML = "Mute";
  }
}

使用 Web Audio API，時間可以非常精確地控制，幾乎沒有延遲，開發人員可以準確地響應事件，并且可以針對采樣數據進行編程。

Web Audio API 也使開發者能夠控制音頻的空間化。在基于源 - 偵聽器模型的系統中，它允許控制平移模型和處理距離引起的衰減或移動源（移動偵聽）引起的多普勒效應。

2.什么是 standardized-audio-context

standardized-audio-context 是 Web Audio API 的跨瀏覽器包裝器，旨在嚴格遵循相關標準。standardized-audio-contex 包提供了 Web Audio API 的一個子集（幾乎是完整的），可以在每個受支持的瀏覽器中以可靠且一致的方式工作。

與其他流行的 Polyfill 相比，standardized-audio-contex 不會在全局范圍內污染或修改任何內容。 換句話說，它不會引起任何副作用。 因此，可以在任何庫內安全使用，即所謂的 ponyfill。standardized-audio-contex 上下文的目標之一是僅實現缺失的功能，并盡可能避免重寫內置功能。

但是，有些特性是無法以某種方式偽造的并使它們在與本機實現時具有相同的性能，其中最突出的是 AudioWorklet。

Web Audio API 的 AudioWorklet 接口用于提供在單獨線程中執行的自定義音頻處理腳本，以提供非常低延遲的音頻處理。

工作集的代碼在 AudioWorkletGlobalScope 全局執行上下文中運行，使用由工作集和其他音頻節點共享的單獨的 Web Audio 線程。

通過 BaseAudioContext.audioWorklet 屬性訪問音頻上下文的 AudioWorklet 實例。

值得一提的是，standardized-audio-contex 是用 TypeScript 編寫，這意味著它可以在任何 TypeScript 項目中無縫使用。與 TypeScript 提供的開箱即用的 Web 音頻 API 類型相比，standardized-audio-contex 導出的類型實際上與具體實現相匹配。 TypeScript 根據 Web Audio API 的 Web IDL 定義生成其類型，該定義并不總是與實際可用的實現匹配。

目前，standardized-audio-context 在 Github 上通過 MTI 協議開源，有超過 0.6k 的 star、6.3k 的項目依賴量、NPM 周平均下載量 50k，是一個值得關注的前端開源項目。

3.使用 standardized-audio-context

standardized-audio-context 可在 npm 上使用，并且可以像其他庫一樣安裝。

npm install standardized-audio-context

然后，可以以如下方式導入 AudioContext 和 OfflineAudioContext：

import { AudioContext, OfflineAudioContext } from "standardized-audio-context";

• AudioContext ：表示由鏈接在一起的音頻模塊構建的音頻處理圖，每個模塊都由一個 AudioNode 表示。AudioContext 控制其包含的節點創建以及音頻處理或解碼的執行。 在執行其他操作之前，開發者需要創建一個 AudioContext，因為所有事情都發生在上下文中。 建議創建一個 AudioContext 并重用它，而不是每次都初始化一個新的，可以同時將單個 AudioContext 用于多個不同的音頻源和管道。
• OfflineAudioContext ：是一個 AudioContext 接口，表示從鏈接在一起的 AudioNode 構建的音頻處理圖。 與標準 AudioContext 相比，OfflineAudioContext 不會將音頻渲染到設備硬件。 相反，它會盡可能快地生成它，并將結果輸出到 AudioBuffer。

開發者還可以使用 jspm 等服務加載標準化音頻上下文。此時，上面的導入語句需要更改為指向 URL。

import {
  AudioContext,
  OfflineAudioContext,
} from "https://jspm.dev/standardized-audio-context";

一旦 AudioContext 和 OfflineAudioContext 被導入，開發者就可以原生方法一樣使用。例如，以下代碼片段將產生一個漂亮且干凈的正弦波。

import { AudioContext } from "standardized-audio-context";
const audioContext = new AudioContext();
const oscillatorNode = audioContext.createOscillator();
// OscillatorNode 接口表示周期性波形，例如：正弦波。
// 它是一個 AudioScheduledSourceNode 音頻處理模塊
// 可以創建給定波的指定頻率，實際上是恒定的音調
oscillatorNode.connect(audioContext.destination);
oscillatorNode.start();

另一種方法是使用 AudioNode 構造函數（在本例中為 OscillatorNode 構造函數）而不是工廠方法。

import { AudioContext, OscillatorNode } from "standardized-audio-context";
const audioContext = new AudioContext();
const oscillatorNode = new OscillatorNode(audioContext);
oscillatorNode.connect(audioContext.destination);
oscillatorNode.start();
// 指定開始播放提示音的確切時間

4.本文總結

本文主要和大家聊聊standardized-audio-context，即 Web Audio API 的跨瀏覽器包裝器，旨在嚴格遵循相關標準。相信通過本文的閱讀，大家對 standardized-audio-context 會有一個初步的了解，同時也會有自己的看法。

因為篇幅有限，文章并沒有過多展開，如果有興趣，可以在我的主頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最后，歡迎大家點贊、評論、轉發、收藏！

參考資料

https://github.com/chrisguttandin/standardized-audio-context

https://www.npmjs.com/package/standardized-audio-context

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

https://mdn.github.io/voice-change-o-matic/

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext

https://habr.com/ru/articles/210422/