aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/analysernode/frequencybincount/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/api/analysernode/frequencybincount/index.html')
-rw-r--r--files/zh-cn/web/api/analysernode/frequencybincount/index.html141
1 files changed, 141 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/analysernode/frequencybincount/index.html b/files/zh-cn/web/api/analysernode/frequencybincount/index.html
new file mode 100644
index 0000000000..5ddcd887de
--- /dev/null
+++ b/files/zh-cn/web/api/analysernode/frequencybincount/index.html
@@ -0,0 +1,141 @@
+---
+title: AnalyserNode.frequencyBinCount
+slug: Web/API/AnalyserNode/frequencyBinCount
+translation_of: Web/API/AnalyserNode/frequencyBinCount
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p><strong><code>frequencyBinCount</code></strong> 的值固定为 {{ domxref("AnalyserNode") }} 接口中fftSize值的一半. 该属性通常用于可视化的数据值的数量.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var bufferLength = analyser.frequencyBinCount;
+</pre>
+
+<h3 id="值类型">值类型</h3>
+
+<p>无符号长整形(unsigned long).</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子展示了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext" title="AudioContext接口表示由音频模块连接而成的音频处理图,每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建,以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象,因为一切都发生在这个环境之中。"><code>AudioContext</code></a> 创建一个 <code>AnalyserNode</code>, 然后用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame" title="window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。"><code>requestAnimationFrame</code></a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas" title="&lt;canvas>元素可被用来通过脚本(通常是JavaScript)绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容,这些内容将会在在旧的、不支持&lt;canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。"><code>&lt;canvas&gt;</code></a> 去反复收集频率数据, 并绘制为一个柱状风格的输出(频谱).</p>
+
+<p>更多的例子/信息, 查看 <a href="http://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.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+ ...
+
+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 &lt; 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="规范">规范</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', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}</td>
+ <td>{{Spec2('Web Audio API')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+ <td>{{CompatGeckoDesktop(25.0)}} </td>
+ <td>{{CompatNo}}</td>
+ <td>15.0{{property_prefix("webkit")}}<br>
+ 22 (unprefixed)</td>
+ <td>6.0{{property_prefix("webkit")}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>Firefox OS</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ <th>Chrome for Android</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatUnknown}}</td>
+ <td>26.0</td>
+ <td>1.2</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>33.0</td>
+ </tr>
+ </tbody>
+</table>
+</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>