javascript audio gets lauder each click

Question

I was implementing some audio files today in my Javascript and it works fine. But I noticed that with each subsequent click the sound gets louder. I alreadio used the "Audio.volume" method but no luck.

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

Any help will be much appreciated. Cheers!

Answer 1

I'm fairly certain the reason is that you're making a new Audio object with every single click.

Instead of doing this with every click:

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

do a check to see if audio already exists. if it does, then simply do audio.play(). If it does not, THEN you make a new audio object.