如何在JavaScript中获取音频文件FFT数据？实现每秒30次实时获取

首先我得先指出你原代码里的几个语法错误，这些错误会导致代码无法正常运行：

• Window.onload 应该是小写的 window.onload，并且要写成函数形式 window.onload = function() { ... }
• 变量声明的 Var 要小写为 var（更推荐用 let/const 提升代码可读性）
• audioContext 构造函数首字母大写，应为 new AudioContext()
• analyser.fftsize 要写成 analyser.fftSize（遵循驼峰命名规范）
• uintarray 是 Uint8Array（正确的类型构造函数）
• analyser.getFrequencyBinCount(array) 是错误的，应该用 analyser.getByteFrequencyData(array) 来获取频率数据

接下来针对你「每秒30次获取频率」的需求，我提供两种可行方案：

方案一：使用 setInterval 定时获取 #

直接通过定时器设置33.33ms（1000/30）的间隔，定时调用获取FFT数据的逻辑，实现起来简单直接：

window.onload = function() {
  const audio = document.getElementById('your-audio-element'); // 替换成你的audio元素ID
  audio.load();
  
  // 处理浏览器兼容性，以及AudioContext的用户交互限制
  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const context = new AudioContext();
  
  // 建立音频源到分析器的连接链路
  const source = context.createMediaElementSource(audio);
  const analyser = context.createAnalyser();
  analyser.fftSize = 512;
  const frequencyArray = new Uint8Array(analyser.frequencyBinCount);
  
  source.connect(analyser);
  analyser.connect(context.destination); // 必须连接到输出，否则音频无法播放
  
  // 设置每秒30次的定时任务
  const intervalId = setInterval(() => {
    // 获取当前频率数据
    analyser.getByteFrequencyData(frequencyArray);
    // 在这里处理你的频率数据，比如可视化、分析等
    console.log('当前FFT数据:', frequencyArray);
  }, 1000 / 30);
  
  // 音频播放结束后清理资源
  audio.addEventListener('ended', () => {
    clearInterval(intervalId);
    context.close();
  });
  
  // 现代浏览器要求音频必须由用户交互触发，这里用点击事件激活
  document.addEventListener('click', () => {
    if (context.state === 'suspended') {
      context.resume();
    }
    audio.play();
  });
};

方案二：在 requestAnimationFrame 中控制执行频率 #

如果你希望逻辑更贴合浏览器的渲染循环（避免定时器可能出现的卡顿或延迟），可以在requestAnimationFrame中记录上次执行的时间，只有当时间间隔超过33.33ms时才获取FFT数据：

window.onload = function() {
  const audio = document.getElementById('your-audio-element');
  audio.load();
  
  const AudioContext = window.AudioContext || window.webkitAudioContext;
  const context = new AudioContext();
  
  const source = context.createMediaElementSource(audio);
  const analyser = context.createAnalyser();
  analyser.fftSize = 512;
  const frequencyArray = new Uint8Array(analyser.frequencyBinCount);
  
  source.connect(analyser);
  analyser.connect(context.destination);
  
  let lastUpdateTime = 0;
  const targetInterval = 1000 / 30; // 33.33ms的间隔
  
  function render(currentTime) {
    requestAnimationFrame(render);
    
    // 判断是否到达更新频率的时间点
    if (currentTime - lastUpdateTime >= targetInterval) {
      analyser.getByteFrequencyData(frequencyArray);
      // 处理频率数据
      console.log('当前FFT数据:', frequencyArray);
      lastUpdateTime = currentTime;
    }
  }
  
  requestAnimationFrame(render);
  
  // 用户交互激活音频上下文
  document.addEventListener('click', () => {
    if (context.state === 'suspended') {
      context.resume();
    }
    audio.play();
  });
  
  // 清理资源
  audio.addEventListener('ended', () => {
    context.close();
  });
};

额外注意事项 #

• 用户交互要求：现代浏览器出于安全和体验考虑，AudioContext默认处于暂停状态，必须通过用户的交互（点击、触摸等）来激活，所以代码中加入了点击事件来恢复上下文并播放音频。
• frequencyBinCount：这个值是fftSize的一半，当你设置fftSize=512时，frequencyArray的长度为256，每个元素对应一个频率区间的振幅值（0-255）。
• 资源清理：音频播放结束后记得关闭AudioContext和清除定时器，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者smiling_buddha