使用Capacitor为iOS构建时，Phaser 3应用中没有声音

问题描述

我已经创建了一个简单的Phaser 3测试应用（在Typescript中，需要rollup进行转换），并且正在使用Capacitor将其转换为Mac上的iOS应用。

这是应用程序的相关部分：

function preload () {
    this.load.audio('boom',['boom.mp3','boom.ogg','./boom-44100.ogg','./boom-44100.mp3']);
    this.load.image('wizball','./wizball.png');
}

function create () {
    const image = this.add.image(400,300,'wizball').setInteractive();;
    this.boom = this.sound.add('boom');
    image.on('pointerup',() => {
        this.boom.play();
    });
}

该应用程序显示一个wizball的图像，如果单击它，则会听到“轰”的声音。

运行时：

• 使用npm run watch，在Mac上的浏览器中使用http：// localhost：10001，可以正常工作；
• 通过在Mac上的浏览器的index.html目录中加载dist/，它可以正常工作；
• 通过在我的Mac或iPad上加载https://garion.org/soundtest-ts/，它可以正常工作；
• 但是当我使用Capacitor在Xcode中构建iOS应用时，单击图像根本没有声音。

以下是生成iOS应用的步骤：

npm i
npm run watch
npx cap add ios
npx cap copy ios
npx cap open ios

Xcode中的控制台日志显示以下错误：

Error: There is no audio asset with key "boom" in the audio cache
⚡️  URL: capacitor://localhost/game.js

我觉得很奇怪，因为可以很好地找到图像资产。在ios/App/public/目录中，同时存在boom.mp3和wizball.png。

我在此处放置了完整的代码，并复制了步骤：https://github.com/joostvunderink/soundtest，您将需要安装10+节点和Xcode（至少配置了一个虚拟设备）来构建iOS应用。

我俯瞰什么？

解决方法

有同样的问题。我发现只有使用 ios 平台移相器加载器才能在声音加载时解析 ArrayBuffer。这就是为什么我使用简单的获取加载音频并使用 scene.sound.decodeAudio 添加到移相器。 类似的东西：

fetch(sound.url)
  .then((response) => response.arrayBuffer())
  .then((response) => {
    scene.sound.decodeAudio({
      data: response,key: 'audioKey',});
  });

,

在游戏配置中禁用网络音频，将其添加到游戏配置的底部即可。

let game = new Phaser.Game({
  ...
  audio: {
    disableWebAudio: true
  }
});

警告：

• 禁用网络音频将使移相器使用html5音频。
• 使用html5音频 而不是网络音频会导致游戏延迟

此问题的另一个解决方法是：

1. 使用外部音频文件，如果您使用 来自内部资产的音频文件不是（我仍然找不到原因）
2. 使用本机音频/媒体插件为移相电容器应用播放音频