# 話し声の下で大きな音楽が流れるポッドキャスト

Source: https://easeweb.dev/learn/background-audio
Topics: 画像とメディア > 録音された音声で、背景音があっても話し声がはっきり聞こえる (WCAG 1.4.7)
The fix: 音楽を、仕上がりで測って声より20 dB以上小さくミキシングするか、音楽を入れないようにします。または、音楽のない版を公開し、プレーヤーのそばの、再生位置を引き継ぐボタンから選べるようにします。
Test with: audio measurement, keyboard, screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/low-or-no-background-audio.html https://www.w3.org/WAI/WCAG22/Techniques/general/G56 https://manual.audacityteam.org/man/contrast.html https://ffmpeg.org/ffmpeg-filters.html#amix https://ffmpeg.org/ffmpeg-filters.html#loudnorm https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

コーヒー豆の店のポッドキャスト「スモールバッチ」は、各回をサイトに載せ、プレーヤーの下に書き起こしを付けています。第12回のテーマは豆の保存方法です。司会のサムは、豆は密閉できる缶に入れて涼しくて暗い場所に置くこと、2週間で使い切れる量だけ買うこと、冷蔵庫には入れないことを話します。番組を温かい雰囲気にしたくて、制作者はオープニングだけでなく、エピソードの最初から最後までテーマ曲を流しています。ミキシングはFFmpegのコマンド一つです。二つのトラックの音量をそろえ、音楽を8 dB下げています。仕上がりを測ると、音楽は声より約6 dB小さいだけで、話の間ずっと流れています。聴力に問題のない人なら、少し気を付ければ聞き取れます。難聴の人には、声と曲がほとんど同じ大きさで聞こえ、冷蔵庫に入れてよいのかいけないのかが聞き分けられません。ページには音楽をオフにする方法もありません。

## 確認できる問題

レベルAAAの達成基準1.4.7は、ポッドキャストや音声ガイドのように、主に前景の話し声からなる収録済みの音声だけのコンテンツを対象にします。音声CAPTCHA、音声ロゴ、歌は対象外です。求めるのは次の三つのいずれかです。背景音がないこと、背景音をオフにできること、背景音が話し声より20 dB以上小さいこと（ときどき鳴る1～2秒の音は除く）。WCAGは、20 dB小さいとはおよそ4分の1の大きさに聞こえることだと注記しています。W3Cはこの値を、補聴援助システムの研究から選んでいます。この例の音楽は、話の間ずっと声より約6 dB小さいだけで流れ続け、オフにもできないため、三つのどれも満たしません。

ミキサーの設定値は、実際の差ではありません。`loudnorm` のようにラウドネスで音量をそろえる処理は、耳の聞こえ方に合わせて周波数に重みを付けます。一方、差は音そのもので測ります。そのため、そろえた後で音楽を8 dB下げても声との差は約6 dBしかなく、制作者は自分のコマンドを見て、実際より下げたと思い込んでいました。プレーヤーの下の書き起こしは、エピソードを聞けない人のために1.2.1を満たしますが、耳で聞き、話し声がはっきり聞こえる必要がある人の助けにはなりません。

## 利用者への影響

スマートフォンのスピーカーで聞く人や、車や台所で聞く人の周りには、ほかの音もあります。そこに話し声の下の音楽が加わると、さらに聞き取りにくくなります。はっきりしたミックスは、そうした人の役にも立ちます。

## 自動チェックとAIの限界

ファイルの中の音を調べるルールは、axeにはありません。EaseWebの監査は録音済みの `<audio>` プレーヤーをすべて1.2.1の手動確認の対象として挙げ、書き起こしを求めますが、ミックスは測りません。測るには、人が部分を選ぶ必要があります。Audacityのコントラスト分析は、話し声の部分と背景音だけの部分をRMSで比べ、その差が1.4.7を満たすかを示します。音楽が途切れない場合、背景音だけの部分は話の切れ目やイントロしかないため、制作者の手元にある分離前のトラックで測るのがいちばん確実です。トラックが残っていない場合は、完成したファイルをAIで声と音楽に分けるツールで、おおよその値を出せます。

