HTML
🔊 音声が自動再生されない
autoplay がブラウザにブロックされている
😰 こんな症状
audioタグにautoplayを付けたのに音が鳴らない。ブラウザのポリシーで止められているよ。
🔍 原因
多くのブラウザはユーザー操作なしの音声自動再生をブロックするよ。これはユーザー体験を守るためのポリシーで、autoplay属性だけでは音声付きメディアは再生されないんだ。muted属性を付けるか、ユーザーのクリック後に再生する必要があるよ。
❌ エラーが起きるコード
<audio src="bgm.mp3" autoplay></audio>
<!-- ブラウザにブロックされて再生されない -->✅ 直し方
1. muted属性を付ければ自動再生できる（音は出ない）。 2. ユーザーのクリックイベント内でplay()を呼ぶ。 3. どうしても自動再生したい場合はmutedで開始し、ユーザー操作後にミュート解除する。
✅ 修正後のコード
<audio id="bgm" src="bgm.mp3" muted autoplay></audio>
<!-- または JS でクリック後に再生 -->
<button onclick="document.getElementById('bgm').play()">再生</button>この解決法は役立ちましたか？
🔗 関連するエラー
- video/audio が自動再生されない — ブラウザの自動再生ポリシーでブロックされている
- iframeの高さが合わない — iframe の高さが固定されている
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説