Sound Issue with Different Browsers

Phaser 3
1

Hi,

I’m having an issue where sound behaves differently on different browsers. All of my music files are MP3s.

On Chrome and Edge, it works perfectly.

On Safari, there’s no sound at all, I’ve already tried allowing audio loops in the Safari settings. Safari supports MP3s so I have no leads as to why it doesn’t work.

On Firefox, the issue is odd: The first iteration of the music loop plays, then the 2nd iteration starts playing shortly before the first iteration was finished (too early), there is a short time where the 1st and 2nd iterations are playing at the same time. Then after the 2nd iteration and on, there is about a half second gap between the iterations of the music (too late), which interrupts the flow and sounds bad. There are no gaps in the music files, as proven since the iterations work perfectly in two other browsers.

If you don’t understand the issue, try the first level of my game in Firefox:

My code for the music, in create():

    this.music = this.sound.add('level_1_soundtrack');
    var music_config = {
      mute: false,
      volume: 0.5,
      rate: 1,
      detune: 0,
      seek: 0,
      loop: true,
      delay: 0
    }
    this.music.play(music_config)
2

Mp3 files have a history of looping problems, a short pause has been tradition. Though not a common problem these days, I think Firefox had a regression some version back where the looping issue was re-introduced.

I personally use ogg for all none apple products and m4a for apple. This works flawlessly and phaser support loading multiple files for same sound. Here is an example https://labs.phaser.io/edit.html?src=src\audio\Web%20Audio\play%20audio%20file.js

3

Thank you for the input, I have tried every combination of mp3, ogg and m4a. The same behavior persists in both Firefox (short pause) and Safari (no sound) regardless of what combination I use. The m4a files have the short pause on every browser for me.

4

Tried in firefox and seems to work fine, the menu or settings music seems to loop as it should. There is a glitch but not deviating from how it usually is with mp3.

I do get a https://v6p9d9t4.ssl.hwcdn.net/html/3043312/build/phaser.js error 403 access denied in the log. But as the game runs it seems to load this from somewhere else as well (perhaps bundled into another file)? Possibly some double loading could create strange behaviour in some cases.

On Safari iOS there is no sound, I don’t have it hooked up to a mac so can not look at the web console, but guessing there will be an error about the sound in there.

5

You’re right, Firefox seems to be behaving better now.

The Safari issue remains. There is nothing in the console logs but in the network tab where it lists all my assets, I can click on all my images in the game but if I click one of the audio files (whether mp3 or m4a) it just says “An error occurred trying to load the resource.” Nothing useful.

6

What if you open a resource url directly? I mean pasting https://v6p9d9t4.ssl.hwcdn.net/html/3043312/build/soundfile.mp3 in Safari and see if you get the sound player.

Perhaps the cdn is not serving the files with the correct mime file type and Safari is picky about this while the other browsers are not.

7

Going to that URL plays the mp3 just fine in Safari. Here are the headers for one of my mp3 files if it helps at all, sorry for the quality.

image
image2048×1536 1.19 MB

8

It looks like the sounds are getting loaded and are playable in Safari. But they’re not playing.

Check game.sound.context.state to see if it’s suspended.

9

I think the audio context is suspended (locked) and it never unlocks because Phaser has added the click/touch handlers too early.

Try moving your scripts from <head> to <body>.

10

It’s working! I don’t know how you knew that was the issue. Thank you both for your time and input.

11

I step through your code :athletic_shoe: :smiley_cat: