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

Question

I have created a simple Phaser 3 test app (in Typescript, with rollup to transpile) and am using Capacitor to convert it into an iOS app on my Mac.

This is the relevant part of the app:

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();
    });
}

The app shows an image of a wizball , and if you click it, you hear "boom".

When I run it:

• With npm run watch , using http://localhost:10001 in a browser on my Mac, it works fine;
• By loading index.html in the dist/ dir in a browser on my Mac, it works fine;
• By loading https://garion.org/soundtest-ts/ on either my Mac or my iPad, it works fine;
• But when I use Capacitor to build an iOS app in Xcode, clicking the image gives no sound at all.

These are the steps to generate the iOS app:

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

The console log in Xcode shows the following error:

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

I find this strange, because the image asset can be found just fine. In the ios/App/public/ dir, both boom.mp3 and wizball.png are present.

I have put the full code, with steps to reproduce, here: https://github.com/joostvunderink/soundtest You will need node 10+ and Xcode (with at least one virtual device configured) installed to build the iOS app.

What am I overlooking?

Answer 1

Disable web audio in your game config, add to bottom of your game config to be like this.

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

Warning:

• Disable web audio will make phaser use html5 audio.
• Using html5 audio instead of web audio will make your game lag

Another workaround for this problem are:

1. Use external audio files, web audio still can work if you using audio files not from internal assets (I still can't find out why)
2. Using native audio/media plugin to play the audio for the phaser-capacitor app

Answer 2

Have the same problem. I found out that only with ios platform phaser loader can't parse ArrayBuffer on sound load. That's why I load audio with simple fetch and add to phaser with scene.sound.decodeAudio. Something like that:

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