iPadOS下AudioContext无声音问题求助（附Euterpe代码示例）

我开发了一款简易音乐播放器库Euterpe，遇到了Apple设备上播放失效的问题：在iPad上系统显示音频正在播放，但进度不推进、无声音输出，且无任何错误抛出；但在Firefox、Chromium等浏览器及其他平台上均能正常运行。

最小复现示例 #

const ctx = new AudioContext()
const audio_el = document.createElement("audio")
audio_el.crossOrigin = "anonymous"
document.body.appendChild(audio_el)
const track = ctx.createMediaElementSource(audio_el)
track.connect(ctx.destination)

const button = document.createElement("button")
button.innerHTML = "demo_play"
button.addEventListener("click", () => {
  audio_el.src = "https://ia600604.us.archive.org/20/items/78_gomen-nasai-forgive-me_columbia-tokyo-orchestra-richard-bowers-b.-meyers-r.-hatto_gbia0009754a/Gomen-Nasai%20%28Forgive%20Me%29%20-%20Columbia%20Tokyo%20Orchestra.mp3"
  ctx.resume()
  audio_el.play()
})
document.body.appendChild(button)

相关已标记解决的WebKit问题 #

• WebAudio muted when...（Bug编号：251532）
• decodeAudioData regression in Safari 15（Bug编号：231872）
• howler.js仓库相关issue（编号：1513）

Euterpe核心代码片段 #

初始化与播放触发 #

const euterpe = new EuterpeBuilder(document.querySelector("#audio")!, db)
    .build()
// 用户点击播放库中歌曲时触发
function library_play(e: MouseEvent) {
    const b = e.currentTarget as HTMLButtonElement
    euterpe.try_specific_song_async(parseInt(b.dataset["id"]!)).then(
        () => document.querySelector("#text-playing")!.innerHTML = euterpe.format_current_song(),
        (e) => alert(e)
    )
}

核心播放逻辑函数 #

try_specific_song_async(new_song_id: number) {
  return new Promise((resolve, reject) => {
    const new_song = this.db.songs.find((song) => song.id! == new_song_id)
    if (!new_song) reject(new Error(`No song with id "${new_song_id}" found`))
    else {
      this.try_new_song_async(new_song.url.toString()).then(
        () => {
          this.try_play_async().then((s) => {
            if (this.current_song) this.played_history.push(this.current_song)
            this.current_song = new_song
            this.current_song_id = new_song.id!
            resolve(s)
          }, (e) => reject(e))
        },
        (e) => reject(e)
      )
    }
  })
}

try_new_song_async(path: string) {
  return new Promise((resolve, reject) => {
    this.audio_element.src = this.current_song_path = path
    const controller = new AbortController();

    this.audio_element.addEventListener("canplay", function canplay_listener(s) {
      controller.abort()
      resolve(s)
    }, { signal: controller.signal })

    this.audio_element.addEventListener("error", function error_listener(e) {
      controller.abort()
      reject(e)
    }, { signal: controller.signal })

    this.audio_element.addEventListener("stalled", function stalled_listener(e) {
      controller.abort()
      reject(e)
    }, { signal: controller.signal })

    controller.signal.addEventListener("abort", () => {
      this.current_song_duration = this.audio_element.duration
    })

    this.is_playing = false
  })
}

try_play_async() {
  return new Promise((resolve, reject) => {
    if (this.is_playing) resolve(Error("Already playing"))
    if (this.track.context.state !== "running") {
      this.audio_context.resume().then(() => {
        this.audio_element.play().then((s) => {
          this.is_playing = true
          resolve(s)
        }, (r) => {
          this.is_playing = false
          reject(r)
        })
      }, (e) =>
        reject(new Error("Context closed or suspended" + JSON.stringify(e))))
    } else {
      this.audio_element.play().then((s) => {
        this.is_playing = true
        resolve(s)
      }, (r) => {
        this.is_playing = false
        reject(r)
      })
    }
  })
}

AudioContext构建逻辑 #

class EuterpeBuilder {
  constructor(private audio_element: HTMLAudioElement, db){
    const AudioContext = window.AudioContext || window.webkitAudioContext
    this.#audio_context = new AudioContext()
    this.#track = this.#audio_context.createMediaElementSource(audio_element)
    this.#gain = this.#audio_context.createGain()
  }

  build() {
    if (!this.#is_gain_connected) {
      !this.#prev_node ? this.#track.connect(this.#gain) : this.#prev_node.connect(this.#gain)
      this.#prev_node = this.#gain
    }
    this.#prev_node.connect(this.#audio_context.destination)
    this.audio_element.preload = "metadata"
    return new Euterpe(this.db, this.#audio_context, this.audio_element, this.#track, this.#gain, this.#volume)
  }
}

针对性解决建议 #

1. 延迟AudioContext初始化到用户交互时：WebKit对音频上下文的创建有严格的用户交互触发限制，不要在页面加载时直接创建AudioContext，而是在第一次用户点击播放按钮时再初始化。
2. 调整MediaElementSource连接时机：尝试在每次设置audio元素src之后，重新创建MediaElementSource并连接到音频图，避免复用之前的连接导致WebKit内部状态异常。
3. 优化异步播放时序：确保audio_context.resume()的Promise完成后再调用audio_element.play()，同时等待loadedmetadata或canplaythrough事件后再触发播放，而不是仅依赖canplay事件。
4. 简化音频图排查问题：先移除GainNode等中间节点，直接将MediaElementSource连接到destination，测试是否能正常播放，逐步排查是否是节点连接导致的问题。
5. 强制资源重新加载：在设置新的src后，调用audio_element.load()确保资源重新加载，避免WebKit缓存旧的资源状态。

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