Chrome启动后音频播放异常，Phaser框架调用音频函数仅首次生效

• 你的代码每次调用OtpAudio函数时都会重复执行game.load.audio加载同名key为theme的音频资源，Phaser的资源加载是异步操作，你没有等待加载完成就直接调用sound.add和play方法，后续调用时加载逻辑冲突就会导致播放失败，表现出来就是播放概率随机。
• 重复调用game.sound.add生成新的音频实例会造成内存冗余，同时部分浏览器的音频自动播放策略也可能拦截非用户交互触发的后续播放请求。

方案1：预加载音频（适用于product参数固定的场景） #

把音频加载逻辑放到游戏初始化的preload阶段执行，仅加载一次，调用时直接播放即可：

// 游戏preload阶段提前加载，全局仅执行一次
function preload() {
  const product = '你的固定product标识'
  game.load.audio('theme', [`../../../product_assets/${product}/audio/eng/OTP.mp3`])
}

// 需要播放音频时直接调用
function OtpAudio() {
  const music = game.sound.add('theme')
  music.play()
  console.log(music)
}

方案2：动态加载校验（适用于product参数动态变化的场景） #

先判断对应音频资源是否已经加载，未加载的话等待加载完成再触发播放，同时不同product对应不同的资源key避免冲突：

function OtpAudio(product) {
  // 不同product对应不同的资源key，避免覆盖冲突
  const audioKey = `theme_${product}`
  // 资源已加载，直接播放
  if (game.cache.audio.exists(audioKey)) {
    const music = game.sound.add(audioKey)
    music.play()
    console.log(music)
    return
  }
  // 资源未加载，先完成加载再播放
  game.load.audio(audioKey, [`../../../product_assets/${product}/audio/eng/OTP.mp3`])
  game.load.once('complete', () => {
    const music = game.sound.add(audioKey)
    music.play()
    console.log(music)
  })
  game.load.start()
}

• 如果是需要频繁触发的短音频，建议全局复用同一个音频实例，播放前调用music.stop()重置进度即可，不需要每次生成新实例。
• 确保首次音频播放是在用户交互事件（点击、触摸等）的回调中触发，符合浏览器音频自动播放策略要求，避免被浏览器拦截。

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