## 修正前：少ししか下げずに、エピソード全体に流した音楽

```html
<h2>スモールバッチ 第12回：豆の保存方法</h2>
<audio controls preload="metadata" src="small-batch-12.mp3"></audio>
<details>
  <summary>書き起こし</summary>
  <p>［エピソード全体にテーマ曲が流れる］</p>
  <p><b>サム：</b>スモールバッチへようこそ。今週は、コーヒー豆の保存方法です。</p>
  <p><b>サム：</b>豆は密閉できる缶に入れて、涼しくて暗い場所に置きます。
    買うのは、2週間で使い切れる量だけにしましょう。</p>
  <p><b>サム：</b>そして、冷蔵庫には入れないでください。
    湿気や、周りのにおいを吸ってしまいます。</p>
</details>
```

```sh mix.sh
# 声とテーマ曲を同じラウドネスにそろえ、テーマ曲を下げて、
# エピソード全体の声の下に重ねる。
ffmpeg -i voice.wav -i theme.wav -filter_complex \
  "[0]loudnorm=I=-18[voice];[1]loudnorm=I=-18,volume=-8dB[music];[voice][music]amix=inputs=2:duration=first:normalize=0" \
  small-batch-12.mp3
```

- テーマ曲が、話の切れ目だけでなく、話している間もずっと流れています。
- 音量をそろえた後で8 dB下げただけなので、測ると声との差は約6 dBしかありません。
- 音楽のない版も、ページで音楽をオフにする操作もありません。

## 修正後：音楽を声より20 dB以上小さくミキシング

```html
<h2>スモールバッチ 第12回：豆の保存方法</h2>
<audio controls preload="metadata" src="small-batch-12.mp3"></audio>
<details>
  <summary>書き起こし</summary>
  <p>［エピソード全体にテーマ曲が流れる］</p>
  <p><b>サム：</b>スモールバッチへようこそ。今週は、コーヒー豆の保存方法です。</p>
  <p><b>サム：</b>豆は密閉できる缶に入れて、涼しくて暗い場所に置きます。
    買うのは、2週間で使い切れる量だけにしましょう。</p>
  <p><b>サム：</b>そして、冷蔵庫には入れないでください。
    湿気や、周りのにおいを吸ってしまいます。</p>
</details>
```

```sh mix.sh
# 声とテーマ曲を同じラウドネスにそろえ、テーマ曲を下げて、
# エピソード全体の声の下に重ねる。
# Audacityのコントラスト分析で測ると、テーマ曲は声より約23 dB下。
ffmpeg -i voice.wav -i theme.wav -filter_complex \
  "[0]loudnorm=I=-18[voice];[1]loudnorm=I=-18,volume=-25dB[music];[voice][music]amix=inputs=2:duration=first:normalize=0" \
  small-batch-12.mp3
```

1. ミキシングで音楽をさらに下げます。ここでは、音量をそろえた後で25 dB下げています。
2. 仕上がりで、声の部分と音楽だけの部分を比べます。エピソードの何か所かで測ります。ここでは約23 dBで、設定値より約2 dB小さいものの、基準が求める20 dBを超えています。
3. 測った差をコマンドのそばに書いておき、次の回も同じようにミキシングして確かめられるようにします。

これで修正前の例は直り、1.4.7を満たします。音楽は残っていますが、声の約1.5分の1ではなく、約5分の1の大きさに聞こえます。サイトでもどのポッドキャストアプリでも、誰もが同じはっきりしたファイルを聞けます。音楽をまったく入れない方法でも満たします。

## 修正後：音楽のない版と、切り替えボタン

