javascript 每次点击音频都会得到赞美

Question

我今天在我的 Javascript 中实现了一些音频文件，它工作正常。但我注意到随着随后的每一次点击，声音都会变大。我已经使用了 "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()。如果没有，则创建一个新的音频对象。

javascript 每次点击音频都会得到赞美

javascript audio gets lauder each click

javascript

html5-audio