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

Question

我创建了一个简单的 Phaser 3 test app (in Typescript, with rollup to transpile) and am using 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 浏览器的 dist/ 目录中加载 index.html，它工作正常；
通过在我的 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应用

我忽略了什么？

Answer 1

在你的游戏配置中禁用网络音频，像这样添加到你的游戏配置的底部。

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

警告：

禁用网络音频将使 Phaser 使用 html5 音频。
使用 html5 音频而不是网络音频会使您的游戏延迟

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

使用外部音频文件，网络音频仍然可以使用来自内部资产的音频文件不是（我仍然无法找出原因）
使用本机 audio/media 插件播放 phaser-capacitor 应用程序的音频

Answer 2

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

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

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

No sound in Phaser 3 app when using Capacitor to build for iOS

javascript

ios

typescript

phaser-framework

capacitor