在 WKWebView 和 Safari 中使用 Web Audio API 播放本地音频资源时延迟/滞后非常严重

Question

更新：我尝试安装howler，它似乎已经解决了初始播放延迟问题，但是尽管尝试了包括 wav 在内的各种设置和格式，但我仍然无法在音频中没有明显间隙的情况下干净地循环。

---

我正在编写一个基于 JavaScript 的游戏，当使用 Web Audio API 在 WKWebView 中播放音频（mp3 或 wav）时，我遇到了一些极其严重的延迟。

当我在桌面（Macbook）上的 Chrome 上运行游戏时，它的行为符合预期，播放音频时没有明显的延迟。

然而，在我的 iPhone 上的 WKWebView 以及桌面上的 Safari 中，在音频开始之前调用

play()

后，即使连续多次播放，也会出现令人无法接受的长时间延迟（~500 - 1000 毫秒）。

_ctx = new AudioContext();

load() {
    this._audio = new Audio();

    this._audio.oncanplaythrough = () => {
      console.log(`audio loaded ${this.src}`);
      this.loaded = true;
    };

    this._audio.preload = "auto";
    this._audio.src = this.src;
    this._audio.load();

    const ctx = this._ctx;
    this._track = ctx.createMediaElementSource(this._audio);
    this._track.connect(ctx.destination);
}

play() {
  try {
    const ctx = this._ctx;
    if (ctx.state === "suspended") {
      ctx.resume();
    }
    this._audio.currentTime = 0;
    this._audio.play();
  } catch (e) {
    console.error(`unable to play ${this}`, e);
  }
}

将

loop

属性设置为 true 也存在类似的问题：在 Chrome 上它可以无缝循环，但在 Safari 上，循环后音频恢复之前会出现类似的延迟。

我开始担心，因为这会彻底毁掉我的游戏。由于音频延迟如此之大，它无法播放，我真的希望有一个解决方案。请记住，我的所有文件都是通过文件系统访问的本地资源。我见过一些将数据加载到

AudioBuffer

的解决方案，但我找不到使用本地资源执行此操作的方法。

我注意到的一件奇怪的事情是，在 Safari 桌面上，每次我尝试播放效果声音（短波）时，触摸栏上的媒体控制器都会随着声音滚动，就像我正在播放视频一样。

Answer 1

我最终以最可笑的方式解决了这个问题。正如我所提到的，大多数其他答案都涉及使用 XHR 远程加载数据，因此出于绝望，我在我的本机包装器中安装了 Telegraph 并将我的 webView 指向

127.0.0.1

你难道不知道它有效吗.

至于苹果是否会接受这是一个有效的做法是另一个问题，而且具有讽刺意味的是：我被迫在用户的设备上托管一个实际的 HTTP 服务器只是来绕过事实上，在数据处理方面，本地文件是二等公民。