Как создать ховер js прогрессбар? - PullRequest
Новая
       69

Как создать ховер js прогрессбар?

0 голосов
/ 18 марта 2020

Я пытаюсь воспроизвести звук в моем приложении: 

HowerJs
<script src="Scripts/Javascript/howerljs/howler.js"></script>
<div onclick="play()">Play</div>
<div onclick="togglePlay()">Pauze</div>
<script>
    var sound = new Howl({
        src: ['Scripts/Javascript/howerljs/file_example_OOG_1MG.ogg']
    });
    function play() {
        sound.play();
    }
    function togglePlay() {
        return sound.playing() ? sound.pause() : sound.play();
    }
</script>

Это отлично работает. Я могу начать / приостановить трек. Но похоже, что Howler не поставляется с любым пользовательским интерфейсом, и я не могу найти примеры или документацию о том, как создать индикатор выполнения. Я что-то пропустил?

1 Ответ

1 голос
/ 18 марта 2020

В этой библиотеке явно отсутствует документация. Да, он не поставляется с пользовательским интерфейсом, вам нужно нарисовать все изменения самостоятельно. Вот мой пример для отображения прогресса, который я смог извлечь из кода. Здесь requestAnimationFrame вызывается рекурсивно для получения текущего состояния аудио и изменения стилей. Для лучшего понимания см. Пример игрока https://github.com/goldfire/howler.js/tree/master/examples/player

<style>
    #progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        z-index: -1;
    }
</style>

<div id="progress"></div>

<script src="../../src/howler.core.js"></script>
<script>
    var progress = document.getElementById('progress');

    function step() {
        var seek = sound.seek() || 0;
        progress.style.width = (((seek / sound.duration()) * 100) || 0) + '%';
        if (sound.playing()) {
            requestAnimationFrame(step);
        }
    }

    var sound = new Howl({
        src: ['../player/audio/80s_vibe.mp3'],
        onplay: function() {
            requestAnimationFrame(step);
        },
    });
    sound.play();
</script>
...