Constantly looping music is driving me nuts!

[EulaConstellar]

In my minigame, I have music playing. It's the same music in the minigame menu as it is in the minigame. However, when I go from the minimenu state to the minigame state, it's hit or miss whether the music stops or not. Sometimes it doubles up and one of the music plays overtop of the other music. Ideally, I'd like the music to start when the minigame menu loads and then continue looping throughout the minigame (regardless of state change).

 

Here's my code:

//MINIMENU FILE'use strict';var MinimenuState = function (game) {  this.game = game;};var music;MinimenuState.prototype = {  constructor: BootState,  preload: function() {    this.game.load.image('background', 'javascripts/modules/units/backgrounds/minigamebackground-alt.jpg');    this.game.load.image('menu', 'javascripts/modules/units/backgrounds/minigame-intro.png');    this.game.load.image('playbutton', 'javascripts/modules/units/sprites/playbutton.png');    this.game.load.image('returnbutton', 'javascripts/modules/units/sprites/returnbutton.png');    this.game.load.audio('music', '/javascripts/modules/units/music/Firefly.mp3');  },  create: function() {    this.background = this.game.add.image(0,0, 'background');    this.menu = this.game.add.image(0,0, 'menu');    this.playbutton = this.game.add.button(600, 450, 'playbutton', this.playgame);    this.returnbutton = this.game.add.button(175, 450, 'returnbutton', this.gotostory);    this.highscore = this.game.add.text(670, 375, window.minigame.checkhighscore(), { font: '30px Arial', fill: '#ffffff'});    this.score = this.game.add.text(335, 375, window.minigame.checkscore(), { font: '30px Arial', fill: '#ffffff'});    this.music = music = this.game.add.audio('music');    this.music.volume = 3;    this.music.loop = true;    this.music.play();  },  playgame: function() {    this.music.stop();    this.game.state.start('Minigame', true, true);  },  gotostory: function() {    this.music.stop();    this.game.state.start('Stream', true, true);  },  update: function() {}};

