javascript audio obtient lauder chaque clic

Question

Je mettais en place des fichiers audio aujourd'hui dans mon Javascript et ça marche bien. Mais J'ai remarqué qu'à chaque clic suivant le son devient plus fort. J'ai déjà utilisé la méthode "Audio.volume" mais pas de chance.

Mon code:

var AppController = (function() { 
    var correctItem, secondItem, thirdItem, selectedItems, selectedItemsShuffled; 

var rotateImage = function() { 
    var i = 0; 
    var randomNumbers = createThreeRandomNumbers(); 

    var interval = window.setInterval(function() { 
      i++; 
      document.getElementById("imageToRotate").src= "img/" + items.images[i].imageLink; 

      if (i === items.images.length -1) { 
       i = -1; 
      } 
    }, 125); 

    var clearData = function() { 
     correctItem = ""; 
     secondItem = ""; 
     thirdItem = ""; 
     selectedItems = ""; 
     selectedItemsShuffled = ""; 
     removeNodeChildren("button-1"); 
     removeNodeChildren("button-2"); 
     removeNodeChildren("button-3"); 
    }; 



    var removeNodeChildren = function (obj) { 
     var myNode = document.getElementById(obj); 
     while (myNode.firstChild) { 
      myNode.removeChild(myNode.firstChild); 
     } 
    }; 


    var resetGame = function() { 
     clearData(); 
     document.getElementById("buttonWrapper").classList.remove("show"); 
     rotateImage(); 
    } 


    document.getElementById("imageToRotate").addEventListener("click", function (e) { 

     // select 3 items 
     correctItem  = getSelectedItemDetails(e); 
     secondItem = getRandomItem(correctItem); 
     thirdItem = getSecondRandomItem(correctItem, secondItem); 
     selectedItems = [correctItem, secondItem, thirdItem]; 
     selectedItemsShuffled = shuffleArray(selectedItems); 

     // create the numbers 1 to 3 randomly 
     var order = createThreeRandomNumbers(); 


     // remove the rotating effect 
     clearInterval(interval); 

     // set the images to the buttons in a random order. 
     setItemsToButtons(order, selectedItemsShuffled); 

     //show the buttons 
     showButtons(); 

     // Create an event which triggers when a button is clicked. 
     document.getElementById("buttonWrapper").addEventListener("click", function(e) { 
      var valueOfButtonPressed = e.srcElement.innerText.toLowerCase(); 
      var clickedButton = e.srcElement.id; 

      if (valueOfButtonPressed === correctItem) { 
       document.getElementById(clickedButton).innerHTML = e.srcElement.innerText.toLowerCase() + '<span class="icon"><i class="fa fa-check green" aria-hidden="true"></i></span>'; 

       if (!audio) { 
        var audio = new Audio("audio/correct.mp3"); 
       } 

       audio.play(); 
       audio.volume = 0.5; 

       setTimeout(resetGame, 5000); 

      } else { 
       document.getElementById(clickedButton).innerHTML = e.srcElement.innerText.toLowerCase() + '<span class="icon"><i class="fa fa-times red" aria-hidden="true"></i></span>'; 

       if (!audio) { 
        var audio = new Audio("audio/wrong.mp3"); 
       } 

       audio.play(); 
       audio.volume = 0.5; 

       setTimeout(resetGame, 5000); 
      } 
     }); 
    }); 
}; 




// 1: hide the buttons 
hidebuttons(); 

// 2: Replace the title 
replaceTitle("Animals"); 

// 3: set up image rotation until it's clicked. 
rotateImage(); 
})(); 

Toute aide sera très appréciée. À votre santé!

Answer 1

Je suis à peu près certain que la raison est que vous créez un nouvel objet Audio à chaque clic.

au lieu de le faire à chaque clic:

var audio = new Audio("audio/correct.mp3"); 

faire une vérification pour voir si l'audio existe déjà. Si c'est le cas, faites simplement audio.play(). Si ce n'est pas le cas, ALORS vous faites un nouvel objet audio.