时间戳

首页 > 解决方案 > How to create a Howerjs progressbar?

javascript - How to create a Howerjs progressbar?

问题描述

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?

标签： javascripthowler.js

解决方案

这个库中显然缺乏文档。是的，它不附带 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>

推荐阅读