「曲と曲の間に無音が入ってしまう」「Web Audio APIとHTML5 audioの切り替えで音が途切れる」——そんなブラウザ音声再生の悩みを根本から解決するのが Gapless.js だ。2017年にコンサート録音ストリーミングサイト Relisten のために生まれ、今回9年越しに v4 として刷新されてリリースされた。
技術的な肝は「次のトラックを生バッファとして事前ロードし、Web Audio APIでスケジューリングする」というアプローチにある。HTML5 audioとWeb Audio APIをシームレスに横断しながら、トラック間の無音を限りなくゼロに近づける。内部は xstate を唯一の依存ライブラリとするステートマシンで管理されており、再生状態の遷移がロバストに設計されている点も注目だ。HTML5からWeb Audioへの切り替え時にごく稀にわずかなblipが入ることはあるが、9年間の本番運用で磨かれた実績は十分な信頼感がある。
Webアプリで音楽プレイヤーやポッドキャストプレイヤーを作るとき、ギャップレス再生の実装は意外と茨の道だ。Gapless.jsはその問題を「枯れた技術＋厳密なステートマシン」で解決しており、個人的にはこのシンプルな設計思想が長寿命の理由だと感じた。音声を扱うWebアプリを開発している方にはぜひ一度試してほしい。