JavaScript 中增加音量时的奇怪计数

Question

我有一个文件 HTML 只是为了测试 play/pause 和 increase/decrease 音量与 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>

Answer 1

我认为是关于

的位置

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

你在函数的开头调用它。这样您就可以显示上次更新而不是当前更新。

放在函数的末尾。

提示：

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

Answer 2

我已经在我的浏览器 firefox 76.0.0 中测试了你的代码。 firefox 默认阻止音频，我授予它权限并且它工作正常。图片描述在这里]1

JavaScript 中增加音量时的奇怪计数

Strange count when increasing the audio volume in JavaScript

html

javascript

google-chrome-devtools