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
|
---
title: AnalyserNode.getByteFrequencyData()
slug: Web/API/AnalyserNode/getByteFrequencyData
translation_of: Web/API/AnalyserNode/getByteFrequencyData
---
<p>{{ APIRef("Web Audio API") }}</p>
<p>Метод <strong><code>getByteFrequencyData()</code></strong> интерфейса {{ domxref("AnalyserNode") }} копирует текущие данные частоты в переданный в него Uint8Array {{domxref("Uint8Array")}} (unsigned byte array).</p>
<p>Данные частоты состоят из целых чисел по шкале от 0 до 255.</p>
<p>Каждый элемент в массиве представляет собой значение в децибелах для определённой частоты. Частоты распределены линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации <code>48000</code> последний элемент массива будет представлять значение в децибелах для <code>24000</code> Гц.</p>
<p>Если в массиве меньше элементов, чем в {{domxref("AnalyserNode.frequencyBinCount")}}, лишние элементы удаляются. Если в нем больше элементов, чем необходимо, лишние элементы игнорируются.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: js notranslate">var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array должен иметь такой же размер, что и frequencyBinCount
void <em>analyser</em>.getByteFrequencyData(dataArray); // заполняет Uint8Array данными, полученными из getByteFrequencyData()
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>array</code></dt>
<dd>{{domxref("Uint8Array")}} , в который будут скопированы данные частотной области. Для любого образца, который не содержит данных, значение равно <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>None.</p>
<h2 id="Пример">Пример</h2>
<p>Следующий пример показывает базовое использование {{domxref ("AudioContext")}} для создания AnalyserNode, затем {{domxref ("window.requestAnimationFrame ()", "requestAnimationFrame")}} и {{htmlelement ("canvas" )}} для повторения сбора частотных данных и вывода в стиле гистограммы winamp для текущего аудиовхода. Для получения дополнительных примеров / информации ознакомьтесь с нашей демонстрацией <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 lines 128–205</a> ).</p>
<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
...
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
x += barWidth + 1;
}
};
draw();</pre>
<h2 id="Параметры_2">Параметры</h2>
<dl>
<dt>array</dt>
<dd>{{domxref("Uint8Array")}}, в который будут скопированы данные частотной области.</dd>
</dl>
<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', '#dom-analysernode-getbytefrequencydata', 'getByteFrequencyData()')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
<div>
<p>{{Compat("api.AnalyserNode.getByteFrequencyData")}}</p>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