// MINIGAME FILE'use strict';var MinigameState = function (game) {  this.game = game;  this.arrayOfFlies = [];  this.highscore = 0;  this.score = 0;};MinigameState.prototype = {  constructor: BootState,  createFireFly: function()  {    var fly = new FireFly(this.game, this.game.world.randomX, this.game.world.randomY);    this.game.add.existing(fly);    this.arrayOfFlies.push(fly);    fly.inputEnabled = true;    fly.input.useHandCursor = true;    fly.events.onInputDown.add(this.destroySprite, this);    return fly;  },  preload: function() {    // load the images //    this.game.load.image('background', '/javascripts/modules/units/backgrounds/minigamebackground-alt.jpg');    this.game.load.image('bugjar', '/javascripts/modules/units/sprites/bugjar.png');    this.game.load.image('bugnet', '/javascripts/modules/units/sprites/bugnet.png');    this.game.load.image('firefly', '/javascripts/modules/units/sprites/firefly.png');    this.game.load.image('fireflysurprise', '/javascripts/modules/units/sprites/firefly-surprise.png');    // load the sounds and music //    this.game.load.audio('fireflybuzz', '/javascripts/modules/units/sounds/firefly_buzzing.wav');    this.game.load.audio('netswish', '/javascripts/modules/units/sounds/net_swish.mp3');    this.game.load.audio('firefly-catch', '/javascripts/modules/units/sounds/firefly_surprise.mp3');    this.game.load.audio('music', '/javascripts/modules/units/music/Firefly.mp3');  },  create: function() {    // initiate game physics //    this.game.physics.startSystem(Phaser.Physics.ARCADE);        // add images//    this.background = this.game.add.image(0,0, 'background');    this.bugjar = this.game.add.image(0,0, 'bugjar');    // add audio    this.netswish = this.game.add.audio('netswish');    this.fireflycatch = this.game.add.audio('firefly-catch');    this.music = this.game.add.audio('music');    this.music.volume = 3;    this.music.loop = true;    this.music.play();    this.fireflybuzz = this.game.add.audio('fireflybuzz');    this.fireflybuzz.volume = 2;    this.fireflybuzz.loop = true;    this.fireflybuzz.play();     // Create a custom timer//    this.timer = this.game.time.create();          // Create a delayed event 1m and 30s from now//    this.timerEvent = this.timer.add(Phaser.Timer.SECOND * 30, this.endTimer, this);          // Start the timer//    this.timer.start();    for (var i=0; i < 6; i++) {      this.createFireFly();    }        // add bugnet sprite and set up bugnet physics//    this.bugnet = this.game.add.sprite(400, 300, 'bugnet');    this.bugnet.anchor.setTo(1,1);    this.game.physics.enable(this.bugnet, Phaser.Physics.ARCADE);    // rotates bugnet when clicked //    var orig = this.bugnet.angle;    var tween;        this.game.input.activePointer.leftButton.onDown.add(function(e) //jshint ignore:line    {      tween = this.game.add.tween(this.bugnet).to({ angle: this.bugnet.angle + 179 }, 100, 'Sine.easeInOut', true, -1);      this.netswish.play();    }.bind(this), null, 0);        this.game.input.activePointer.leftButton.onUp.add(function(e) //jshint ignore:line    {      tween.stop();      this.game.add.tween(this.bugnet).to({ angle: orig }, 100, 'Sine.easeInOut', true, -1);    }.bind(this), null, 0);    // displays the score and sets a default of 0 //     this.score = 0;    this.labelScore = this.game.add.text(30, 55, '0', { font: '30px Arial', fill: '#ffffff' });  },  update: function()  {    this.bugnet.fixedRotation = this.game.physics.arcade.moveToPointer(this.bugnet, 0, this.game.input.activePointer, 50);  },  destroySprite: function (firefly) {    this.fireflycatch.play();    this.arrayOfFlies = this.arrayOfFlies.filter(function(fly)    {      return fly !== firefly;    })    firefly.destroy();          if (this.timer.running){          setTimeout(function(){            this.createFireFly();          }.bind(this), 1500);    };    // updates the score    this.updateScore();  },  updateScore: function () {    // adds 1 to the score when bug is caught //    this.score += 1;    // changes the score text to the new score //    if (this.labelScore) {      this.labelScore.text = this.score;      }  },    checkhighscore: function() {    if (this.score > this.highscore){        this.highscore = this.score;        return this.highscore      } else {        return this.highscore    };  },  checkscore: function() {    return this.score  },  render: function () {    // If our timer is running, show the time in a nicely formatted way, else show 'Done!'        if (this.timer.running) {      this.game.debug.text(this.formatTime(Math.round((this.timerEvent.delay - this.timer.ms) / 1000)), 480, 70, "white", "60px Arial");    }    else {      this.game.world.removeAll();      clearTimeout(this.fireflytimer);      this.checkhighscore();      this.game.input.activePointer.leftButton.onDown.removeAll();      this.music.stop();      this.fireflybuzz.stop();      this.fireflycatch.stop();      this.game.state.start('Minimenu', true, false);    }  },  endTimer: function() {    // Stop the timer when the delayed event triggers    this.timer.stop();  },  formatTime: function(s) {    // Convert seconds (s) to a nicely formatted and padded time string    var seconds = "0" + (s);    return seconds.substr(-2);     }};

Why are they doubling up and looping over each other? This bug is frustrating me. T__T

[EulaConstellar]

Also, on top of that, after the player returns to the Minigame menu, the occasional firefly will still continue to spawn. Clicking on it to destroy it ends up breaking the Play button.

[tips4design]

One note would be this: don't add logic in the render loop. Place it in the update loop instead.

[EulaConstellar]

Cool! I swapped that into update and it still works fine. Thanks! 
 

Out of curiosity (and inexperience with Phaser), what would the Render function mostly be used for?

[tips4design]

Cool! I swapped that into update and it still works fine. Thanks! 

 

Out of curiosity (and inexperience with Phaser), what would the Render function mostly be used for?

 

Well, it is mostly used for drawing the debug text. The update loop gets called 60 times a second in general. The render loop can go below that if FPS drops, thus you might have multiple update calls before a single render.

[EulaConstellar]

I'm still having problems stopping my click events and music from transferring from one state to another when I do a state change. It causes my music to double loop and for click events to persist from one state to another (when they should stop after the state has been left). PLEASE help? I have to demo this game in front of an audience in 4 days and I can't do that with this big of a bug!