audio要素の使い方

音楽や録音をページ内で再生し、聞けない人には内容を読む方法も用意できます。

先に結論

最小例

<audio controls preload="metadata">
  <source src="/media/lesson.ogg" type="audio/ogg; codecs=opus">
  <source src="/media/lesson.mp3" type="audio/mpeg">
  このブラウザーでは音声を再生できません。
  <a href="/media/lesson.mp3">音声ファイルを開く</a>
</audio>
<p><a href="/transcripts/lesson.html">音声のテキスト版を読む</a></p>

URLは例です。実際に使うときは、音声ファイルとテキスト版を同じサイトに用意し、リンク先を正しい場所に変えます。

操作部品を表示する

controlsを付けると、ブラウザーが再生・一時停止などの操作部品を表示します。細かな見た目や操作方法は、ブラウザーや端末で異なります。

controlsを外すと、利用者が操作する部品がなくなり、音声を再生しにくくなることがあります。独自の操作画面を作る場合は、キーボードで操作できることや、ボタンの名前と状態が支援技術に伝わることも必要です。

音声ファイルの候補を並べる

sourceは、再生候補のファイルを示します。typeには、その候補の形式を指定します。ブラウザーが対応していないと判断した候補を、読み込む前に飛ばせる場合があります。

形式やcodecへの対応はブラウザーや端末によって異なります。候補を複数書いても、どの環境でも再生できるとは限りません。公開前に実際のファイルを試してください。

audioにsrc属性を直接指定する書き方もあります。その場合は、子要素のsourceに候補を並べる書き方と同時には使いません。ファイルを読み込めなかったときに備え、直接開けるリンクも用意すると安心です。

読み込みと自動再生

preload="metadata"は、音声全体ではなく長さなどの情報を先に取得してほしいというヒントです。ブラウザーが実際にどこまで読み込むかは一定ではありません。

autoplayを書いても、ブラウザーが再生を止めることがあります。利用者の設定などが関係するため、自動再生だけに頼らず、本人が押せる再生ボタンを用意しましょう。JavaScriptのplay()も、再生できないときは失敗することがあります。

聞けない場合のテキストを用意する

録音された音声だけで情報を伝える場合は、内容と同じ情報を読めるテキスト版も用意します。これは、聴覚に頼れない人だけでなく、音を出せない場所にいる人にも役立ちます。

audioの中に書いた文章は、主にaudio要素に対応しない古いブラウザー向けです。ファイルの読み込み失敗時にその文章が必ず表示されるわけではありません。テキスト版へのリンクは、例のようにaudioの外にも置きます。

字幕や章の情報にはtrackを関連付けられます。ただし、audioには字幕を映像の上に表示する再生領域がありません。属性や字幕ファイルの使い方はtrack要素の説明を参照し、文章で内容を伝える必要があるときは別のテキスト版も用意してください。

よくある間違い

• controlsも操作できる独自UIもなく、再生方法が分からない状態にする。
• preloadを書けば、音声全体が必ず先読みされると思い込む。
• autoplayがすべてのブラウザーで必ず動くと思い込む。
• audioの中の文章が、ファイル再生に失敗したときの案内にもなると考える。
• 音声だけで伝えた内容に、読めるテキスト版を用意しない。

Atlasで詳しく確認する

audioのcontent model、resource selection、network / ready state、play()のPromise、HTML-AAM、Evidenceの範囲は、Yugien Atlasのaudio要素ページで確認できます。sourceの親要素別の候補選択はsource要素の使い方とAtlasのsource要素、trackの仕様・WebVTT・未実施のEvidenceはAtlasのtrack要素ページ、共通media処理と映像を持つ要素との違いはvideo要素も参照してください。