Search code examples
javascripthtmlplaysound

JavaScript return text + playsound


So i have a little app based on game (rock paper scissors) but i want to return the text with the winner and a sound effect... So i have 2 little mp3 files applause.mp3 and fail.mp3 How can i make to return the text and to play the file :( ? i tryed few things but it tells me "undefined" or other errors... :( or maybe it returns me the text buy i couldnt hear the sound..

var compare = function(choice1) {
    var winSound = document.getElementById('./sounds/Applause.mp3');  
    var lostSound = document.getElementById('./sounds/Fail.mp3');
    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "rock";
    } else if(computerChoice <= 0.67) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissors";
    }
    if (choice1 === computerChoice) {
        return('The result is a tie!');
      }
    else if (choice1 === 'rock') {
        if (computerChoice === 'scissors') {
           result = 'You are the winner.' + winSound.play();
        } else {
            return 'Computer is the winner.';
        }
    }
    else if (choice1 === 'paper') {
        if (computerChoice === 'rock') {
            return 'You are the winner.';
        } else {
            return 'Computer is the winner.';
        }
    }
    else {
        if (computerChoice === 'rock') {
            return 'You are the winner.';
        } else {
            return 'Computer is the winner.';
        }
    }
};

var game = function(choice1) {
    document.getElementById('result').innerHTML = compare(choice1);
};

Solution

  • You create an audio object:

    var audio = new Audio();
    

    Then assign the src to the sound you want to play in your callback, and play:

    audio.src = './sounds/Applause.mp3';
    audio.load();
    audio.play();
    
    return(text);
    

    You may want to cache the sounds beforehand so that there is no delay.