音声（audio）が再生されないときの対処

autoplay制限が最大の原因

現在のブラウザは、ユーザーが何も操作していない状態で音が鳴り出すのを基本的にブロックします。勝手にBGMが流れる体験を防ぐための仕様です。そのため、ページ読み込み直後にplay()を呼んでも、音声付きのままでは再生が拒否されることがほとんどです。

この制限を回避する正攻法は、クリックやタップなどのユーザー操作をきっかけに再生を始めることです。ボタンのクリックイベントの中でplay()を呼べば、ユーザーの意図による再生とみなされ、許可されます。「音声をオンにする」ボタンを最初に置く設計が一般的です。

play()はPromiseを返す、その失敗を見る

play()メソッドはPromiseを返します。autoplayがブロックされると、このPromiseがrejectされ、NotAllowedErrorなどのエラーになります。play()を呼びっぱなしにしていると、ブロックされても気づけません。catchでエラーを受け取り、ユーザーに再生ボタンを促す表示に切り替えるのが堅実です。

エラー内容をコンソールに出しておくと、「制限でブロックされたのか」「ファイルが読めていないのか」を区別できます。再生されない原因の切り分けにそのまま使えます。

症状別チェック表

音声（audio）が再生されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

ミュート・音量・ファイルの確認

再生自体は始まっているのに聞こえない場合は、音量やミュート状態を疑います。muted属性が付いていないか、volumeが0になっていないか、端末側がサイレントモードになっていないかを順に確認します。動画の自動再生では muted を付ければ許可される一方、当然ながら音は出ない、という点も混同しやすいところです。

そもそもファイルが読めていないケースもあります。パスが間違っている、形式がそのブラウザで対応していない、といった理由です。複数の形式を用意してsourceを並べる、Networkタブで音声ファイルが200で取得できているか確認する、といった基本のチェックが効きます。

音声を確実に鳴らすための実装手順

autoplay制限を前提にした設計にすると、環境差に強くなります。次の順序で組むのがおすすめです。

1. ページに「音声をオンにする」など、ユーザーが押す起点となるボタンを用意する
2. そのクリックイベントのハンドラ内でplay()を呼ぶ
3. play()の返すPromiseをcatchし、失敗時は再生ボタンを再表示する
4. muted・volume・端末のサイレントモードを確認する
5. 音声ファイルがNetworkタブで正しく取得できているか見る
6. 複数ブラウザで実際に音が出るか確かめる

共有先の環境で音が出るか確かめる

autoplayの扱いやサイレントモードの挙動はブラウザや端末で差があり、自分の環境で鳴っても相手では無音ということが起こります。音は実際に聞いてもらわないと確認できないため、共有して試してもらうのが確実です。

ギガサイト便なら、音声を含むサイトをHTMLやZIPでドロップするだけで共有URLが発行され、相手にすぐ再生を試してもらえます。同じURLのまま中身を差し替えられるので、autoplay対応を直すたびにリンクを送り直す手間がありません。社内レビューや確認用の一時共有に向いています。