How to create a Howerjs progressbar?

Question

I'm trying to get some audio to play on my application:

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>

This works fine. I can start/pause the track. But it seems that Howler does not come with any UI and I can't find any examples or documentation on how to create a progress bar. Am I missing something?

Answer 1

There is clearly a lack of documentation in this library. Yes, its does not come with UI, you need to draw all the changes yourself. Here is my example to display the progress that I was able to take from the code. Here, the requestAnimationFrame is recursively called to obtain the current state of the audio and change the styles. For a better understanding, see the example player 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>