現代Web開發中的JavaScript音頻庫——howler.js介紹Github功能特性瀏覽器支持情況Demo開始使用范例總結

發布時間：2023-07-03 12:19:18 作者：網友整理

介紹

howler.js是現代網絡的音頻庫。它默認為Web Audio API，而向后兼容為html5 Audio。這使得在所有平臺上使用JAVAScript進行音頻操作變得輕松可靠。

Github

https://github.com/goldfire/howler.js

功能特性

單個API滿足所有音頻需求
默認為Web Audio API，向后兼容為HTML5 Audio
處理跨環境的極端情況和錯誤
支持所有編解碼器以全面支持跨瀏覽器
自動緩存以提高性能
單獨，分組或全局控制聲音
一次播放多種聲音
簡單的聲音元素定義和播放
完全控制衰落，速率，搜尋，音量等
輕松添加3D空間聲音或立體聲聲像
模塊化-使用你想要的內容并易于擴展
沒有外部依賴，只有純JavaScript
壓縮后7kb大小

瀏覽器支持情況

google Chrome 7.0+
Internet Explorer 9.0+
Firefox 4.0+
Safari 5.1.4+
Mobile Safari 6.0+ (after user input)
Opera 12.0+
Microsoft Edge

Demo

截圖體驗不佳，可以直接看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);