HTML5 Audio问题：获取的频率数组全为零

嘿，看你在做音频频率可视化的时候遇到了麻烦，结合你给出的HTML audio标签和不完整的JS代码，我来帮你梳理常见的坑，再给你一个能跑通的完整实现方案吧！

1. 先说说你代码里最容易踩的几个坑 #

• 浏览器自动播放限制：现代浏览器要求AudioContext必须在用户主动交互（点击、触摸等）后才能初始化/恢复，页面加载直接调用audio.play()大概率会被拦截。
• 跨域配置细节：你加了crossorigin属性，但如果服务器不支持use-URL-credentials，可以换成更通用的anonymous试试。
• AudioContext兼容性：部分老浏览器（比如Safari）需要加webkit前缀。

2. 补全并修正后的完整代码 #

HTML部分 #

<audio id="music" src="https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082" crossorigin="anonymous" controls="true"></audio>
<!-- 用来绘制可视化的画布 -->
<canvas id="visualizer" width="800" height="200"></canvas>

JavaScript部分 #

// 必须通过用户交互触发初始化，避开浏览器自动播放限制
document.addEventListener('click', initVisualizer);

function initVisualizer() {
  // 只初始化一次，避免重复绑定
  document.removeEventListener('click', initVisualizer);

  const audio = document.getElementById('music');
  const canvas = document.getElementById('visualizer');
  const canvasCtx = canvas.getContext('2d');
  
  try {
    // 兼容不同浏览器的AudioContext创建方式
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const analyser = audioCtx.createAnalyser();
    
    // 把音频源连接到Analyser，再输出到扬声器
    const source = audioCtx.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    
    // 配置Analyser参数：fftSize必须是2的幂，值越大频率分辨率越高
    analyser.fftSize = 256;
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    
    // 核心绘制函数，用requestAnimationFrame实现流畅动画
    function drawVisualizer() {
      requestAnimationFrame(drawVisualizer);
      
      // 获取当前频率数据
      analyser.getByteFrequencyData(dataArray);
      
      // 清空画布
      canvasCtx.fillStyle = '#000';
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
      
      // 绘制频率柱状图
      const barWidth = (canvas.width / bufferLength) * 2.5;
      let x = 0;
      
      for(let i = 0; i < bufferLength; i++) {
        const barHeight = (dataArray[i] / 255) * canvas.height;
        // 用频率值动态调整柱子颜色
        canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
        canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
        
        x += barWidth + 1;
      }
    }
    
    // 尝试播放音频并启动可视化
    audio.play().catch(err => console.error('音频播放失败:', err));
    drawVisualizer();
  } catch(err) {
    console.error('可视化初始化失败:', err);
    alert('你的浏览器不支持AudioContext功能，请升级浏览器后重试！');
  }
}

3. 额外注意事项 #

• 如果还是看不到可视化效果，先打开浏览器控制台看有没有报错，大概率是跨域或者浏览器权限问题。
• 可以调整analyser.fftSize的值（比如512、1024）来改变可视化的精细程度，值越大柱子越多，但性能消耗也会增加。
• 如果音频是用户上传的本地文件，不需要担心跨域问题，但同样需要用户交互触发播放。

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