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  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 14Edge Full support 12Firefox Full support 25IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 26Opera Android Full support 15Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also

文档标签和贡献者

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