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 =>&nbsp;&nbsp; &nbsp; value < 1 ? (value * 10 + 1) / 10 : value;const decrementVolume = value =>&nbsp;&nbsp; &nbsp; value > 0 ? (value * 10 - 1) / 10 : value;然后在 if 语句中实现这些函数，并在其中重新分配volume属性。// Arrow upif (e.keyCode === 38) {&nbsp; // Volume up&nbsp; audio.volume = incrementVolume(audio.volume);}// Arrow downif (e.keyCode === 40) {&nbsp; // Volume down&nbsp; audio.volume = decrementVolume(audio.volume);}