audio in my phaser.js game is not playing on android devices

Question

I have the following code in preload:

this.load.audio('theme', './audio/theme.mp3');

and in create():

gameState.music = this.sound.add('theme');
gameState.music.play();
gameState.music.loop = true; 

I also added in config following some info i found out there:

audio: {
    disableWebAudio: true
}

It works on desktop and iphone, but not on android. Funny thing that it worked before i made some - unrelated to audio - changes to the game.

Answer 1

After some digging and some testing here some more infos, on how to get the Audio, work consistently, on iphone or Android:

1. It seems that for Mobile (iOs or Android) you might need to unlock the audio/sound.

in the SoundScene just adapt the create function, to mirror these changes:

 create() {
    this.input.once('pointerdown', _ => {
        // UNLOCK audio, doesn't work immediately on iphone
        this.sound.unlock();
        gameState.music = this.sound.add('theme2', {loop: true});
        
        // if unlock worked, just play the sound
        if(!this.sound.locked){
            gameState.music.play();
        } 
        else {  // IF Not wait on unlock event 
            this.sound.once(Phaser.Sound.Events.UNLOCKED, () => {
                gameState.music.play();
            })
        }
    });
}

2. With the current config / code, this should work with Android, but not with iPhone.
3. If you remove the disableWebAudio:true from the config configutation in the game.js - file, than it works on iPhone, but not on Android. Strange

Currently this are the only two configurations, how I could get the audio to work on android and iPhone. I couldn't find a single configuration, that works for both.

Update: I retested everything, it seems to work, with the SoundScene changes, on win 10, android and iphone, with disableWebAudio:true using a mp3- file.