时间戳

首页 > 解决方案 > HTML 音频 - 提供的音量 (-0.1) 超出范围 - 数学最大值不起作用

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

问题描述

我创建了一个音量减小按钮，我试图防止音量低于 0.0。由于某种原因，Math.max 无法正常工作。通过检查当前值/时间不确定我做错了什么。

如何添加一个逻辑，如果音量等于 0.0 则返回并且什么都不做？

请参阅 -> 向下键 keyCode 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;
        }

        // Left arrow
        if (e.keyCode === 37) {
            // Backward by 10 sec
            audio.currentTime -= 10;
        }

        // Up arrow
        if (e.keyCode === 38) {
            // Volume up
            if (audio.volume < 1.0) {
                audio.volume += 0.1;
            }
        }

        // Arrow down
        if (e.keyCode === 40) {
            // Volume down

            if (audio.volume === Math.max(0, audio.volume - 0.01)) {
                return;
            }

            if (audio.volume >= 0.0) {
                audio.volume -= 0.1;
            }
        }
    };

    audio.addEventListener('play', onPlaying);
    audio.addEventListener('pause', onPaused);
    audio.addEventListener('timeupdate', onTimeUpdate);

    document.addEventListener('keydown', onKeyPress);
    progress.addEventListener('click', onProgressUpdate);
    playButton.addEventListener('click', onPlayStart);
})();

标签： javascript

解决方案

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

这意味着，在增量的情况下，它会一直添加直到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;

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

// 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);
}

推荐阅读