AnalyserNode.getFloatFrequencyData()

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

如果你需要更好的性能并且不太在意数据的精度, 你可以使用 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对象连接 MediaElementAudioSourceNodeAnalyserNode对象的基本用法(即用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  

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support141225 No156
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes14 Yes2615 ? Yes

See also

文档标签和贡献者

 此页面的贡献者: HuShiyuFrontEnd
 最后编辑者: HuShiyuFrontEnd,