phaser: Web Audio does not work on iOS Safari

Version

3.54.0

Safari

Description

Using Safari in iOS, web audio does not work. When you run phaser it throws an error like this:

Error: Audio key "theKey" missing from cache

If you disable the audio with enabling the noAudio config, it works. You also can enable disableWebAudio, but this causes other issues.

Example Test Code

new Phaser.Game({
  type: Phaser.AUTO,
  physics: {
    default: "arcade",
  },
  audio: {
    noAudio: true // if this is true, it works, with audio enabled it fails
  },
  scene: titleSceneConfig,
});

Additional Information

In this thread you can see other people having the same issue: https://phaser.discourse.group/t/audio-works-on-web-but-not-ios/3677

Thank you for this awesome project!

Best regards!

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 21 (4 by maintainers)

Most upvoted comments

I’ve tracked it down to the line giving us grief - looks like the File class in the loader checks if its getting a local file by string matching on “file://”, adding “capacitor://” in there too completely fixes the issue.

https://github.com/photonstorm/phaser/blob/699e81e008456da0d0c7245b4a1d72cd5bb31d67/src/loader/File.js#L313

@photonstorm if I did a PR to extend xhr.responseURL.indexOf('file://') === 0 to xhr.responseURL.indexOf('file://') === 0 || xhr.responseURL.indexOf('capacitor://') === 0 would it be accepted, or is there a better way to handle this?

joshdotblack on May 17, 2021

Seems like we’re running into a similar issue with some of our games - we’re fine running them on the web/in a capacitor android shell, but when we run them in the capacitor iOS shell we run into issues with media files not loading (mp3 most often). Capacitor runs an internal webserver to be able to serve files from the filesystem to your app, on the android side it serves these with a http or https protocol, but on the iOS side it serves from a capacitor:// protocol since iOS doesn’t allow capacitor to serve over http/https - is this likely to be causing issues in the Phaser loader?

joshdotblack on May 10, 2021

You should provide your audio in 2, ideally 3 formats: m4a, ogg and mp3, then you provide an array of these 3 file types to the Phaser Audio Loader and it’ll pick whichever is the first one it can play for that device.

photonstorm on May 6, 2021

Hi @albert-gonzalez good to know, I’ll check it out. Parcel seems to be like a nice tool. No being sorry, it’s me to thank you for sharing the possible link between our issues!

Dercetech on May 9, 2021

Hi again @Dercetech

I think Parcel is a bundler for the web only. I am developing a little game for my site, so I don’t need a native build. I saw your post in the forum and I thought that they could be related, but now I see that is another issue, sorry for the inconvenience.

Best regards!

albert-gonzalez on May 9, 2021