在 JavaScript 中增加音量时出现奇怪的计数答案

【问题标题】：Strange count when increasing the audio volume in JavaScript在 JavaScript 中增加音量时出现奇怪的计数
【发布时间】：2020-09-02 18:26:09
【问题描述】：

我有一个 HTML 文件，只是为了测试 JavaScript 中的事件侦听器的播放/暂停和增加/减少音量。我无法准确描述我正在经历的异常情况。我确信有一个合乎逻辑的解释，但我无法理解它。

基本上，向上和向下箭头键会改变音频的音量。但是，当我以某种模式按下键时，例如向上，向上，向下，向下，向上，向下，向上，向下 - 计数不遵循任何数学规则：D 不是增加音量，而是减少了指定值，反之亦然。

我确定如果你在回答这个问题，你知道怎么做，但要测试它，只需更改 src 内的音频文件的名称并将相同的文件放入项目中。然后只需在您选择的浏览器中本地加载 HTML 并进行调试。将显示当前音量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio API</title>
</head>
<body>
<audio>
    <source src="njaar.mp3" type="audio/mpeg">
</audio>

<p id="currentVolume"></p>

<script>
    var audio;
    window.addEventListener('load', init, false);
    window.addEventListener("click", playPause, false);
    window.addEventListener("keydown", changeVolume, false);
    function init() {
        audio = document.getElementsByTagName('audio')[0];
        audio.play();
    }
    function playPause() {
        if (audio.paused) {
            audio.play();
        } else {
            audio.pause();
        }
    }
    function changeVolume() {
        document.getElementById("currentVolume").innerHTML = audio.volume;
        // if (audio.volume === 1) {
        //     document.getElementById("currentVolume").innerHTML = audio.volume;
        // }
        if (event.key === "ArrowUp") {
            try {
                audio.volume = audio.volume + 0.05;
            } catch (e) {
                console.error("Exception: " + e + "has been caught!");
            }
        }
        if (event.key === "ArrowDown") {
            try {
                audio.volume = audio.volume - 0.05;
            } catch (e) {
                console.error("Exception: " + e + "has been caught!");
            }
        }
        if (audio.volume < 0.05) {
            audio.volume = 0;
        }
    }
</script>
</body>
</html>

【问题讨论】：

按这个序列的速度有关系吗？
不，没关系，保罗是对的。

标签： javascript html google-chrome-devtools

【解决方案1】：

我认为是关于位置的

document.getElementById("currentVolume").innerHTML = audio.volume;

你在函数的开头调用它。这样一来，您将显示上次更新，而不是当前更新。

把它放在函数的末尾。

提示：

添加event作为参数
考虑使用+= 和-=

【讨论】：

Paul 是对的，你可以在这里试试jsfiddle

【解决方案2】：

我已经在我的浏览器 firefox 76.0.0 中测试了您的代码。 firefox默认阻止音频，我给了它权限，它工作正常。图片说明]1

【讨论】：

您看到发布的其他解决方案了吗？多次使用向上和向下键时，您不会发生这种情况吗？