W-howler NPM | npm.io

w-howler

A wrapper howler for audio player.

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

audio play: web [source code]

Installation

In a browser(UMD module):

Note: w-howler is not dependent on any package, has included howler and eventemitter3.
Note: umd file includes with lodash-es, by using tree-shaking for dead-code elimination.

Necessary Add script for w-howler.

<script src="https://cdn.jsdelivr.net/npm/w-howler@1.0.22/dist/w-howler.umd.js"></script>

Example for audio play:

Link: [dev source code]
<body>

<script>
    let WHowler = window['w-howler']
</script>

<div style="margin:20px; padding-bottom:10px;">
    <div style="font-size:1.5rem; padding-bottom:5px;">1. Normal play</div>
    <input type="file" onchange="whPlay1(this)">
    <pre id="msg1"></pre>
    <button onclick="whStop1()">stop</button>
</div>

<script>
    let wh1 = new WHowler()

    function whPlay1(ele){
        let files=ele.files
        let file=files[0]
        let src=URL.createObjectURL(file)

        //play
        wh1.play(src)

        //getSeek
        setInterval(function(){
            document.querySelector('#msg1').innerHTML=JSON.stringify(wh1.getSeek())
        },1000)

    }

    function whStop1(){
        wh1.stop()
    }

</script>

<div style="margin:20px; padding-bottom:10px;">
    <div style="font-size:1.5rem; padding-bottom:5px;">2. Function play</div>
    <input type="file" onchange="whPlay2(this)">
    <pre id="msg2"></pre>
    <button onclick="whStop2()">stop</button>
</div>

<script>
    let wh2 = new WHowler()

    function whPlay2(ele){
        let files=ele.files
        let file=files[0]
        let src=URL.createObjectURL(file)

        //play
        wh2.play(src)

        //getSeek
        setInterval(function(){
            document.querySelector('#msg2').innerHTML=JSON.stringify(wh2.getSeek())
        },1000)

        //seek to 50% in 6 sec.
        setTimeout(function(){
            wh2.seek(0.5)
        },6000)

        //pause in 9 sec.
        setTimeout(function(){
            wh2.pause()
        },9000)

        //resume in 12 sec.
        setTimeout(function(){
            wh2.resume()
        },12000)

    }

    function whStop2(){
        wh2.stop()
    }

</script>

package tool howler audio player browser

eventemitter3 howler lodash-es

@infinitebrahmanuniverse/nolb-w-@everything-registry/sub-chunk-3107 w-audioplayer-vue

2 months ago

2 months ago

2 months ago

1 year ago