JS Audio API问题：函数内的Oscillator无法播放声音

这个问题其实是浏览器的用户交互驱动的音频激活策略导致的，我来给你拆解原因和解决方案：

问题根源 #

Opera 44（以及大部分现代浏览器）为了避免自动播放音频打扰用户，对Web Audio API的AudioContext做了限制：

• AudioContext默认处于**挂起（suspended）**状态，只有在用户主动触发的交互事件（比如鼠标点击、键盘按键）中才能被激活。
• 你直接在页面加载时运行代码能成功，是因为当时Opera 44可能对页面加载阶段的AudioContext激活限制较松；但当代码放到按钮点击事件里时，要么上下文没被正确激活，要么时间参数的使用有问题。

正确的解决方案 #

这里提供两种可靠的实现方式：

方式1：在点击事件内创建并初始化AudioContext

把AudioContext的创建和音频播放逻辑都放在用户点击事件中，确保上下文被正确激活：

// 可选：用全局变量保存实例，方便后续控制
let audioCtx, oscillator;

function playSound() {
  // 在用户点击时创建AudioContext，浏览器会自动激活它
  audioCtx = new AudioContext();
  oscillator = audioCtx.createOscillator();
  
  oscillator.connect(audioCtx.destination);
  oscillator.start();
  // 用currentTime计算停止时间，避免时间偏移问题
  oscillator.stop(audioCtx.currentTime + 2);
}

// 绑定按钮点击事件
document.getElementById('playButton').addEventListener('click', playSound);

方式2：提前创建上下文，在点击时恢复

如果需要提前初始化AudioContext，要在点击事件中检查并恢复它的状态：

// 页面加载时创建上下文，此时处于挂起状态
const audioCtx = new AudioContext();
let oscillator;

function playSound() {
  // 先恢复挂起的上下文
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  
  oscillator = audioCtx.createOscillator();
  oscillator.connect(audioCtx.destination);
  oscillator.start();
  oscillator.stop(audioCtx.currentTime + 2);
}

document.getElementById('playButton').addEventListener('click', playSound);

额外注意点 #

• 不要直接用osc.stop(2)，因为这个参数是相对于AudioContext创建时的时间戳。如果按钮点击是在页面加载后很久才触发，2可能已经是过去的时间，导致振荡器刚启动就停止，听不到声音。用audioCtx.currentTime + 2才是准确的"播放2秒后停止"。

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