浏览器定时播放音频异常：超3秒间隔出现漏播/无声问题求助

问题根源分析 #

1. 第一声延迟触发：当前play()方法通过setTimeout延迟interval时间才调用_playSound，导致第一声不会在调用play()时立刻播放，而是等待一个间隔后才触发，这会让你误以为“漏播第一声”。
2. 音频资源未加载完成：Audio元素设置src后需要时间加载资源，若在资源未就绪时调用play()，会导致播放失败（返回的Promise被拒绝）。间隔越长，越容易遇到这个问题——比如4秒间隔（参数15）时，第一次播放尝试可能刚好在资源未加载完成时触发，直接失败，后续的播放也会受影响。
3. 浏览器自动播放策略限制：现代浏览器要求音频播放必须由用户主动交互（如点击、触摸）触发。如果play()是在无用户交互的场景下调用，长间隔的播放请求更可能被浏览器拦截。

修复方案 #

1. 预加载音频并确保资源就绪

在构造函数中强制预加载音频，并监听加载完成事件，避免未就绪时触发播放：

export default class BeepPlayer {
  constructor(interval) {
    this.audio = new Audio()
    this.audio.src = 'src/assets/sounds/metronomeClick.wav'
    this.audio.preload = 'auto' // 强制预加载资源
    this.interval = (60 / interval) * 1000
    this.intervalID = null
    this.isReady = false

    // 监听音频加载完成事件
    this.audio.addEventListener('canplaythrough', () => {
      this.isReady = true
      console.log('音频加载完成')
    })

    console.log('interval: ' + this.interval)
  }

2. 调整播放逻辑：第一声立刻触发

修改play()方法，让第一声在调用时直接播放，后续用setInterval维持间隔播放，同时捕获播放错误避免影响后续循环：

play() {
    if (!this.isReady) {
      console.warn('音频未加载完成，等待就绪后播放')
      // 等待加载完成后自动触发第一声
      const readyHandler = () => {
        this._playSound()
        this.intervalID = setInterval(this._playSound.bind(this), this.interval)
        this.audio.removeEventListener('canplaythrough', readyHandler)
      }
      this.audio.addEventListener('canplaythrough', readyHandler)
      return
    }
    // 立刻播放第一声
    this._playSound()
    // 启动间隔循环
    this.intervalID = setInterval(this._playSound.bind(this), this.interval)
  }

  _playSound() {
    console.log('beep')
    // 捕获播放错误，避免中断后续循环
    this.audio.play().catch(err => {
      console.error('播放失败:', err)
    })
  }

  stop() {
    clearInterval(this.intervalID)
    this.audio.pause()
    this.audio.currentTime = 0 // 重置播放位置，方便下次复用
  }
}

3. 确保播放触发来自用户交互

必须通过用户的主动操作（比如点击“开始”按钮）调用play()，避免浏览器拦截播放请求：

// 示例：绑定按钮点击事件触发播放
document.getElementById('startBtn').addEventListener('click', () => {
  const player = new BeepPlayer(15)
  player.play()
})

4. Web Audio API 版本优化（可选）

如果继续使用Web Audio API，提前加载音频缓冲并确保用户交互触发：

export default class BeepPlayer {
  constructor(interval) {
    this.audioContext = null
    this.buffer = null
    this.interval = (60 / interval) * 1000
    this.intervalID = null
    // 预加载音频缓冲
    this.loadAudio('src/assets/sounds/metronomeClick.wav')
  }

  async loadAudio(url) {
    try {
      const response = await fetch(url)
      const arrayBuffer = await response.arrayBuffer()
      this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
      this.buffer = await this.audioContext.decodeAudioData(arrayBuffer)
    } catch (err) {
      console.error('加载音频缓冲失败:', err)
    }
  }

  play() {
    if (!this.audioContext || !this.buffer) {
      console.warn('音频未加载完成')
      return
    }
    // 立刻播放第一声
    this._playSound()
    this.intervalID = setInterval(this._playSound.bind(this), this.interval)
  }

  _playSound() {
    const source = this.audioContext.createBufferSource()
    source.buffer = this.buffer
    source.connect(this.audioContext.destination)
    source.start()
  }

  stop() {
    clearInterval(this.intervalID)
  }
}

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