SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのaudioタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:12動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の百七本目は、オーディオタグです。
  4. 0:08オーディオは、音声をウェブページに埋め込んで再生するための要素です。
  5. 0:14音楽、効果音、語学や講義などの音声教材を、プラグインなしでそのまま扱えます。
  6. 0:20ファイルを指定し、コントロールスを付ければ、再生や一時停止、音量調整といった操作部品をブラウザーが表示してくれます。
  7. 0:29今回は、オーディオの意味、主な属性、ソースタグとの組み合わせ、対応フォーマット、
  8. 0:34コード例、互換性、よくある間違いまで順番に確認します。
  9. 0:40オーディオは、どんな場面で使うのでしょうか。
  10. 0:43代表例は、記事でも取り上げられている音声教材です。
  11. 0:48たとえば語学の発音を聞かせたいときや、講義の録音を公開したいとき、音声そのものが主役になります。
  12. 0:57そのほか、音楽の試聴、ポッドキャスト、インタビューの音声などにも向いています。
  13. 1:04大切なのは、音声ファイル自体は別途用意する必要がある点です。
  14. 1:09オーディオタグは再生する仕組みであって、音声を作る道具ではありません。
  15. 1:15また、音だけで情報を完結させず、内容を文字でも読めるようにしておくと、聞けない環境の人にも伝わります。
  16. 1:24基本の書き方を確認します。
  17. 1:26オーディオは、開始タグと終了タグを明示して使う要素です。
  18. 1:31中身が空に見えても、終了タグを省略しないでください。
  19. 1:35最も簡単な形は、エスアールシー属性に音声ファイルのパスを指定し、コントロールスを付ける形です。
  20. 1:43タグの中には、再生できない環境向けの代替内容として、ファイルへのリンクなどを置けます。
  21. 1:50画面の例では、レッスンというエムピースリーファイルを指定し、中に同じファイルへのリンクを入れています。
  22. 1:58まずはこの形を覚えれば、基本は十分です。
  23. 2:01記事の活用事例をもとに、コード例を詳しく見ます。
  24. 2:05例では、コントロールスで操作部品を表示し、プリロードにはメタデータを指定しています。
  25. 2:11これは、長さなどの基本情報だけを先に読み込む指定です。
  26. 2:15その下には、文字起こしとして、音声の内容を文章で書いた段落が置かれています。
  27. 2:21聞いて学ぶ人と、読んで学ぶ人の両方に対応する構成です。
  28. 2:25練習するときは、入門で作ったファイルをコピーし、この例をボディの適切な位置に置いてください。
  29. 2:31保存して再読み込みし、再生ボタンで実際に音が出るかを確認しましょう。
  30. 2:36主な属性を二回に分けて見ます。
  31. 2:39まずエスアールシーは、読み込む音声ファイルのユーアールエルです。
  32. 2:44存在するファイルへの正しいパスを指定することが大前提で、パスが間違えば音は出ません。
  33. 2:50次にコントロールスは、ブラウザー標準の再生操作ユーアイを表示する真偽属性です。
  34. 2:57これがないと、見た目には何も表示されず、利用者が再生できません。
  35. 3:02基本的には必ず付けると考えてください。
  36. 3:05プリロードは、先読みのヒントで、ノン、メタデータ、オートの三つから選びます。
  37. 3:11ただし、これはあくまでヒントであり、ブラウザーが常に従うとは限りません。
  38. 3:17続いて、再生の動きに関わる属性です。
  39. 3:19オートプレイは自動再生を求める真偽属性ですが、多くのブラウザーでは、音が出る自動再生はポリシーで制限されます。
  40. 3:28ページを開いた瞬間に大きな音が鳴るのを防ぐためです。
  41. 3:32ミューテッドは、初期状態で音を消しておく属性で、ミュート状態なら自動再生が許可されやすいという関係もあります。
  42. 3:40ループは、再生が終わったら最初に戻って繰り返す属性で、ビージーエムなどに向いています。
  43. 3:47なお、別の配信元からファイルを読む場合には、クロスオリジン属性と配信側の許可を合わせる必要もあります。
  44. 3:55少し進んだ書き方として、ソースタグとの組み合わせを紹介します。
  45. 3:59オーディオに直接エスアールシーを書く代わりに、中にソース要素を複数並べると、
  46. 4:05ブラウザーは上から順に確認し、自分が再生できる形式を選んでくれます。
  47. 4:10タイプ属性に形式を書いておくと、判定が速くなります。
  48. 4:14代表的な音声形式には、エムピースリー、オグボルビス、ウェブエム、エーエーシーなどがあります。
  49. 4:21現在はエムピースリーが広く再生できますが、念のため複数の形式を用意する書き方も知っておくと安心です。
  50. 4:28ソースを使う場合は、オーディオ側のエスアールシーは書きません。
  51. 4:33音が出ないときの考え方を整理します。
  52. 4:35原因は大きく二つあります。
  53. 4:37一つはファイル取得の問題です。
  54. 4:40エスアールシーのパスが間違っている、ファイルが置かれていない、といった場合です。
  55. 4:46もう一つは、ブラウザーがその音声形式、つまりコーデックに対応していない場合です。
  56. 4:52記事でも、音が出ない場合はファイル取得と対応コーデックの両方を確認するよう案内されています。
  57. 5:00確認の順番としては、まず開発者ツールでファイルが読み込めているかを見て、
  58. 5:05次に別のブラウザーでも再生できるかを試すと切り分けやすくなります。
  59. 5:10慌てず、一つずつ確かめましょう。
  60. 5:13使いやすさへの配慮も大切です。
  61. 5:15まずコントロールスを付けることで、再生や停止をマウスだけでなくキーボードでも操作しやすくなります。
  62. 5:23次に文字起こしです。
  63. 5:25音声の内容を文章でも用意しておけば、音を出せない場所にいる人、聞き取りが難しい人、
  64. 5:30内容を検索したい人にも情報が届きます。
  65. 5:35記事の事例で文字起こしが添えられていたのは、このためです。
  66. 5:40また、自動再生だけに頼る構成は避けてください。
  67. 5:43制限で再生されない場合に、利用者自身が再生ボタンを押せる形にしておくことが、
  68. 5:47確実で親切な設計です。
  69. 5:51ブラウザー互換性を確認します。
  70. 5:54記事が紹介するエムディーエヌのデータでは、オーディオ要素本体は、クロームが三以降、
  71. 6:00エッジが十二以降、ファイアフォックスが三点五以降、サファリが三点一以降から対応しています。
  72. 6:06非常に古いバージョンから使える、安定した要素です。
  73. 6:10ただし属性ごとには差があります。
  74. 6:12たとえばミューテッドはクローム十五以降、サファリ六以降、クロスオリジンはもっと新しいバージョンからです。
  75. 6:20また、要素が使えても音声形式への対応はブラウザーごとに異なります。
  76. 6:25対象の端末で実際に再生して確認する習慣を持ちましょう。
  77. 6:29まとめとして、よくある間違いを三つ挙げます。
  78. 6:32一つ目は、コントロールスを付け忘れることです。
  79. 6:36操作部品がなければ、利用者は再生のしようがありません。
  80. 6:40二つ目は、オートプレイが必ず効くと思い込むことです。
  81. 6:45音声の自動再生は制限されるのが普通だと考えてください。
  82. 6:49三つ目は、真偽属性の書き方です。
  83. 6:52コントロールスやループなどは、属性があるかないかで決まります。
  84. 6:57フォルスと書いても解除にはならず、解除したいときは属性自体を取り除きます。
  85. 7:03オーディオタグは、ファイルを指定し、コントロールスを付け、文字情報も添えるのが基本です。
  86. 7:10これで解説を終わります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

audioタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。音声を再生。controls を付け、内容を読める文字起こしも検討します。

解説記事・サンプルコードを読む：HTMLのaudioタグとは？属性・使い方・ブラウザー互換性と活用例 →