```html
<h2>スモールバッチ 第12回：豆の保存方法</h2>
<audio id="episode" controls preload="metadata"
  src="small-batch-12.mp3" data-voice="small-batch-12-voice.mp3"></audio>
<button type="button" id="music" aria-pressed="true">背景の音楽</button>
<details>
  <summary>書き起こし</summary>
  <p>［エピソード全体にテーマ曲が流れる］</p>
  <p><b>サム：</b>スモールバッチへようこそ。今週は、コーヒー豆の保存方法です。</p>
  <p><b>サム：</b>豆は密閉できる缶に入れて、涼しくて暗い場所に置きます。
    買うのは、2週間で使い切れる量だけにしましょう。</p>
  <p><b>サム：</b>そして、冷蔵庫には入れないでください。
    湿気や、周りのにおいを吸ってしまいます。</p>
</details>

<script>
  const episode = document.getElementById('episode');
  const withMusic = episode.getAttribute('src');
  document.getElementById('music').addEventListener('click', (event) => {
    const button = event.currentTarget;
    const on = button.getAttribute('aria-pressed') !== 'true';
    const { currentTime, paused, playbackRate } = episode;
    episode.src = on ? withMusic : episode.dataset.voice;
    // 同じ位置、同じ速度で続ける。
    episode.addEventListener('loadedmetadata', () => {
      episode.currentTime = currentTime;
      episode.playbackRate = playbackRate;
      if (!paused) episode.play();
    }, { once: true });
    button.setAttribute('aria-pressed', String(on));
  });
</script>
```

```sh mix.sh
# 声とテーマ曲を同じラウドネスにそろえ、テーマ曲を下げて、
# エピソード全体の声の下に重ねる。
ffmpeg -i voice.wav -i theme.wav -filter_complex \
  "[0]loudnorm=I=-18[voice];[1]loudnorm=I=-18,volume=-8dB[music];[voice][music]amix=inputs=2:duration=first:normalize=0" \
  small-batch-12.mp3
# 同じ声を同じようにそろえた、音楽のない版。
ffmpeg -i voice.wav -af loudnorm=I=-18 small-batch-12-voice.mp3
```

1. 同じ声のトラックから、音楽のない2本目のファイルを書き出します。長さが同じなので、一方のある瞬間はもう一方の同じ瞬間に当たります。
2. そのファイルを、プレーヤーの `data-voice` に書いておきます。
3. プレーヤーのすぐ後に、`aria-pressed="true"` 付きの「背景の音楽」ボタンを置きます。何を操作するか、オンかどうかを伝えます。
4. クリックされたらファイルを切り替え、読み込みが終わったら再生位置と速度を元に戻します。途中で音楽をオフにしても、最初から聞き直す必要はありません。

これで修正前の例は直り、背景音をオフにできるため、1.4.7を満たします。制作者が意図したミックスは、ほかの人のために残せます。ただし、誰もが大きな音楽のミックスから聞き始め、ボタンを探す必要があります。同じフィードから配信するポッドキャストアプリのエピソードには音楽が残り、オフにする方法もありません。

## どの方法を選ぶか

どちらも1.4.7を満たします。音楽を20 dB以上下げてミキシングしましょう。ファイル一つで同じ役目を果たし、探すものもなく、ポッドキャストアプリを含め、エピソードが配信される先すべてで、はっきりしたミックスが聞けます。ボタンは、大きめの音楽が好きな人のためにそのミックスを残せますが、2本目のファイルとスクリプトが要り、聞く人がボタンの存在を知っている必要があります。番組に音楽が欠かせない場合は、音楽を小さくしたミックスに加えてボタンを用意し、ボタンだけで済ませないようにします。

## 実装の判断

番組のテーマ曲をそのままの大きさで流したい場合は、誰かが話している間だけ音楽を下げます。音声編集ではダッキングと呼びます。イントロやコーナーの合間はテーマ曲をそのまま流し、話している間は下げます。誰も話していないイントロ、コーナーの合間の短い効果音、ジングルは、話し声の背景音ではありません。話し声の下で大きな音が許されるのは、ドアの音や笑い声のように、時々鳴って1～2秒で終わるものだけです。

