Audio starts after stage has changed

[tvance929]

So I am starting a loop at the beginning of the game... IF I click the NEW GAME text before the loop starts... then my loop starts on the next stage.  

 

Ive tried rearranging when the music gets started as opposed to the text mouse events but no go ...  

 

*** I CAN OVERCOME this by checking for the loop to be playing in the next stages UPDATE function and stopping it in there... but it just feels like I am doing something wrong....?

 

http://toddvance.com/phaser/flappyBird/  <-- commented out the fix so you can see ... click 'Start Game' quickly to see what is happening.  IF YOU WAIT for the music to start and THEN move on (start game OR high scores) the music stops appropriately.

   preload: function () {        game.load.audio('loopGameStart', ['assets/GameStart.mp3', 'assets/GameStart.ogg']);        game.load.image('logo', 'assets/BigBird.png');    },    create: function () {        this.music = game.add.audio('loopGameStart', 1, true);        this.music.play('', 0, 1, true);        this.game.add.tween(logo.scale).to({ x: 1, y: 1 }, 2000, Phaser.Easing.Bounce.Out, true);        this.mainMenuStart = this.game.add.text(game.world.centerX, game.world.centerY + 100, "Start Game", { font: "50px Arial", fill: "#000", align: "center" });        this.mainMenuStart.anchor.set(0.5);        this.mainMenuStart.inputEnabled = true;        this.mainMenuStart.events.onInputDown.add(this.down, this);        this.mainMenuStart.events.onInputOver.add(this.over, this);        this.mainMenuStart.events.onInputOut.add(this.out, this);        this.highScores = this.game.add.text(game.world.centerX, game.world.centerY + 150, "High Scores", { font: "50px Arial", fill: "#000", align: "center" });        this.highScores.anchor.set(0.5);        this.highScores.inputEnabled = true;        this.highScores.events.onInputDown.add(this.down, this);        this.highScores.events.onInputOver.add(this.over, this);        this.highScores.events.onInputOut.add(this.out, this);    },    down: function (item) {        this.music.loop = false;        this.music.stop();        switch (item.text) {            case 'Start Game':                game.state.start('mainGameState');                break;            case 'High Scores':                game.state.start('highScoresState');        }

[rich]

The problem is that the mp3 file hasn't finished decoding. You've set it to play as soon as decoding is finished - evidently this is taking a few seconds, so you've got a race condition happening (i.e.  it's possible to click the button and THEN for the music to finish decoding and start playing). Or if you wait long enough it'll start before you click anything.

 

What I'd suggest is loading the music in a separate preloader state and in there no advancing until it has decoded fully. Then in your game state (or main menu state) when you call play it'll start immediately. You can either listen for the Sound.onDecoded event, or poll the cache: this.cache.isSoundDecoded('titleMusic')

[tvance929]

Perfect...thank you!

 

I think I'll just do this in my UPDATE of mainMenu... unless someone sees a terrible problem with it.

update: function () {        if (this.music.isDecoding) {            this.mainMenuStart.visible = false;            this.highScores.visible = false;        }        else {            this.preloadBar.destroy();            this.mainMenuStart.visible = true;            this.highScores.visible = true;        }    },

[rich]

Be warned that update runs on a constant loop, and this.music.isDecoding will evalute to 'true' permanently, so you may end up destroying your preloadBar and setting visible states over and over. Shouldn't matter too much, but I'd suggest getting used to not coding yourself into a situation like that

[tvance929]

Good point, thanks so much for this awesome framework!  It's been like an early Christmas present for me!

[Mariusz]

I had the same exact problem. In my game, I have different music tracks for the MENU and PLAY states. Because it takes quite a while to decode the audio files, the track that should have been playing in the MENU state was delayed and thus played in the PLAY state alongside a different track, it was a big mess. 

I think that making the player wait another 30 seconds or so just for the audio files to decode is a very bad idea. Therefore I attach a handler to the onDecoded event to stop the track IF the track I want playing is not decoded yet and the state is already changing. It works well, even if it's a bit hacky.