Screenshots
Overview
概要
Howler.js の主要機能を5つのデモと録音機能に落とし込んだ体験型サイトです。ページ上で鳴る音はすべて Howler.js が再生し、その出力を AnalyserNode でリアルタイム解析・可視化しています。音声素材は外部ファイルを使わず、すべてコードで合成しています。
How to use
遊び方・使い方
上部のグローバルバーで全体音量・ミュートと同時発音数を確認できます。01のドラムパッドはクリック／タップ／キー(A〜K)で叩け、連打で同じ音が重なるプール再生を体感できます。02はスプライト、03はBGMをフェード・再生速度・シーク・ループで操作し周波数スペクトラムを表示、04は2トラックのクロスフェード。05ではレーダー上のパックをドラッグまたは矢印キーで動かし、左右定位と距離減衰を聴き分けられます(ヘッドフォン推奨)。全デモの共通出力は録音してwebmで書き出せます。
Tech stack
技術スタック
howler.js 2.2Web Audio APINext.js 16React 19TypeScriptTailwind CSS v4
lib/audioBus の ensureAnalyser() が初回再生時に Howler.masterGain → AnalyserNode → destination へ繋ぎ替え、全デモの音を一括解析。録音はマイクを使わず MediaStreamDestination＋MediaRecorder で内部音声グラフを直接キャプチャします。3D音響は pannerAttr(HRTF／逆二乗距離モデル)で定位と距離減衰を自動計算。
Highlights
工夫した点
- 全デモが共通の Howler.masterGain を通る単一のWeb Audioグラフを流れる設計にし、AnalyserNodeを一度だけ挿入してどのデモの音も同じ可視化・録音に集約
- 音声素材を外部ファイルに頼らず固定シードの決定論的WAV合成で生成し、毎回同じ音が鳴るよう再現性を確保
- キーボード操作・focus-visible・prefers-reduced-motion・aria-liveなど、音中心のUIでもアクセシビリティに配慮
To improve
改善したい点
- デモが5種＋録音と多く、初見ではどこから触ればよいか導線がやや分かりにくい
- 録音書き出しがwebm依存のため、Safari系などブラウザ間の挙動差を埋めたい
- 合成音源が中心で、ユーザー自身の音源を読み込んで試す余地がある
What's next
今後の展望
- 任意の音源やスプライトをアップロードして試せる入力機能の追加
- 各デモに対応する Howler.js のコードスニペット併記で学習教材化
- 可視化プリセット(スペクトラム／波形／パーティクル等)の拡充