Phaser 3 game app on iOS generated with Capacitor lacks audio functionality

Question

Phaser 3 game app on iOS generated with Capacitor lacks audio functionality

I have developed a basic test app using Phaser 3 (written in Typescript and transpiled with rollup) and am utilizing Capacitor to convert it into an iOS application on my Mac.

This excerpt highlights the key functionality 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 displays an image of a wizball, and upon clicking it, you should hear a "boom" sound.

Here is what happens when I run it:

Using npm run watch and accessing http://localhost:10001 in a browser on my Mac, everything functions correctly;
Loading index.html from the dist/ directory in a browser on my Mac results in successful operation;
Accessing on either my Mac or iPad works as expected;
However, after building an iOS app in Xcode using Capacitor, clicking the image yields no sound at all.

These are the steps followed 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 showcases the following error message:

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

I find it perplexing because the image asset loads without any issues. Both boom.mp3 and wizball.png are present in the ios/App/public/ directory.

To access the complete code along with instructions for reproduction, visit: https://github.com/joostvunderink/soundtest Ensure that you have node 10+ and Xcode (with at least one virtual device configured) installed to build the iOS app.

What could I be missing?

javascript ios typescript phaser-framework capacitor

Answer 1

Answer №1

To prevent web audio in your game configuration, add the following code to the bottom of your game config.

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

Important Note:

Disabling web audio will cause Phaser to use html5 audio instead.
Using html5 audio instead of web audio may result in slower game performance.

If you encounter this issue, consider these alternatives:

Utilize external audio files, as web audio can still function with audio files that are not part of internal assets (the reason for this is unknown).
Implement a native audio/media plugin to handle audio playback in the phaser-capacitor app.

Answer 2

To prevent web audio in your game configuration, add the following code to the bottom of your game config.

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

Important Note:

Disabling web audio will cause Phaser to use html5 audio instead.
Using html5 audio instead of web audio may result in slower game performance.

If you encounter this issue, consider these alternatives:

Utilize external audio files, as web audio can still function with audio files that are not part of internal assets (the reason for this is unknown).
Implement a native audio/media plugin to handle audio playback in the phaser-capacitor app.

Answer 3

Answer №2

Encountering a similar issue myself. I discovered that the phaser loader on iOS cannot interpret ArrayBuffer when loading sound. To work around this, I utilize a basic fetch method to load audio content and then incorporate it into phaser using scene.sound.decodeAudio.

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

Answer 4

Encountering a similar issue myself. I discovered that the phaser loader on iOS cannot interpret ArrayBuffer when loading sound. To work around this, I utilize a basic fetch method to load audio content and then incorporate it into phaser using scene.sound.decodeAudio.

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

Phaser 3 game app on iOS generated with Capacitor lacks audio functionality

Answer №1

Answer №2

Similar questions

Tips for concealing tick labels in d3 using TypeScript

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

The Vue component fails to respond to updates in plugin data

What is the reason for the reconnect function not activating when manually reconnecting in Socket.IO?

the div background is limited to the exact size of the text, not filling the entire

Discover the magic of Google Charts with the ability to showcase HTML source code within tooltips

"Encountering a 403 error while using the request method in Node.js

What is the best way to transform a BLOB Buffer into a Base64 string using Swift?

TypeScript implementation of internationalization message extraction in Create React App

Issue with model not being updated after making a request using $http service

Using AngularJS, we can create a nested ng-repeat with an expression to filter the

Using CSS properties as false values within React applications

Ways to update the entire MobX observable array with new values

Encountering an 'Uncaught TypeError' with Tumblr API due to undefined property 'type' not being read

Creating a new version of an existing method found within a component in a Vue store.js file

Sending state properties to components within a route

Unable to include or create the ios platform in Cordova version 5.0.0

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

Distributing information to modules made of Polymer

Preserve the previous and current state within a React application