このサイトには一部広告が含まれています

JavaScript｜iOS Safari・PWAでaudio再生が再開できない問題と対処法

この記事は約6分で読めます。

この記事は、HTMLのaudio要素やMedia Session APIを使って、ウェブサイトに音声再生機能を実装中の開発者向けです。

以下の環境で検証し、Audio Session APIのplayback指定によって改善できたので、対処法と検証内容をまとめます。

  • 検証端末：iOS 18系のiPhone実機
  • 検証環境：Safari通常タブ・プライベートブラウズ・ホーム画面に追加したWebサイト
  • 再生方式：HTMLのaudio要素によるWAVファイルの再生
  • 検証操作：ロック画面からの一時停止・再開、メディア情報の表示

※今回の環境で確認した結果であり、ほかのiOSバージョンやブラウザでの動作を保証するものではありません。

結論：Audio Session APIでplaybackを指定する

音声の再生前に、以下のコードを追加します。

if ('audioSession' in navigator) {
  navigator.audioSession.type = 'playback';
}

await audio.play();

audioはHTMLのaudio要素を参照する変数です。既存の再生処理がある場合は、audio.play()の前に指定してください。awaitはasync関数内で使用します。

Audio Session APIは、Webページの音声用途をブラウザやOSに伝えるためのAPIです。通常はauto（自動判定）ですが、playbackを指定することで、音楽やポッドキャストなどの継続的なメディア再生であることを明示できます。

非対応ブラウザでエラーにならないよう、'audioSession' in navigatorで存在確認を行っています。なお、この設定はページ全体の音声動作に影響します。

今回の環境ではSafariブラウザ版・ホーム画面版の両方で改善を確認できましたが、すべてのiOS音声問題に有効とは限りません。

発生した症状と実装環境

地域情報サイト「くまのごと」に実装した、イベントや天気などを音声で聞ける「聞くまのごと」で発生しました。

音声再生機能の構成は以下のとおりです。

  • HTMLのaudioタグで生成済みのWAVファイルを再生
  • 再生・一時停止などは独自UIで操作
  • Media Session APIでタイトル・アーティスト名・画像を設定
  • setActionHandler()でOS側の再生・一時停止操作に対応

iOS 18系の実機では、ロック画面から一時停止すると、次のような症状が発生しました。

  • メディア情報が消えることがある
  • ロック画面の再生ボタンを押しても再開できない
  • ホーム画面版ではplayingイベントが発生しても音が出ず、再生位置も進まない
  • サイトの画面に戻って直接再生すると正常に動作する

原因を切り分けるために行った検証

独自UIやMedia Session APIが原因なのかを確認するため、通常のサイトとは別に検証画面を作成しました。

同じ音声ファイルを使い、以下の4パターンを比較しています。

パターン検証内容
1ブラウザ標準のaudioプレーヤー
2最小限のMedia Session APIを追加
32と同じ処理でaudio要素を非表示
43にAudio Session APIのplayback指定を追加

4パターンとも実機で検証しました。

Safariブラウザ版では1〜3でも正常に再開できましたが、ホーム画面版では標準のaudioプレーヤーでさえ、再開後に再生位置が止まる症状を確認しました。

独自UIやMedia Session APIだけが原因とは判断できない状態です。最終的に、playbackを指定した4番目の検証画面で改善を確認できました。

その後、通常のトップページにも同じ処理を追加し、Safariブラウザ版・ホーム画面版の両方で正常な再開を確認しています。

playingイベントだけでは再生成功と判断できない

検証時には、以下の情報も記録しました。

  • play・playing・pauseなどのイベント
  • audio.currentTime（再生位置）
  • document.visibilityState（画面の表示状態）
  • 再生エラー・メディア情報

今回の実機では、playingイベントが発生しているのに音が出ず、currentTimeも進まない状態を確認しました。

イベントの発生だけでなく、実際に再生位置が進んでいるかも確認する必要があります。

Media Session APIとAudio Session APIの違い

名前は似ていますが、役割は異なります。

API主な役割
Media Session APIロック画面へのタイトル・画像表示、OS側の再生操作との連携
Audio Session API音声用途の指定、ほかの音声との関係などの制御

今回の問題にはAudio Session APIの設定が有効でした。ただし、根本原因まで特定できたわけではありません。

その他の問題と注意点

Safariのプライベートブラウズではタイトル・画像が表示されなかった

再生問題の解決後も、SafariブラウザではMedia Session APIで設定したタイトルや画像が表示されませんでした。

原因は、検証に使っていたSafariがプライベートブラウズでした。通常タブで開き直すと、タイトルも画像も正常に表示されました。

Media Session仕様でも、プライベート閲覧時のメタデータの扱いについて言及されています。ただし、プライベートブラウズでは必ず表示されないという公式仕様ではありません。今回の実機で確認できた現象です。

WP-Optimizeの軽量化JSに古いコードが残っていた

検証中、WordPressのWP-Optimizeによって生成された軽量化済みJSに、古い処理が残っていたこともありました。テーマ内のJSは更新済みで、管理者としてログインしている状態でも発生しています。

JavaScriptを修正しても動作が変わらない場合は、ページキャッシュだけでなく、軽量化済みJSが更新されているかも確認してください。

なお、キャッシュの削除だけで今回の音声再開問題が解決したわけではありません。

iPhoneで音声再生を実装するときの確認項目

今回の検証では、Safariとホーム画面版で動作に違いがありました。

最低限、以下の3つの環境を分けて確認するのがおすすめです。

確認環境確認内容
Safari通常タブ再開動作・タイトル・画像
Safariプライベートブラウズ通常タブとの動作・表示の違い
ホーム画面に追加したWebサイトロック画面からの再開・再生位置

特に、一時停止した状態で画面をロックし、しばらく経ってから再開する操作も確認しておきましょう。

PCのスマホ表示や模擬テストで正常に動作していても、iOSのロック画面で同じように動くとは限りません。

参考資料・関連する不具合報告

  • W3C：Audio Session仕様
    playbackなどの音声用途の定義。
  • W3C：Media Session仕様
    メタデータやOS側の再生操作、プライベート閲覧時の扱い。
  • GitHub：media-chrome Issue #1302
    iOS・iPadOSで消音モード中に別アプリへ切り替えた際、復帰後に音声が出なくなる問題。開発者コメントでは、playback指定による回避策が紹介されています。
  • WebKit Bug #243258
    ホーム画面に追加したWebアプリで、一時停止から約5秒後に再開できなくなる不具合報告。2022年、iOS 15.6での古い事例です。

いずれも今回と完全に同じ条件ではなく、同一の原因による不具合と確認されたわけではありません。

コメント欄

タイトルとURLをコピーしました