audio要素
構文
<audio src="sample.wav" controls="">非対応</audio>
非対応ブラウザのための代替メッセージをaudio要素内に内包させても、それが表示されるとは限りません。HTML5 Audio Support on Android Devices - Brian Hadaway
| Internet Explorer 11 |  |
|---|---|
| Android 2.2 |  |
属性
| 属性 | |
|---|---|
| autoplay | 指定すると、再生可能となった時点で再生が開始される |
| buffered | バッファされた範囲を表すTimeRangesオブジェクト |
| controls | 指定すると、コントロールが表示される |
| loop | 指定すると、再生がくり返される |
| muted | 指定すると、既定でミュート状態となる |
| played | 再生された範囲を表すTimeRangesオブジェクト |
| preload | 事前に何を読み込んでおくべきかをブラウザへ指示する |
| src | 音声コンテンツのURL |
| volume | 音量。0.0～1.0の範囲 |
controlsを指定しないと何も表示されません。その状態ではユーザーには操作する手段がないため、autoplayで自動再生するかスクリプトで制御しない限り、再生を開始できなくなります。
| コード | 外観 |
|---|---|
<audio></audio> |
|
<audio controls=""></audio> |
ファイルフォーマット
| フォーマット | 実行例 |
|---|---|
| Wave (PCM) | |
| OGG (Vorbis) | |
| MPEG Audio (MP3) | |
| MPEG-4 (AAC) |
サーバの設定
ブラウザがそのフォーマットを正しく解釈できるように、サーバはそのファイルのMIME typeで適切に応答する必要があります。たとえばそれがApacheならば、次のように指定します。
AddType audio/wav .wav AddType audio/ogg .ogg AddType audio/aac .aac
ブラウザごとの対応フォーマット
ブラウザごとにサポートされるフォーマットが異なるため、クロスブラウザとするには複数のフォーマットを用意します。
| フォーマット | Chrome | Firefox (Gecko) | IE | Opera | Safari | Android |
|---|---|---|---|---|---|---|
| 基本サポート | 3.0 | 3.5 (1.9.1) | 9.0 | 10.50 | 3.1 | 2.3 |
| PCM in WAVE | ○ | 3.5 (1.9.1) | × | 10.50 | 3.1 | ? |
| Vorbis in WebM | ○ | 4.0 (2.0) | × | 10.60 | 3.1 (インストールが必要) |
? |
| Vorbis in Ogg | ○ | 3.5 (1.9.1) | × | 10.50 | 3.1 (インストールが必要) |
? |
| MP3 | ○ (Not in Chromium) |
部分的 | 9.0 | × | 3.1 | ? |
| MP3 in MP4 |
? |
? | ? | ? | ? | ? |
| AAC in MP4 |
○ |
部分的 |
9.0 | × | 3.1 | ? |
| Opus in Ogg | 27.0 | 15.0 (15.0) | ? | ? | ? | × |
複数のフォーマットに対応させる方法
source要素で指定します。
<audio controls=""> <source src="sample.ogg" type="audio/ogg" /> <source src="sample.mp3" type="audio/mpeg" /> 非対応 </audio>
イベント
| イベント | 発生タイミング |
|---|---|
| error | エラーが発生したとき。詳細はHTMLMediaElement.errorで確認できる |
| ︙ |
音量
既定の音量
Firefoxでは、ユーザー設定のmedia.default_volumeで既定の音量を設定できます。これの初期値は1.0となっており、最大音量で再生されます。
音量スライダー
Chromeは67以降、音量スライダーが表示されなくなり調整ができなくなっていますが、この仕様はchrome://flags/#enable-modern-media-controlsで変更できます。audio - Chrome missing volume slider? - Super User
| New Media Controlsの値 | 外観 |
|---|---|
| Default |  |
| Disabled |  |
トラブル対処法
音が出ない
Firefoxで再生したとき、「メディアリソース http://example.com/sample.mp3 をデコードできませんでした。エラー: Error Code: NS_ERROR_DOM_MEDIA_MEDIASINK_ERR (0x806e000b)」「Details: OnMediaSinkAudioError」としてエラーとなることがあります。これはオーディオ デバイスに起因するブラウザの問題のため、ブラウザを再起動することで解決します。Firefox HTML5 Audio: Media resource could not be decoded (OnMediaSinkAudioError) - Stack Overflow