Install

npm install w-howler

yarn add w-howler

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/[email protected]/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>

</body>