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

Received a syntax error from the DOM parser even after successfully downloading it through NPM

Using various conditions and operators to display or conceal HTML elements in React applications, particularly in NextJS

How to Programmatically Disable OnClick Functionality in a Nested Div Using JavaScript and jQuery

Utilize the id in AngularJS to bring attention to a specific row within a table

what sets apart parseint from minus

When the user clicks on the iframe, they will be redirected to the

A guide to building a dynamic form slider that showcases variable output fields with Javascript

Tips for setting a default value in an input type file using JavaScript

Combining CSR and SSR in the next iteration of our project will

Error in TypeScript: Typography type does not accept 'string' type as valid

What are the appropriate situations for utilizing getStaticPaths()?

Obtaining an address using latitudes and longitudes with React Google Maps

Does anyone have any insight on why I can't seem to remove an item from my list of tasks?

Having difficulty retrieving the necessary information for manipulating the DOM using Express, Ajax, and Axios

Using array values with styled-components may lead to an object being potentially 'undefined'

An error arises when using the command window.close()

pausing a timer using JavaScript or jQuery

Assigning value to a member variable in a TypeScript Angular class

Running AngularJS controllers should only occur once the initialization process has been fully completed

Switch the checked status of an input dynamically using jQuery function