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
|
---
title: AnalyserNode.getFloatFrequencyData()
slug: Web/API/AnalyserNode/getFloatFrequencyData
translation_of: Web/API/AnalyserNode/getFloatFrequencyData
---
<p>{{ APIRef("Web Audio API") }}</p>
<div>
<p><strong><code>getFloatFrequencyData()</code></strong> 作为{{domxref("AnalyserNode")}} 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 {{domxref("Float32Array")}} 数组对象.</p>
<p>此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。</p>
<p>如果你需要更好的性能并且不太在意数据的精度, 你可以使用 {{domxref("AnalyserNode.getByteFrequencyData()")}} 作为代替, 这一接口使用 {{domxref("Uint8Array")}}来存储数据（对应的也是这个精度的格式）.</p>
</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">void <em>analyser</em>.getFloatFrequencyData(<em>array</em>);
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>array</code></dt>
<dd>你即将用于拷贝频域数据（frequency domain data）的 {{domxref("Float32Array")}} 数组. 对于任何无声的样本, 它的值应该是 <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.<br>
如果这一数组的可容纳元素数少于该分析节点的{{domxref("AnalyserNode.frequencyBinCount")}}值, 超出容量的数据元素将被舍弃. 而如果容量多于需要，多余的数组元素将不会被操作.</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>无返回值.</p>
<h2 id="示例">示例</h2>
<pre class="brush: js">const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array的长度应该和frequencyBinCount相同
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// 用getFloatFrequencyData()方法的返回数据填充Float32Array数组
analyser.getFloatFrequencyData(myDataArray);
</pre>
<h3 id="例：绘制一个频谱">例：绘制一个频谱</h3>
<p>下面的示例展示了一个 {{domxref("AudioContext")}}对象连接 {{domxref("MediaElementAudioSourceNode")}}到<code>AnalyserNode对象的基本用法（即用AudioContext将音频内容连接到分析节点，从而可以展开对音频数据的分析）</code>. 当音频播放时, 我们使用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}方法产生轮询从而不断地收集频率数据，进而在 {{htmlelement("canvas")}} 元素上绘制 winamp（windows上的一款MP3播放软件）条形图风格的频谱.</p>
<p>更多的应用示例和应用信息, 可以参看我们 <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 示例 (在 <a href="https://github.com/mdn/voice-change-o-matic-float-data">source code</a> 同样有).</p>
<pre class="brush: html, highlight:[15, 17, 18, 41]"><!doctype html>
<body>
<script>
const audioCtx = new AudioContext();
//创建一个音频源
//在示例中我们使用了一个音频文件,但其实这里也可以用麦克风输入
const audioEle = new Audio();
audioEle.src = 'my-audio.mp3';//这里是文件名
audioEle.autoplay = true;
audioEle.preload = 'auto';
const audioSourceNode = audioCtx.createMediaElementSource(audioEle);
//生成一个分析节点(analyser node)
const analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 256;
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Float32Array(bufferLength);
//设置音频节点网络（音频源->分析节点->输出）
audioSourceNode.connect(analyserNode);
analyserNode.connect(audioCtx.destination);
//生成 2D canvas
const canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
const canvasCtx = canvas.getContext('2d');
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
function draw() {
//准备好下次重绘
requestAnimationFrame(draw);
//获取实时的频谱信息
analyserNode.getFloatFrequencyData(dataArray);
//画一个黑色的背景
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
//绘制频谱
const barWidth = (canvas.width / bufferLength) * 2.5;
let posX = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = (dataArray[i] + 140) * 2;
canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)';
canvasCtx.fillRect(posX, canvas.height - barHeight / 2, barWidth, barHeight / 2);
posX += barWidth + 1;
}
};
draw();
</script>
</body></pre>
<dl>
</dl>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<p>{{Compat("api.AnalyserNode.getFloatFrequencyData")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
