Web Audio API波形可视化程序在Chrome/JSFiddle无法运行排查

嘿，我帮你梳理了一下代码在Chrome和JSFiddle里跑不起来的原因，核心是现代浏览器的自动播放政策限制，以及Web Audio Context的激活规则——Atom的预览插件因为是本地环境，可能绕过了这些限制，但Chrome和JSFiddle是严格执行的。具体问题和修复方案如下：

1. 核心问题：浏览器自动播放政策 #

现在Chrome、Firefox等主流浏览器都有两个关键限制：

• 音频/视频的播放必须由用户主动交互（比如点击按钮）触发，不能页面加载后自动播放
• Web Audio Context默认处于suspended（暂停）状态，必须通过用户手势来激活

你的代码里虽然把begin()绑定到了按钮点击，但初始化AudioContext的时机不对，也没有处理它的激活状态，导致播放请求被浏览器拦截。

2. 代码里的其他小问题 #

• 变量名request和全局的requestAnimationFrame容易冲突，建议改名
• close函数里的flag逻辑有点绕，容易导致动画清理不彻底
• 提前调用audio.load()没必要，浏览器会自动处理音频加载

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onClick="begin()">Start</button>
<button onClick="end()">End</button>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">
</canvas>
<script>
// 修复后的JS代码放这里
</script>
</body>
</html>

JavaScript部分 #

let frequencyArray = [];
let analyser;
let requestId; // 避免和requestAnimationFrame重名
let flag = 0;
let height = 0;
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const bars = Math.round(canvas.width);
const lineWidth = 3;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const audio = new Audio();
audio.src = "https://s3.us-west-2.amazonaws.com/storycreator.uploads/ck9kpb5ss0xf90132mgf8z893?client_id=d8976b195733c213f3ead34a2d95d1c1";
audio.crossOrigin = "anonymous";
let context; // 延迟初始化AudioContext

function begin() {
  // 第一次点击时才初始化AudioContext
  if (!context) {
    context = new (window.AudioContext || window.webkitAudioContext)();
    analyser = context.createAnalyser();
    const source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    frequencyArray = new Uint8Array(analyser.frequencyBinCount);
  }
  
  // 恢复AudioContext（如果处于暂停状态）
  if (context.state === 'suspended') {
    context.resume();
  }
  
  // 在用户交互回调内播放音频，处理Promise避免静默失败
  audio.play().then(() => {
    requestId = requestAnimationFrame(drawCanvas);
  }).catch(err => {
    console.error('音频播放失败:', err);
  });
};

function end() {
  // 清理动画请求
  if (requestId) {
    cancelAnimationFrame(requestId);
    requestId = null;
  }
  audio.pause();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  flag = 0;
};

// 简化音频结束后的处理逻辑
audio.addEventListener("ended", () => {
  if (requestId) {
    cancelAnimationFrame(requestId);
    requestId = null;
  }
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  flag = 0;
});

const drawCanvas = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  analyser.getByteTimeDomainData(frequencyArray);
  for (let i = 0; i < bars; i += 5) {
    height = frequencyArray[i] * 0.25;
    drawLine( { i, bars, height }, canvas, ctx );
  }
  // 只有音频在播放时才继续动画
  if (flag === 0 && !audio.paused) {
    requestId = requestAnimationFrame(drawCanvas);
  }
};

const drawLine = (opts, canvas, ctx) => {
  const { i, bars, height } = opts;
  ctx.strokeStyle = "#212121";
  ctx.lineWidth = lineWidth;
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.moveTo(i, centerY);
  ctx.lineTo(i, centerY + height);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(i, centerY);
  ctx.lineTo(i, centerY - height);
  ctx.stroke();
};

关键修复说明 #

• 延迟激活AudioContext：在用户点击按钮时才创建并恢复上下文，完全符合浏览器的交互要求
• 处理play()的Promise：audio.play()返回Promise，必须处理成功/失败，否则播放失败时你看不到错误信息
• 动画ID管理：用requestId替代原来的request，避免命名冲突，同时在结束时正确清理
• 简化事件逻辑：去掉复杂的flag切换，让音频结束和手动停止的逻辑更清晰

这样修改后，你的波形可视化程序应该能在Chrome和JSFiddle里正常运行啦~

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