---
title: "音声（audio）が再生されないときの対処"
description: "ページを開いた直後に音声を鳴らそうとしたら無音だった場合に、ブラウザのautoplay制限がなぜ存在するのかを理解し、ユーザー操作を起点にした正しい音声再生の実装方法を学べる記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/audio-not-playing"
markdown: "https://giga-site.com/articles/audio-not-playing/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 音声（audio）が再生されないときの対処

ページを開いた瞬間にBGMを鳴らそうとしたら音が出ない、ボタンを押しても無音――Web音声のトラブルの多くは、ブラウザのautoplay制限が原因です。なぜブロックされるのかを理解すれば、ユーザー操作を起点にした正しい鳴らし方が見えてきます。主要な原因と対処を整理します。

> Source HTML: https://giga-site.com/articles/audio-not-playing
> Article index: https://giga-site.com/articles/index.md

## 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対応を直すたびにリンクを送り直す手間がありません。社内レビューや確認用の一時共有に向いています。

## よくある質問

### ページを開いた瞬間にBGMを鳴らしたいのですが、再生されません。

ブラウザのautoplay制限により、ユーザー操作なしの音声再生は基本的にブロックされます。クリックやタップを起点に再生する設計に変えるのが正攻法です。「音声をオンにする」ボタンを置き、そのイベント内でplay()を呼んでください。

### play()を呼んでいるのに音が出ません。エラーも見当たりません。

play()はPromiseを返し、ブロックされるとrejectされます。catchを付けていないとエラーに気づけません。catchで受け取ってコンソールに出力すれば、制限によるブロックか、ファイル読み込み失敗かを区別できます。

### 再生は始まっているようですが聞こえません。

muted属性が付いていないか、volumeが0でないか、端末がサイレントモードでないかを確認してください。動画をmutedにして自動再生する設計では、再生は許可されますが当然音は出ない点に注意してください。

### 自分の環境では鳴るのに他の人の環境で無音になります。

autoplayの扱いやサイレントモードの挙動は環境差が大きいためです。実際に聞いてもらうのが確実です。ギガサイト便で共有URLを発行すれば、相手の端末で音が出るかをそのまま試してもらえます。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [認証メール（コード）が届かないときの確認点](https://giga-site.com/articles/auth-email-not-arriving/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "音声（audio）が再生されないときの対処",
  "description": "ページを開いた直後に音声を鳴らそうとしたら無音だった場合に、ブラウザのautoplay制限がなぜ存在するのかを理解し、ユーザー操作を起点にした正しい音声再生の実装方法を学べる記事です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/audio-not-playing",
  "url": "https://giga-site.com/articles/audio-not-playing",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ページを開いた瞬間にBGMを鳴らしたいのですが、再生されません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザのautoplay制限により、ユーザー操作なしの音声再生は基本的にブロックされます。クリックやタップを起点に再生する設計に変えるのが正攻法です。「音声をオンにする」ボタンを置き、そのイベント内でplay()を呼んでください。"
      }
    },
    {
      "@type": "Question",
      "name": "play()を呼んでいるのに音が出ません。エラーも見当たりません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "play()はPromiseを返し、ブロックされるとrejectされます。catchを付けていないとエラーに気づけません。catchで受け取ってコンソールに出力すれば、制限によるブロックか、ファイル読み込み失敗かを区別できます。"
      }
    },
    {
      "@type": "Question",
      "name": "再生は始まっているようですが聞こえません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "muted属性が付いていないか、volumeが0でないか、端末がサイレントモードでないかを確認してください。動画をmutedにして自動再生する設計では、再生は許可されますが当然音は出ない点に注意してください。"
      }
    },
    {
      "@type": "Question",
      "name": "自分の環境では鳴るのに他の人の環境で無音になります。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "autoplayの扱いやサイレントモードの挙動は環境差が大きいためです。実際に聞いてもらうのが確実です。ギガサイト便で共有URLを発行すれば、相手の端末で音が出るかをそのまま試してもらえます。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```