← エラー辞典に戻る

HTML

音声が自動再生されない

autoplay がブラウザにブロックされている

こんな症状

audioタグにautoplayを付けたのに音が鳴らない。ブラウザのポリシーで止められているよ。

まず試す

muted 属性を付ければ自動再生できる（音は出ない）。音を出すならユーザーのクリック後に play() する。

html
<!-- muted なら自動再生できる -->
<audio src="bgm.mp3" muted autoplay></audio>

<!-- 音を出すならクリック後に再生 -->
<button onclick="document.getElementById('bgm').play()">再生</button>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓音付きで自動再生したい
    → ブラウザの方針で不可。muted で開始し、ユーザー操作後にミュート解除する。
  • ✓とにかく自動で動かしたい
    → muted 属性を付ける（音は出ないが再生は始まる）。
  • ✓音を確実に出したい
    → ボタン等のクリックイベント内で play() を呼ぶ。

なぜ起きる？

多くのブラウザはユーザー操作なしの音声自動再生をブロックするよ。これはユーザー体験を守るためのポリシーで、autoplay属性だけでは音声付きメディアは再生されないんだ。muted属性を付けるか、ユーザーのクリック後に再生する必要があるよ。

✕ エラーが起きるコード
<audio src="bgm.mp3" autoplay></audio>
<!-- ブラウザにブロックされて再生されない -->
✓ 直したコード
<audio id="bgm" src="bgm.mp3" muted autoplay></audio>
<!-- または JS でクリック後に再生 -->
<button onclick="document.getElementById('bgm').play()">再生</button>

✅ 直ったか確認

muted での自動再生、またはクリック後の play() で音声が再生されればOK。

🆘 まだ直らないときは

play() は Promise を返す。catch でブロック理由を確認できる。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

📖 この問題を学べるレッスン

HTMLコース（基礎から）で根本から理解する →

✏️ 手を動かして練習

このテーマの図解ドリルで実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

HTMLコースを始める →

❓ 関連するQ&A