1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: AudioWorkletProcessor
slug: Web/API/AudioWorkletProcessor
translation_of: Web/API/AudioWorkletProcessor
---
<p>{{APIRef("Web Audio API")}}</p>
<p><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>的 <strong><code>AudioWorkletProcessor</code></strong> 接口代表了一个 自定义的音频处理代码 {{domxref("AudioWorkletNode")}}. 它身处于 {{domxref("AudioWorkletGlobalScope")}} 并运行在 Web Audio rendering 线程上. 同时, 一个建立在其基础上的 {{domxref("AudioWorkletNode")}} 运行在主线程上.</p>
<h2 id="构造函数">构造函数</h2>
<div class="note"><code>AudioWorkletProcessor</code> 及其子类不能通过用户提供的的代码直接实例化。它们只能随着与之相联系{{domxref("AudioWorkletNode")}}s的创建而被其创建再内部。其子类的构造函数将被一个可选对象调用，因此您可以执行自定义的初始化过程——详细信息请参见构造函数页面。</div>
<dl>
<dt>{{domxref("AudioWorkletProcessor.AudioWorkletProcessor", "AudioWorkletProcessor()")}}</dt>
<dd>创建一个 <code>AudioWorkletProcessor</code> 对象的新实例。</dd>
</dl>
<h2 id="属性">属性</h2>
<dl>
<dt>{{domxref("AudioWorkletProcessor.port", "port")}} {{readonlyinline}}</dt>
<dd>返回一个用于在处理程序和其所属的{{domxref("AudioWorkletNode")}}间双向通信的 {{domxref("MessagePort")}} 。 另一端 可通过该节点的{{domxref("AudioWorkletNode.port", "port")}} 属性使用.</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em><code>AudioWorkletProcessor</code> 接口没有定义任何自己的方法。但是, 您必须提供一个 {{domxref("AudioWorkletProcessor.process", "process()")}} 方法, 用以处理音频流。</em></p>
<h2 id="事件">事件</h2>
<p><em><code>AudioWorkletProcessor</code> 接口不响应任何事件。</em></p>
<h2 id="使用说明">使用说明</h2>
<h3 id="Deriving_classes">Deriving classes</h3>
<p>要自定义音频处理代码， 你必须从<code>AudioWorkletProcessor</code> 接口派生一个类. 这个派生类必须具有在该接口中不曾定义的{{domxref("AudioWorkletProcessor.process", "process")}} 方法. 该方法将被每个含有128 样本帧的块调用并且接受输入和输出数组以及自定义的{{domxref("AudioParam")}}s (如果它们刚被定义了) 的计算值作为参数. 您可以使用输入和 音频参数值去填充输出数组, 这是默认的用于使输出静音。</p>
<p>Optionally, if you want custom {{domxref("AudioParam")}}s on your node, you can supply a {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} property as a <em>static getter</em> on the processor. The array of {{domxref("AudioParamDescriptor")}}-based objects returned is used internally to create the {{domxref("AudioParam")}}s during the instantiation of the <code>AudioWorkletNode</code>.</p>
<p>The resulting <code>AudioParam</code>s reside in the {{domxref("AudioWorkletNode.parameters", "parameters")}} property of the node and can be automated using standard methods such as <code><a href="/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime">linearRampToValueAtTime</a></code>. Their calculated values will be passed into the {{domxref("AudioWorkletProcessor.process", "process()")}} method of the processor for you to shape the node output accordingly.</p>
<h3 id="处理音频">处理音频</h3>
<p>一个创建自定义音频处理算法的步骤的实例：</p>
<ol>
<li>创建一个独立的文件;</li>
<li>在这个文件中:
<ol>
<li>Extend the <code>AudioWorkletProcessor</code> class (see <a href="#Deriving_classes">"Deriving classes" section</a>) and supply your own {{domxref("AudioWorkletProcessor.process", "process()")}} method in it;</li>
<li>Register the processor using {{domxref("AudioWorkletGlobalScope.registerProcessor()")}} method;</li>
</ol>
</li>
<li>Load the file using {{domxref("Worklet.addModule", "addModule()")}} method on your audio context's {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} property;</li>
<li>Create an {{domxref("AudioWorkletNode")}} based on the processor. The processor will be instantiated internally by the <code>AudioWorkletNode</code> constructor.</li>
<li>Connect the node to the other nodes.</li>
</ol>
<h2 id="例子">例子</h2>
<p>In the example below we create a custom {{domxref("AudioWorkletNode")}} that outputs white noise.</p>
<p>First, we need to define a custom <code>AudioWorkletProcessor</code>, which will output white noise, and register it. Note that this should be done in a separate file.</p>
<pre class="brush: js notranslate">// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
process (inputs, outputs, parameters) {
const output = outputs[0]
output.forEach(channel => {
for (let i = 0; i < channel.length; i++) {
channel[i] = Math.random() * 2 - 1
}
})
return true
}
}
registerProcessor('white-noise-processor', WhiteNoiseProcessor)
</pre>
<p>Next, in our main script file we'll load the processor, create an instance of {{domxref("AudioWorkletNode")}}, passing it the name of the processor, then connect the node to an audio graph.</p>
<pre class="brush: js notranslate">const audioContext = new AudioContext()
await audioContext.audioWorklet.addModule('white-noise-processor.js')
const whiteNoiseNode = new AudioWorkletNode(audioContext, 'white-noise-processor')
whiteNoiseNode.connect(audioContext.destination)
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#audioworkletprocessor', 'AudioWorkletProcessor')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("api.AudioWorkletProcessor")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
<li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
