当前位置：文江博客知识库简体中文文档 Web API AnalyserNode getFloatFrequencyData

AnalyserNode.getFloatFrequencyData() - Web API 接口参考编辑

getFloatFrequencyData() 作为AnalyserNode 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 Float32Array 数组对象.

此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。

如果你需要更好的性能并且不太在意数据的精度, 你可以使用 AnalyserNode.getByteFrequencyData() 作为代替, 这一接口使用 Uint8Array来存储数据（对应的也是这个精度的格式）.

语法

void analyser.getFloatFrequencyData(array);

参数

array: 你即将用于拷贝频域数据（frequency domain data）的 Float32Array 数组. 对于任何无声的样本, 它的值应该是 -Infinity.
如果这一数组的可容纳元素数少于该分析节点的AnalyserNode.frequencyBinCount值, 超出容量的数据元素将被舍弃. 而如果容量多于需要，多余的数组元素将不会被操作.

示例

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array的长度应该和frequencyBinCount相同
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// 用getFloatFrequencyData()方法的返回数据填充Float32Array数组
analyser.getFloatFrequencyData(myDataArray);

下面的示例展示了一个 AudioContext对象连接 MediaElementAudioSourceNode到AnalyserNode对象的基本用法（即用AudioContext将音频内容连接到分析节点，从而可以展开对音频数据的分析）. 当音频播放时, 我们使用 requestAnimationFrame()方法产生轮询从而不断地收集频率数据，进而在 <canvas> 元素上绘制 winamp（windows上的一款MP3播放软件）条形图风格的频谱.

更多的应用示例和应用信息, 可以参看我们 Voice-change-O-matic-float-data 示例 (在 source code 同样有).

<!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>

规范

规范	Status	Comment
Web Audio API getFloatFrequencyData()	Working Draft

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

AnalyserNode.getFloatFrequencyData() - Web API 接口参考编辑

语法

参数

返回值

示例

例：绘制一个频谱

规范

浏览器兼容性

See also

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

AnalyserNode.getFloatFrequencyData() - Web API 接口参考 编辑

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

AnalyserNode.getFloatFrequencyData() - Web API 接口参考编辑

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。