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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
---
title: AnalyserNode
slug: Web/API/AnalyserNode
translation_of: Web/API/AnalyserNode
---
<p>{{APIRef("Web Audio API")}}</p>
<p> <strong><code>AnalyserNode</code></strong><strong> </strong>接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 {{domxref("AudioNode")}}，同时允许你获取和处理它生成的数据，从而创建音频可视化。</p>
<p><code>AnalyzerNode</code> 只有一个输入和输出，即使未连接到输出它也能正常工作。</p>
<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/5119/WebAudioFFT.png" style="height: 174px; width: 661px;"></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">输入数</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">输出数</th>
<td><code>1</code> (但可能是未连接的)</td>
</tr>
<tr>
<th scope="row">通道计数模式</th>
<td><code>"explicit"</code></td>
</tr>
<tr>
<th scope="row">通道数</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">通道解释</th>
<td><code>"speakers"</code></td>
</tr>
</tbody>
</table>
<h2 id="继承">继承</h2>
<p>继承自以下父接口:</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
<dd>创建一个新的 <code>AnalyserNode</code> 对象实例。</dd>
</dl>
<h2 id="属性">属性</h2>
<p><em>继承属性自 </em><em>{{domxref("AudioNode")}}。</em></p>
<dl>
<dt><span id="cke_bm_91S" style="display: none;"> </span>{{domxref("AnalyserNode.fftSize")}}</dt>
<dd>一个无符号长整形(unsigned long)的值，代表了用于计算频域信号时使用的 FFT (<a href="https://zh.wikipedia.org/zh-cn/%E5%BF%AB%E9%80%9F%E5%82%85%E9%87%8C%E5%8F%B6%E5%8F%98%E6%8D%A2">快速傅里叶变换</a>) 的窗口大小。</dd>
<dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
<dd>一个无符号长整形(unsigned long)的值, 值为fftSize的一半。这通常等于将要用于可视化的数据值的数量。</dd>
<dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
<dd>是一个双精度值，表示FFT分析频域数据并转换为无符号字节值时，对输入的功率数据的最小阈值 - 基本上，它限定了调用<code>getByteFrequencyData()</code>时结果范围的最小值</dd>
<dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
<dt></dt>
<dd>是一个双精度值，表示FFT分析频域数据并转换为无符号字节值时，对输入的功率数据的最大阈值 - 基本上，它限定了调用<code>getByteFrequencyData()</code>时结果范围的最大值</dd>
<dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
<dd>是一个双精度浮点型(double)的值，表示最后一个分析帧的平均常数 — 基本上，它随时间使值之间的过渡更平滑。</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>继承方法自 </em><em>{{domxref("AudioNode")}}</em>.</p>
<dl>
<dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
<dd>将当前频域数据拷贝进{{domxref("Float32Array")}}数组。</dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
<dd>将当前频域数据拷贝进{{domxref("Uint8Array")}}数组（无符号字节数组）。</dd>
</dl>
<dl>
<dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
<dd>将当前波形，或者时域数据拷贝进{{domxref("Float32Array")}}数组。</dd>
<dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
<dd>将当前波形，或者时域数据拷贝进 {{domxref("Uint8Array")}}数组（无符号字节数组）。 </dd>
</dl>
<h2 id="例子">例子</h2>
<div class="note">
<p><strong>注意：</strong>查看 <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> 指南以获得更多关于创建音频可视化效果的信息。</p>
</div>
<h3 id="基础用法">基础用法</h3>
<p>下面的例子展示了 {{domxref("AudioContext")}} 创建一个 <code>AnalyserNode</code>, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的时域数据, 并绘制为一个示波器风格的输出(频谱).</p>
<p>更多的例子/信息, 查看 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 演示 (相关代码在 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 的 128行~205行</a>).</p>
<pre class="brush: js">var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
// ...
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// 获取ID为 "oscilloscope" 的画布
var canvas = document.getElementById("oscilloscope");
var canvasCtx = canvas.getContext("2d");
// 绘制一个当前音频源的示波器
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(200, 200, 200)';
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
canvasCtx.beginPath();
var sliceWidth = canvas.width * 1.0 / bufferLength;
var x = 0;
for (var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var 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();
};
draw();</pre>
<h2 id="规范">规范</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', '#the-analysernode-interface', 'AnalyserNode')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<div class="hidden">此页的兼容性表生成自结构化数据。如果你希望贡献相关数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发送一个 pull request.</div>
<p>{{Compat("api.AnalyserNode")}}</p>
</div>
<h2 id="相关内容">相关内容</h2>
<ul>
<li><a href="/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API">Web Audio API的运用 </a></li>
</ul>
|
