Блог

Я создал кнопку уменьшения громкости, я пытаюсь предотвратить снижение громкости ниже 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;
        }

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

Вы могли бы использовать эти функции ниже. Они проверяют, достигло ли значение определенного порога, и производят вычисление, если нет, в противном случае оно просто возвращает значение.

Это означает, что в случае приращения он продолжает добавляться до 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);
}