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

Posted 2023-02-23

【中文标题】使用 Capacitor 为 iOS 构建时 Phaser 3 应用程序没有声音

【英文标题】：No sound in Phaser 3 app when using Capacitor to build for iOS

【发布时间】：2020-09-12 20:20:08

【问题描述】：

我创建了一个简单的 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 上的浏览​​器中的 dist/ 目录中加载 index.html，它可以正常工作； 通过在我的 Mac 或 iPad 上加载 https://garion.org/soundtest-ts/，它可以正常工作； 但是当我在 Xcode 中使用 Capacitor 构建 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 应用程序。

我忽略了什么？

【参考方案1】：

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

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

警告：

禁用网络音频将使移相器使用 html5 音频。 使用 html5 音频 而不是网络音频会让你的游戏滞后

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

使用外部音频文件，如果您使用网络音频仍然可以工作 音频文件不是来自内部资产（我仍然无法找出原因） 使用原生音频/媒体插件为移相器-电容器应用播放音频

【参考方案2】：

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

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

【讨论】：

有趣，您介意为此分享您的客户加载器吗？

添加到原始答案

您是否为此创建了一个自定义多文件加载器，可以在预加载期间作为正常过程的一部分运行？