如何创建一个 Howerjs 进度条？

Question

我正在尝试让一些音频在我的应用程序上播放：

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>

这很好用。我可以 start/pause 轨道。但似乎 Howler 没有附带任何 UI，而且我找不到任何关于如何创建进度条的示例或文档。我错过了什么吗？

Answer 1

这个库中显然缺少文档。是的，它没有UI，你需要自己绘制所有的变化。这是我的示例，用于显示我能够从代码中获得的进度。这里递归调用 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>

如何创建一个 Howerjs 进度条？

How to create a Howerjs progressbar?

javascript

howler.js