javascript audio получает lauder каждый щелчок

Question

Я реализовал некоторые аудиофайлы сегодня в своем Javascript, и он отлично работает. Но Я заметил, что с каждым последующим щелчком звук становится громче. Я alreadio использовал метод «Audio.volume», но не повезло.

Мой код:

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(); 
})(); 

Любая помощь будет оценена. Ура!

Answer 1

Я уверен, причина в том, что вы делаете новый объект Audio с каждым щелчком мыши.

Вместо того, чтобы делать это с каждым щелчком мыши:

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

сделать проверку, чтобы увидеть, если аудио уже существует. если это так, то просто сделайте audio.play(). Если это не так, THEN вы создаете новый аудио объект.