ページ遷移中もオーディオを再生し続けるには？実装方法を解説

Webサイトで音楽やポッドキャストなどのオーディオを再生している際、ページを移動すると再生が中断されてしまう——これは多くの開発者が直面する課題です。通常、ページ遷移が発生するとブラウザはページ全体を再読み込みするため、<audio>要素もリセットされてしまいます。

この問題を解決し、ページ間を移動してもオーディオの再生を継続させるには、以下の方法が有効です。

1. Ajaxを使ってコンテンツを読み込む

最も基本的なアプローチは、Ajax（非同期通信）を利用してコンテンツを読み込むことです。ページ全体を再読み込みする代わりに、必要な部分だけを動的に差し替えることで、オーディオプレイヤーを含むページの構造を維持できます。これにより、ユーザーがサイト内を移動しても再生が途切れることはありません。

2. History APIのpushState()でURLを書き換える

Ajaxでコンテンツを差し替えるだけでは、URLが変化しないため履歴管理に支障が出ます。そこで活用したいのが、History APIのpushState()メソッドです。このメソッドを使うと、ページを再読み込みすることなくURLを変更でき、ブラウザの戻る・進むボタンにも自然に対応できます。

pushState()の3つのパラメータ

• stateオブジェクト： pushState()によって新しく作成される履歴エントリに関連付けるデータ（JavaScriptオブジェクト）を指定します。
• title： 新しい履歴エントリのタイトルとして短い文字列を渡せます。※現在、ほとんどのブラウザではこの値は無視されます。
• URL： 新しい履歴エントリのURLを指定します。同一オリジン内のURLである必要があります。

3. History.jsでクロスブラウザ対応を実現する

History APIは比較的新しいブラウザでサポートされていますが、古いブラウザでは動作しない場合があります。複数のブラウザで一貫した動作を実現したい場合は、History.jsライブラリを使用するのがおすすめです。History.jsは、HTML4環境でも自動的にフォールバック処理を行い、pushState()と同等の機能を提供してくれます。

まとめ

ページ遷移中もオーディオを再生し続けるには、「Ajaxによる部分読み込み」「pushState()によるURL更新」「History.jsによる互換性確保」の組み合わせが効果的です。SPA（シングルページアプリケーション）の構築においても同様の考え方が応用できるため、ぜひ参考にしてください。