Phaser3 - Sound entries missing on Safari

Question

I'm using in my project phaser@3.24.0 and I have a problem with games on Safari 13.1.

In my preload method I have my loadConfig object with sound data:

var data = {
  mediaURL: "../../../static/sound/",
  dataObjects: [
    { type: "sound", name: "ok", file: "ok.ogg" },
    { type: "sound", name: "wrong", file: "wrong.ogg" },
    { type: "sound", name: "missing", file: "missing.png" },
  ],
};

loadData(data, this);

Helper function:

function loadData(data, game) {
    data.loadObjects.forEach((element) => {
    game.load.audio(element.name, config.mediaURL + element.file);
   }
}

In my create method:

this.sound.add("ok")
When I load the scene I get:
    Error: There is no audio asset with key “ok” in the audio cache
    initialize — phaser.min.js
    add — phaser.min.js
    create — culture.js
    create — phaser.min.js

On other browsers everything works fine, I don't have problems with this.

**: this.sound.add("ok")

This is not working, I have all my paths to the file etc in the game scene entries/data. But it seems no to be added in a create method - only in safari.

Answer 1

Safari doesn't support Ogg Vorbis.

Answer 2

Solution: there need to be an alternative in.mp3 format for Safari. Safari cannot proceed.oog files.

Answer 3

As other said here, Safari doesn't support.ogg format - https://caniuse.com/ogg-vorbis

So you should create a substitute sound with the extension mp3, m4a or something else depend on your research(I personally use m4a).

In order to load 2 sounds, one as back up, in Phaser do something like this:

scene.load.audio("ok", ["ok.ogg", "ok.m4a"]);

You can load an array of sounds with the same key, and the successful sound will play. https://rexrainbow.github.io/phaser3-rex-notes/docs/site/audio/#load-audio-file

Although you would need to change a bit your loadData() function to match an array of files.