Chrome 64 推出備受期待的 Web Audio API 新功能 - AudioWorklet。本課程將說明概念和使用方式 自訂音訊處理器和 JavaScript 程式碼查看 現場示範。 系列的下一篇文章「音訊工作程式設計模式」 認為建構先進的音訊應用程式可能會很有趣
背景:ScriptProcessorNode
Web Audio API 的音訊處理作業會在主執行緒以外的獨立執行緒中執行 UI 執行緒,讓執行緒可以順暢運作。如何在以下位置啟用自訂音訊處理功能: JavaScript,Web Audio API 提議使用 ScriptProcessorNode 事件處理常式,在主 UI 執行緒中叫用使用者指令碼。
此設計中有兩個問題:事件處理為非同步
且程式碼會在主執行緒上執行。前
後者會使得延遲時間變慢,如果後者造成
經常擁擠的 UI 與 DOM 相關任務,導致使用者介面
「jank」或音訊轉換成「毛刺」。正因為這種基本設計瑕疵
ScriptProcessorNode
已不適用本規格,
替換為 AudioWorklet。
概念
音訊小程式會儲存使用者提供的 JavaScript 程式碼,所有
音訊處理執行緒。這意味著 無須跳轉至
處理音訊這表示使用者提供的指令碼程式碼可以執行
在音訊轉譯執行緒 (AudioWorkletGlobalScope
) 與其他
內建 AudioNodes
,可確保零延遲和同步程序
算繪。
註冊與建立例項
使用 Audio Worklet 包含兩個部分:AudioWorkletProcessor
和
AudioWorkletNode
。這比使用 ScriptProcessorNode 還要複雜
但必須讓開發人員擁有低階自訂音訊的功能
和資料處理之間AudioWorkletProcessor
代表實際的音訊處理器
,且位於 AudioWorkletGlobalScope
中。
AudioWorkletNode
是 AudioWorkletProcessor
的對應部分,取用
參照主執行緒中其他 AudioNodes
的連線。這項服務
會顯示在主要全域範圍和函式中,就像一般的 AudioNode
一樣。
以下為說明註冊的程式碼片段,以及 建立例項。
// The code in the main global scope.
class MyWorkletNode extends AudioWorkletNode {
constructor(context) {
super(context, 'my-worklet-processor');
}
}
let context = new AudioContext();
context.audioWorklet.addModule('processors.js').then(() => {
let node = new MyWorkletNode(context);
});
如要建立 AudioWorkletNode
,您必須新增 AudioContext
物件和處理器名稱做為字串。處理器定義可以是
由新 Audio Worklet 物件的 addModule()
呼叫載入及註冊。
包含音訊小程式的 Worklet API 僅適用於
安全內容,因此
使用這類網址的網頁,必須透過 HTTPS 提供,但 http://localhost
確保本機測試的安全性
您可以將 AudioWorkletNode
的子類別
執行該工作程式的處理器支援的自訂節點。
// This is the "processors.js" file, evaluated in AudioWorkletGlobalScope
// upon audioWorklet.addModule() call in the main global scope.
class MyWorkletProcessor extends AudioWorkletProcessor {
constructor() {
super();
}
process(inputs, outputs, parameters) {
// audio processing code here.
}
}
registerProcessor('my-worklet-processor', MyWorkletProcessor);
AudioWorkletGlobalScope
中的 registerProcessor()
方法會
要註冊的處理器名稱和類別定義字串。
在全域範圍內完成指令碼程式碼評估後,
「AudioWorklet.addModule()
」承諾會解決通知使用者的問題
類別定義已準備好用於主要全域範圍
自訂音訊參數
AudioNodes 的優點之一是可排程參數
運用AudioParam
自動化技術。AudioWorkletNodes 可以利用這些節點
可以自動以音訊速率控管的曝光參數
使用者定義的音訊參數可在 AudioWorkletProcessor
中宣告
方法是設定一組 AudioParamDescriptor
。
基礎 WebAudio 引擎會在
建立及連結
相應 AudioParam
物件傳送到節點。
/* A separate script file, like "my-worklet-processor.js" */
class MyWorkletProcessor extends AudioWorkletProcessor {
// Static getter to define AudioParam objects in this custom processor.
static get parameterDescriptors() {
return [{
name: 'myParam',
defaultValue: 0.707
}];
}
constructor() { super(); }
process(inputs, outputs, parameters) {
// |myParamValues| is a Float32Array of either 1 or 128 audio samples
// calculated by WebAudio engine from regular AudioParam operations.
// (automation methods, setter) Without any AudioParam change, this array
// would be a single value of 0.707.
const myParamValues = parameters.myParam;
if (myParamValues.length === 1) {
// |myParam| has been a constant value for the current render quantum,
// which can be accessed by |myParamValues[0]|.
} else {
// |myParam| has been changed and |myParamValues| has 128 values.
}
}
}
AudioWorkletProcessor.process()
方法
實際音訊處理作業是在 process()
回呼方法的
AudioWorkletProcessor
。必須由類別中的使用者實作
定義WebAudio 引擎會以非均勻叫用這個函式
同時動態饋給輸入和參數以及擷取輸出內容。
/* AudioWorkletProcessor.process() method */
process(inputs, outputs, parameters) {
// The processor may have multiple inputs and outputs. Get the first input and
// output.
const input = inputs[0];
const output = outputs[0];
// Each input or output may have multiple channels. Get the first channel.
const inputChannel0 = input[0];
const outputChannel0 = output[0];
// Get the parameter value array.
const myParamValues = parameters.myParam;
// if |myParam| has been a constant value during this render quantum, the
// length of the array would be 1.
if (myParamValues.length === 1) {
// Simple gain (multiplication) processing over a render quantum
// (128 samples). This processor only supports the mono channel.
for (let i = 0; i < inputChannel0.length; ++i) {
outputChannel0[i] = inputChannel0[i] * myParamValues[0];
}
} else {
for (let i = 0; i < inputChannel0.length; ++i) {
outputChannel0[i] = inputChannel0[i] * myParamValues[i];
}
}
// To keep this processor alive.
return true;
}
此外,process()
方法的傳回值可用於
控制 AudioWorkletNode
的生命週期,讓開發人員能夠
記憶體用量從 process()
方法標記傳回 false
處理器無效,WebAudio
引擎也不再叫用
方法。如要讓處理器保持運作,方法必須傳回 true
。
否則,系統會垃圾收集節點和處理器組合
。
使用 MessagePort 進行雙向通訊
有時候,自訂 AudioWorkletNode
想要顯示不會
對應至 AudioParam
,例如以字串為基礎的 type
屬性
以便控制自訂篩選器基於此目的及未來
AudioWorkletNode
和AudioWorkletProcessor
配備
MessagePort
用於雙向通訊。任何類型的自訂資料
可透過這個管道交換
可以使用 .port
屬性在節點和節點上存取 MessagePort
此架構節點的 port.postMessage()
方法會傳送訊息至
相關處理器的 port.onmessage
處理常式以及反向操作
/* The code in the main global scope. */
context.audioWorklet.addModule('processors.js').then(() => {
let node = new AudioWorkletNode(context, 'port-processor');
node.port.onmessage = (event) => {
// Handling data from the processor.
console.log(event.data);
};
node.port.postMessage('Hello!');
});
/* "processors.js" file. */
class PortProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.port.onmessage = (event) => {
// Handling data from the node.
console.log(event.data);
};
this.port.postMessage('Hi!');
}
process(inputs, outputs, parameters) {
// Do nothing, producing silent output.
return true;
}
}
registerProcessor('port-processor', PortProcessor);
MessagePort
支援可轉移,也就是說,您可以
轉移資料儲存空間或 WASM 模組開啟
能找出無數可能性。
逐步說明:建構 GainNode
以下是以 GainNode 為基礎建構的完整範例
《AudioWorkletNode
》和《AudioWorkletProcessor
》。
index.html
檔案:
<!doctype html>
<html>
<script>
const context = new AudioContext();
// Loads module script with AudioWorklet.
context.audioWorklet.addModule('gain-processor.js').then(() => {
let oscillator = new OscillatorNode(context);
// After the resolution of module loading, an AudioWorkletNode can be
// constructed.
let gainWorkletNode = new AudioWorkletNode(context, 'gain-processor');
// AudioWorkletNode can be interoperable with other native AudioNodes.
oscillator.connect(gainWorkletNode).connect(context.destination);
oscillator.start();
});
</script>
</html>
gain-processor.js
檔案:
class GainProcessor extends AudioWorkletProcessor {
// Custom AudioParams can be defined with this static getter.
static get parameterDescriptors() {
return [{ name: 'gain', defaultValue: 1 }];
}
constructor() {
// The super constructor call is required.
super();
}
process(inputs, outputs, parameters) {
const input = inputs[0];
const output = outputs[0];
const gain = parameters.gain;
for (let channel = 0; channel < input.length; ++channel) {
const inputChannel = input[channel];
const outputChannel = output[channel];
if (gain.length === 1) {
for (let i = 0; i < inputChannel.length; ++i)
outputChannel[i] = inputChannel[i] * gain[0];
} else {
for (let i = 0; i < inputChannel.length; ++i)
outputChannel[i] = inputChannel[i] * gain[i];
}
}
return true;
}
}
registerProcessor('gain-processor', GainProcessor);
這涵蓋「音訊工作程式」系統的基本知識。有現場示範 造訪 Chrome WebAudio 團隊的 GitHub 存放區。
功能轉換:實驗功能至穩定版
根據預設,系統會為 Chrome 66 以上版本啟用音訊小程式。在 Chrome 64 和 65 版中,這項功能是沿用實驗性旗標。