Web Audio Showcase

Howler.js の実力を、
触って確かめる。

Howler.js は、ブラウザの煩雑なオーディオ実装を 1 つのシンプルな API に束ねるライブラリです。 Web Audio API を基本に、必要なら HTML5 Audio へ自動フォールバック。このページのドラム・効果音・BGM・空間オーディオはすべて Howler.js が鳴らし、出力はリアルタイムに解析・可視化しています。音を出して確かめてください。

Web Audio + HTML5自動フォールバックAudio Sprites1ファイル複数音Spatial / 3D空間定位・距離減衰Fade / Rate / Seekなめらかな制御Pooling低遅延な同時発音Eventsload/play/end/fade

※ 音が出ます。まずは右上のマスター音量を確認してから、下のパッドを叩いてみてください。

Capture

このページの音を、まるごと録音

ドラムも効果音も BGM も空間オーディオも、すべて共通の Web Audio 出力（Howler.masterGain）を通ります。録音を押してから各デモを鳴らすと、その出力をまとめてキャプチャして書き出せます。

Pooling / Low-latency

ドラムパッド

Howl × 8叩いた回数: 0A S D F / G H J K キーでも叩けます

8 つの音を、それぞれ独立した Howl として読み込み。連打すると同じ音が重なって鳴ります。これは Howler が内部で音源インスタンスをプールし、Web Audio 経由で低遅延に同時発音しているからです。

const kick = new Howl({ src: ['kick.wav'] });
kick.play(); // 連打すると重なって鳴る

Audio Sprites

オーディオスプライト

1 ファイル → 7 サウンドui-sprite.wav

1 本の音声ファイルに複数の効果音を並べ、再生範囲をミリ秒で切り出す手法。HTTP リクエストを 1 回に抑えつつ、ゲームの SE のように多彩な音を鳴らせます。

const sfx = new Howl({
  src: ['ui-sprite.wav'],
  sprite: { coin: [0, 600], jump: [600, 600] }
});
sfx.play('coin');

Fade / Rate / Seek / Visualize

BGM プレイヤー & ビジュアライザ

読み込み中…

0:000:00

再生速度1.00×±0

音量90

seek() で頭出し、rate() で 0.5〜2.0× の早回し/スロー、fade() で滑らかな出入り。すべて 1 本の Howl を操作しているだけです。

1 本の BGM ループを、フェードイン/アウト・0.5〜2.0× の再生速度・シーク・ループで操作。さらに Howler が公開する AudioContext を AnalyserNode で覗き、周波数と波形をリアルタイム描画しています。

const bgm = new Howl({ src: ['loop.wav'], loop: true });
const id = bgm.play();
bgm.fade(0, 1, 700, id); // フェードイン
bgm.rate(1.5, id);       // 1.5倍速
bgm.seek(8, id);         // 8秒へシーク

Crossfade

クロスフェード

Howl × 2（同期ループ）A 100% / B 0%

Am-F-C-G / minor

C-G-Am-F / major

2本の Howl を同時に鳴らし、スライダーは volume() を直接、A/B ボタンは fade() で 1.5 秒かけて音量を入れ替えています。曲はずれずに重なります。

同じ長さ・テンポの 2 本の BGM を同時に鳴らし、fade() を両方で走らせて滑らかに入れ替えます。曲はずれずに重なるので、シーンに応じた BGM 切替が自然に作れます。

const a = new Howl({ src: ['a.wav'], loop: true, volume: 1 });
const b = new Howl({ src: ['b.wav'], loop: true, volume: 0 });
const ida = a.play(), idb = b.play();
// B へ 1.5 秒でクロスフェード
a.fade(1, 0, 1500, ida);
b.fade(0, 1, 1500, idb);

Spatial Plugin

3D 空間オーディオ

🎧🔊

パックをドラッグ、またはステージにフォーカスして矢印キーで移動すると、音が左右・前後に定位して距離で減衰します。ヘッドフォン推奨。

x: 4.8
z (奥行): -3.6
距離: 6.0

音源に 3D 座標を与えると、左右の定位・前後の奥行き・距離による減衰が自動計算されます。パックをドラッグして動かしてみてください（ヘッドフォン推奨）。

const beacon = new Howl({
  src: ['beacon.wav'], loop: true,
  pannerAttr: { panningModel: 'HRTF', distanceModel: 'inverse' }
});
const id = beacon.play();
beacon.pos(x, 0, z, id); // 3D 座標で定位

なぜ Howler.js なのか

ブラウザ差を吸収

Web Audio API と HTML5 Audio のどちらで鳴らすかを自動判定。コーデックのフォールバックも src 配列を並べるだけ。

必要な機能が最初から

スプライト・空間オーディオ・フェード・再生速度・プール・豊富なイベント。生の Web Audio を書くより圧倒的に短い。

軽量・依存ゼロ

gzip で約 7KB の単一ライブラリ。ゲーム・音楽アプリ・UI サウンドまで、現場で広く使われています。

Howler.js の実力を、触って確かめる。