当前位置: 首页 > 工具软件 > howler.js > 使用案例 >

Howler.js:用于现代Web的音频库

谷梁襦宗
2023-12-01

Howler.js提供了一个现代音频库,支持Web Audio APIHTML5 Audio的回退机制。该项目致力于简化与使用JavaScript开发跨平台音频相关的开发工作。

Howler.js为通过JavaScript使用音频提供了一致的API,可以控制常见的音频模式,包括播放、暂停、搜索速率、淡入淡出和循环播放。在可能的情况下,音频文件会被自动缓存起来,用以提高播放性能。

\u0026lt;script src=\u0026quot;/path/to/howler.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\u0026lt;script\u0026gt;    var sound = new Howl({      src: ['sound.webm', 'sound.mp3']    });\u0026lt;/script\u0026gt;

或者可以利用ES模块将Howler.js作为依赖导入:

import {Howl, Howler} from 'howler';const {Howl, Howler} = require('howler');var sound = new Howl({  src: ['sound.mp3']});sound.play();

Howler.js提供了两个用于处理音频的高级构造:

  • Audio Sprites——使用Sprite定义和控制音频文件的片段,以实现精确播放,并可以使用更小的资源;
  • Spatial Audio——提供立体声声像或3D游戏音频等音效。

处理音频的一个重大挑战是支持编码解码。Howler.js支持目前浏览器提供的14种不同形式,包括MP3、OPUS、OGG、WEBM等。

Howler.js支持所有现代Web浏览器,还支持Internet Explorer 9,还被用在使用Cordova基于HTML5的Facebook Instant Games平台的的混合移动应用程序中。

众所周知,Web Audio API的当前实现面临着若干挑战。规范五年多来一直在发生变化,对关键特性进行了几轮的修改。最近通过AudioWorklets将音频处理移到一个单独的线程中,类似于Web Worker。Web Audio的浏览器支持仍然不一致,Howler.js可帮助开发人员避开这些问题。

最近的一个挑战是在播放音频剪辑之前引入用户交互。

SitePen高级软件工程师Paul Shannon向InfoQ分享了他有关Howler.js以及Web Audio的现状和未来的想法:

Web Audio就像音频方面的Canvas,提供低级别的声音访问。遵循这个逻辑,Howler.js之于Web  Audio就像Threejs之于3D图形。或许一旦Web Audio得到大规模采用,我们就会看到用于音频方面的Instagram风格的过滤器出现!

几家大型技术和媒体公司正在使用Howler.js,包括谷歌、迪士尼、Mozilla和乐高。

Howler.js具有模块化架构,gzip压缩后只有7KB。Howler.js基于MIT开源许可。欢迎通过Howler.js GitHub项目加入贡献行列。

查看英文原文Howler.js Audio Library for the Modern Web

 类似资料: