CODEWITHSUNDEEP
javascriptaudiohtml5-canvasdelay
Connor
Connor

Reputation: 29

How can I delay an alert and reload so an audio file can play in javascript?

I am making a small game to better try and learn javascript. So far I think it is pretty good. There is a sound when the monster fires a shot and if a shot hits the player. However I can not get it to play a sound when the player either loses the game or wins the game. I checked to make sure it was not a problem with the audio file by playing it on its own. Here are the win and lose functions:

function gameReset(){ //If the player has lost
            if(lives < 0){
                 gameOverSound = new Audio("gameOver.wav"); 
                 gameOverSound.play();
                 alert("You lost. Click 'Ok' to restart the game");
                 location.reload();  
            }
        }

    function winCondition(){ //If the player has won
            if(monsterHP < 0){
                 monsterDeathSound = new Audio("explosion.mp3"); //Assigns the monster's death sound
                 monsterDeathSound.play();
                 alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
                 location.reload();
                }
            }

I have tried using setTimeout(,) and putting the alert and reload in a separate function then calling it but it did not work although I might have did it wrong. I need a small delay probably like 3 seconds. Thanks in advance. Edit:I have implemented the .onended. I have a setInterval that updates the game. When the 2 condition functions(win/lose) the function is run multiple times before it stops. If I comment it out of the update function the win and lose functions don't run at all. So I need to make it so those 2 functions only run once. I have tried making a variable and setting it to false then in the function setting it true so it can not run again but that did not work.

function winCondition(){ //If the player has won
            if(monsterHP < 0){
                 monsterDeathSound = new Audio("explosion.mp3"); //Assigns the monster's death sound
                console.log("d");
                 monsterDeathSound.play();
                monsterDeathSound.onended = function() {
      alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
      location.reload();
                }
                //alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
                 //location.reload();
                }
            }

    function update(){
        drawEverything();
        collision();
        movement();
        //gameReset();
        playerAttack();
        //winCondition();
    }
    setInterval(update,1000/framesPerSecond)

Upvotes: 1

Views: 342

Answers (2)

yuriy636
yuriy636

Reputation: 11661

If you want to add a delay between playing the sound and the alert, you can do it by two ways:

Note that .play()ing a sound is asynchronous: the code will inmediately keep executing even if the audio hasn't started playing yet, that's why you need to either wait for the sound to end (recommended, in my opinion), or use setTimeout

onended audio event

var lives = -1;
var monsterHP = -1;

function gameReset() { //If the player has lost
  if (lives < 0) {
    gameOverSound = new Audio('https://soundbible.com/grab.php?id=2167&type=mp3');
    gameOverSound.play();
    gameOverSound.onended = function() {
      alert("You lost. Click 'Ok' to restart the game");
      location.reload();
    }
  }
}

function winCondition() { //If the player has won
  if (monsterHP < 0) {
    monsterDeathSound = new Audio('https://soundbible.com/grab.php?id=2182&type=mp3'); //Assigns the monster's death sound
    monsterDeathSound.play();
    monsterDeathSound.onended = function() {
      alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
      location.reload();
    }
  }
}
<button onclick="gameReset()">reset</button>
<button onclick="winCondition()">win</button>

setTimeout function

var lives = -1;
var monsterHP = -1;

function gameReset() { //If the player has lost
  if (lives < 0) {
    gameOverSound = new Audio('https://soundbible.com/grab.php?id=2167&type=mp3');
    gameOverSound.play();
    setTimeout(function() {
      alert("You lost. Click 'Ok' to restart the game");
      location.reload();
    }, 3000);
  }
}

function winCondition() { //If the player has won
  if (monsterHP < 0) {
    monsterDeathSound = new Audio('https://soundbible.com/grab.php?id=2182&type=mp3'); //Assigns the monster's death sound
    monsterDeathSound.play();
    setTimeout(function() {
      alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
      location.reload();
    }, 3000);
  }
}
<button onclick="gameReset()">reset</button>
<button onclick="winCondition()">win</button>

Upvotes: 1

Mr Zach
Mr Zach

Reputation: 515

Did you try to se with the browsers developer tool if the browser is trying to load the file?

Did you try this setTimeout(function(){ alert("You lost. Click 'Ok' to restart the game"); location.reload();},500);

Upvotes: 0

Related Questions