howler.js是现代网络的音频库。它默认为Web Audio API,而向后兼容为html5 Audio。这使得在所有平台上使用JAVAScript进行音频操作变得轻松可靠。
https://github.com/goldfire/howler.js
截图体验不佳,可以直接看demo
npm install howler
#或
yarn add howler
#或
bower install howler
//使用
<script src="/path/to/howler.js"></script>
<script>
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
</script>
import {Howl, Howler} from 'howler';
const {Howl, Howler} = require('howler');
最基本播放mp3
var sound = new Howl({
src: ['sound.mp3']
});
sound.play();
更多配置
var sound = new Howl({
src: ['sound.webm', 'sound.mp3', 'sound.wav'],
autoplay: true,
loop: true,
volume: 0.5,
onend: function() {
console.log('Finished!');
}
});
定义声音
var sound = new Howl({
src: ['sounds.webm', 'sounds.mp3'],
sprite: {
blast: [0, 3000],
laser: [4000, 1000],
winner: [6000, 5000]
}
});
// Shoot the laser!
sound.play('laser');
事件监听
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// 首次通话后清除监听器。
sound.once('load', function(){
sound.play();
});
// 声音播放完毕时触发。
sound.on('end', function(){
console.log('Finished!');
});
控制多种声音:
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// 播放返回可以传递的唯一声音ID
//
var id1 = sound.play();
var id2 = sound.play();
// Fade out the first sound and speed up the second.
sound.fade(1, 0, 1000, id1);
sound.rate(1.5, id2);
ES6语法
import {Howl, Howler} from 'howler';
// 设置新的 Howl.
const sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// 播放声音
sound.play();
// 改变全局音量
Howler.volume(0.5);
howler.js让Web音频开发变得简单可靠,是一个值得推荐的音频库,如果你有这方面的需求,不妨尝试一下!