HTML 音频 - 提供的音量 (-0.1) 超出范围 - 数学最大值不起作用

Question

我创建了一个音量减小按钮，我试图防止音量低于 0.0。由于某种原因，Math.max 无法正常工作。通过检查当前值/时间不确定我做错了什么。如何添加一个逻辑，即如果音量等于 0.0 则返回并且不执行任何操作？请参阅 -> 向下箭头键代码 40。(() => {    const audio = document.querySelector('audio');    const playButton = document.getElementById('play');    const progress = document.querySelector('.player__progress');    const progressBar = document.querySelector('.player__progress__inner');    const next = document.getElementById('next');    const prev = document.getElementById('previous');    const title = document.querySelector('.title');    const status = document.querySelector('.status');    const poster = document.querySelector('.player__image');    if (!audio) {        return;    }    // On play button click.    const onPlayStart = () => {        audio.paused ? audio.play() : audio.pause();    };    // On audio playing.    const onPlaying = () => {        playButton.innerHTML = `<i class="fas fa-pause"></i>`;        // Change title if is currently playing.        // status.innerText = `status: Wordt afgespeeld.`;    };    // On audio paused.    const onPaused = () => {        playButton.innerHTML = `<i class="fas fa-play"></i>`;        // Change title if is currently paused.        // status.innerText = `status: Is gepauzeerd.`;    };    // Update progress bar    const onTimeUpdate = () => {        const percent = (audio.currentTime / audio.duration) * 100;        progressBar.style.width = `${percent}%`;    };    // Update progress on click    const onProgressUpdate = (e) => {        audio.currentTime = (e.offsetX / progress.clientWidth) * audio.duration;    };    const onKeyPress = (e) => {        e.preventDefault();        // Spacebar        if (e.keyCode === 32) {            audio.paused ? audio.play() : audio.pause();        }        // Right arrow        if (e.keyCode === 39) {            // Forward by 10 sec.            audio.currentTime += 10;        }

Answer 1

您可以使用下面这些功能。他们检查一个值是否达到某个阈值，如果没有达到则进行计算，否则只返回该值。

这意味着，对于增量，它会继续添加，直到1达到，然后返回1而不向上计数，从而有效地停止增量。

计算是因为浮点数不精确。这可确保每个值都是一位小数点数字（0.1、0.2、0.3等）。

const incrementVolume = value => 

    value < 1 ? (value * 10 + 1) / 10 : value;

const decrementVolume = value => 

    value > 0 ? (value * 10 - 1) / 10 : value;

然后在 if 语句中实现这些函数，并在其中重新分配volume属性。

// Arrow up

if (e.keyCode === 38) {

  // Volume up

  audio.volume = incrementVolume(audio.volume);

}

// Arrow down

if (e.keyCode === 40) {

  // Volume down

  audio.volume = decrementVolume(audio.volume);

}