差は、基準の確かめ方と同じく、仕上がりで測ります。Audacityの「解析」メニューにあるコントラスト分析は、話し声の部分を前景、背景音だけの部分を背景として選び、それぞれをRMSで測って、差が20 dB以上なら合格と示します。マニュアルは何か所かで確かめるよう勧めています。音楽はエピソードの中で変わるので、1か所だけでは足りません。設定値では差は分かりません。ラウドネスによる音量の調整、コンプレッサー、音楽そのものの強弱がどれも差を動かします。この例で8 dBの設定が約6 dBになったのも、そのためです。

この基準の対象は、ポッドキャスト、音声ガイド、音声クリップのような音声だけのコンテンツです。動画の音声は1.4.7の対象外ですが、同じミックスは動画の視聴者にも役立ちます。音声CAPTCHA、局の3音のジングルのような音声ロゴ、音楽そのものが目的の歌やラップも対象外です。

にぎやかなカフェでのインタビューのように、話し声と一緒に録音された音も同じです。別トラックの音楽ほど後から下げやすくはありません。できるだけ静かな場所で、話す人それぞれの近くにマイクを置いて録音し、ノイズ除去は控えめにします。かけすぎると、かえって声が聞き取りにくくなります。そのうえで、話し声と、話が途切れた所の周りの音とを比べて測ります。

書き起こしは、エピソードをまったく聞けない人のための別の要件（1.2.1）で、[書き起こしのないポッドキャストと無音の動画](/ja/learn/transcripts)で扱っています。どちらの修正方法を選んでも残しておきます。

## 修正の確認

1. 公開したファイルか、分離前のトラックをAudacityで開きます。「解析」の「コントラスト」で、話し声の部分を前景、イントロや話の切れ目のような音楽だけの部分を背景として選びます。差が20 dB以上あります。
2. 何か所かで測り直します。始め、中ほど、終わり、そして音楽が変わる所です。どこでも合格します。
3. エピソードを最後まで聞きます。話し声の下で音楽が大きくならず、言葉に重なる大きな音があっても1～2秒で終わります。
4. 切り替えがある場合は、キーボードだけで、次にスクリーンリーダーで、プレーヤーのそばの「背景の音楽」ボタンを見つけ、押された状態かどうかを聞き、オフにします。エピソードが同じ位置から、音楽なしで続きます。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を、測定に使ったツールとそのバージョンと一緒に記録してください。音楽もミックスも回ごとに変わるため、新しい回ごとに確認し直してください。

## 制限

これは出発点となる実装例であり、すべてのアプリケーションでの適合を保証するものではありません。測った差が20 dBあれば基準は満たしますが、すべての人が話し声を聞き取れる保証ではありません。いちばん確かな確認は、実際に聞く人に聞いてもらうことです。勝手に流れ始める音は[止められない自動再生の音声](/ja/learn/autoplay-audio)で、書き起こしは[書き起こしのないポッドキャストと無音の動画](/ja/learn/transcripts)で扱っています。エピソードが実際に再生されるプレーヤーやポッドキャストアプリで、一連の流れ全体をテストしてください。

## スクリーンリーダーでの動き（EaseWebが実機で確認）

`aria-pressed`: ボタンを、オンとオフを切り替えるトグルにします。

| スクリーンリーダー | ブラウザーとOS | 押す | Tabで移動 |
| --- | --- | --- | --- |
| NVDA | Chrome, Windows 11 | 未確認 | 未確認 |
| JAWS | Chrome, Windows 11 | 未確認 | 未確認 |
| VoiceOver | Safari, iOS | 未確認 | 未確認 |
| TalkBack | Chrome, Android | 未確認 | 未確認 |

https://easeweb.dev/ja/learn/screen-reader-support

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）