w-howler
v1.0.22
Published
A wrapper howler for audio player.
Downloads
215
Maintainers
semisphereReadme
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
howlerandeventemitter3.
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>