Howler.js、モダンなWebのためのオーディオライブラリ

Howler.jsは、Web Audio APIのサポートとHTML5 Audioへのフォールバックメカニズムを備えたモダンなオーディオライブラリを提供する。このプロジェクトが目指しているのは、JavaScriptにおけるオーディオを用いたクロスプラットフォーム開発を簡単にすることだ。

Howler.jsはJavaScriptでオーディオを扱うための一貫したAPIを提供し、再生、停止、シーク、フェード、ループなど、よくあるオーディオパターンを制御する。再生性能を向上させるため、可能な場合はオーディオファイルを自動的にキャッシュする。

<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

あるいはES modulesを利用して、依存関係としてHowler.jsをインポートすることができる。

import {Howl, Howler} from 'howler';

const {Howl, Howler} = require('howler');

var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

Howler.jsはオーディオを扱うための2つのハイレベルな構成概念を提供する。

• オーディオスプライト - 正確な再生とより小さなリソースのために、スプライトを用いてオーディオファイルのセグメントを定義・制御する。
• 空間オーディオ - ステレオパンや3Dゲームオーディオなどの音場を提供する。

オーディオで大きな問題になるのはコーデックのサポートだ。Howler.jsは現在ブラウザで利用可能な、MP3、OPUS、OGG、WEBMなど14種類の形式をサポートしている。

Howler.jsは全てのモダンなWebブラウザをサポートし、Internet Explorer 9もサポートする。また、Cordovaを用いたハイブリッドモバイルアプリとHTML5ベースのFacebook Instant Gamesプラットフォーム内での使用もサポートする。

Web Audio APIは、現在の実装に複数の課題があることがわかっている。仕様は複数の重要な機能を廃止しつつ、5年以上にわたり着実に変化している。最近の作業では、AudioWorkletsによって、オーディオ処理をWebワーカーに似た別スレッドに移している。Web Audioのブラウザサポートは依然として一貫性がなく、開発者がこれら問題を回避するのにHowler.jsは役に立つ。

最も最近の課題は、特定のWebサイトの自動再生を承認する仕組みを必要とすることなく、オーディオクリップが再生可能になる前にユーザーインタラクションを要求することだ。

Howler.jsとWeb Audioの現在および将来について、SitePenのシニアソフトウェアエンジニアであるPaul Shannon氏はInfoQにこう語った。

Web AudioはサウンドにとってのCanvasのようなもので、サウンドにローレベルアクセスを提供します。そのロジックに従うと、Web Audioに対するHowler.jsは、3Dグラフィックスに対するThreejsのようなものです。Web Audioが広く導入されればきっと、オーディオにもInstagramのようなフィルターが登場するでしょう！

Google、Disney、Mozilla、Legoを含む複数の大手テクノロジおよびメディア企業が、Howler.jsを利用している。

Howler.jsはモジュラーアーキテクチャをとっており、それ自体はgzip圧縮で7KBしかない。Howler.jsはMITオープンソースライセンスで利用可能だ。Howler.js GitHubプロジェクト経由のコントリビューションは大歓迎だ。