WEBVTT

1
00:00:00.000 --> 00:00:00.945
こんにちは。

2
00:00:00.945 --> 00:00:04.253
エイチティーエムエルリファレンス解説です。

3
00:00:04.253 --> 00:00:08.979
エイチティーエムエルタグ編の百七本目は、オーディオタグです。

4
00:00:08.979 --> 00:00:14.335
オーディオは、音声をウェブページに埋め込んで再生するための要素です。

5
00:00:14.335 --> 00:00:20.321
音楽、効果音、語学や講義などの音声教材を、プラグインなしでそのまま扱えます。

6
00:00:20.321 --> 00:00:29.458
ファイルを指定し、コントロールスを付ければ、再生や一時停止、音量調整といった操作部品をブラウザーが表示してくれます。

7
00:00:29.458 --> 00:00:34.735
今回は、オーディオの意味、主な属性、ソースタグとの組み合わせ、対応フォーマット、

8
00:00:34.735 --> 00:00:40.012
コード例、互換性、よくある間違いまで順番に確認します。

9
00:00:40.012 --> 00:00:43.953
オーディオは、どんな場面で使うのでしょうか。

10
00:00:43.953 --> 00:00:48.432
代表例は、記事でも取り上げられている音声教材です。

11
00:00:48.432 --> 00:00:57.031
たとえば語学の発音を聞かせたいときや、講義の録音を公開したいとき、音声そのものが主役になります。

12
00:00:57.031 --> 00:01:04.018
そのほか、音楽の試聴、ポッドキャスト、インタビューの音声などにも向いています。

13
00:01:04.018 --> 00:01:09.393
大切なのは、音声ファイル自体は別途用意する必要がある点です。

14
00:01:09.393 --> 00:01:15.663
オーディオタグは再生する仕組みであって、音声を作る道具ではありません。

15
00:01:15.663 --> 00:01:24.800
また、音だけで情報を完結させず、内容を文字でも読めるようにしておくと、聞けない環境の人にも伝わります。

16
00:01:24.800 --> 00:01:26.913
基本の書き方を確認します。

17
00:01:26.913 --> 00:01:31.464
オーディオは、開始タグと終了タグを明示して使う要素です。

18
00:01:31.464 --> 00:01:35.690
中身が空に見えても、終了タグを省略しないでください。

19
00:01:35.690 --> 00:01:43.330
最も簡単な形は、エスアールシー属性に音声ファイルのパスを指定し、コントロールスを付ける形です。

20
00:01:43.330 --> 00:01:50.319
タグの中には、再生できない環境向けの代替内容として、ファイルへのリンクなどを置けます。

21
00:01:50.319 --> 00:01:58.609
画面の例では、レッスンというエムピースリーファイルを指定し、中に同じファイルへのリンクを入れています。

22
00:01:58.609 --> 00:02:01.860
まずはこの形を覚えれば、基本は十分です。

23
00:02:01.860 --> 00:02:05.379
記事の活用事例をもとに、コード例を詳しく見ます。

24
00:02:05.379 --> 00:02:11.538
例では、コントロールスで操作部品を表示し、プリロードにはメタデータを指定しています。

25
00:02:11.538 --> 00:02:15.497
これは、長さなどの基本情報だけを先に読み込む指定です。

26
00:02:15.497 --> 00:02:21.070
その下には、文字起こしとして、音声の内容を文章で書いた段落が置かれています。

27
00:02:21.070 --> 00:02:25.029
聞いて学ぶ人と、読んで学ぶ人の両方に対応する構成です。

28
00:02:25.029 --> 00:02:31.774
練習するときは、入門で作ったファイルをコピーし、この例をボディの適切な位置に置いてください。

29
00:02:31.774 --> 00:02:36.760
保存して再読み込みし、再生ボタンで実際に音が出るかを確認しましょう。

30
00:02:36.760 --> 00:02:39.146
主な属性を二回に分けて見ます。

31
00:02:39.146 --> 00:02:44.238
まずエスアールシーは、読み込む音声ファイルのユーアールエルです。

32
00:02:44.238 --> 00:02:50.920
存在するファイルへの正しいパスを指定することが大前提で、パスが間違えば音は出ません。

33
00:02:50.920 --> 00:02:57.125
次にコントロールスは、ブラウザー標準の再生操作ユーアイを表示する真偽属性です。

34
00:02:57.125 --> 00:03:02.216
これがないと、見た目には何も表示されず、利用者が再生できません。

35
00:03:02.216 --> 00:03:05.239
基本的には必ず付けると考えてください。

36
00:03:05.239 --> 00:03:11.284
プリロードは、先読みのヒントで、ノン、メタデータ、オートの三つから選びます。

37
00:03:11.284 --> 00:03:17.012
ただし、これはあくまでヒントであり、ブラウザーが常に従うとは限りません。

38
00:03:17.012 --> 00:03:19.794
続いて、再生の動きに関わる属性です。

39
00:03:19.794 --> 00:03:28.295
オートプレイは自動再生を求める真偽属性ですが、多くのブラウザーでは、音が出る自動再生はポリシーで制限されます。

40
00:03:28.295 --> 00:03:32.314
ページを開いた瞬間に大きな音が鳴るのを防ぐためです。

41
00:03:32.314 --> 00:03:40.815
ミューテッドは、初期状態で音を消しておく属性で、ミュート状態なら自動再生が許可されやすいという関係もあります。

42
00:03:40.815 --> 00:03:47.461
ループは、再生が終わったら最初に戻って繰り返す属性で、ビージーエムなどに向いています。

43
00:03:47.461 --> 00:03:55.344
なお、別の配信元からファイルを読む場合には、クロスオリジン属性と配信側の許可を合わせる必要もあります。

44
00:03:55.344 --> 00:03:59.919
少し進んだ書き方として、ソースタグとの組み合わせを紹介します。

45
00:03:59.919 --> 00:04:05.232
オーディオに直接エスアールシーを書く代わりに、中にソース要素を複数並べると、

46
00:04:05.232 --> 00:04:10.545
ブラウザーは上から順に確認し、自分が再生できる形式を選んでくれます。

47
00:04:10.545 --> 00:04:14.382
タイプ属性に形式を書いておくと、判定が速くなります。

48
00:04:14.382 --> 00:04:21.170
代表的な音声形式には、エムピースリー、オグボルビス、ウェブエム、エーエーシーなどがあります。

49
00:04:21.170 --> 00:04:28.549
現在はエムピースリーが広く再生できますが、念のため複数の形式を用意する書き方も知っておくと安心です。

50
00:04:28.549 --> 00:04:33.124
ソースを使う場合は、オーディオ側のエスアールシーは書きません。

51
00:04:33.124 --> 00:04:35.943
音が出ないときの考え方を整理します。

52
00:04:35.943 --> 00:04:37.979
原因は大きく二つあります。

53
00:04:37.979 --> 00:04:40.329
一つはファイル取得の問題です。

54
00:04:40.329 --> 00:04:46.594
エスアールシーのパスが間違っている、ファイルが置かれていない、といった場合です。

55
00:04:46.594 --> 00:04:52.858
もう一つは、ブラウザーがその音声形式、つまりコーデックに対応していない場合です。

56
00:04:52.858 --> 00:05:00.063
記事でも、音が出ない場合はファイル取得と対応コーデックの両方を確認するよう案内されています。

57
00:05:00.063 --> 00:05:05.467
確認の順番としては、まず開発者ツールでファイルが読み込めているかを見て、

58
00:05:05.467 --> 00:05:10.870
次に別のブラウザーでも再生できるかを試すと切り分けやすくなります。

59
00:05:10.870 --> 00:05:13.376
慌てず、一つずつ確かめましょう。

60
00:05:13.376 --> 00:05:15.837
使いやすさへの配慮も大切です。

61
00:05:15.837 --> 00:05:23.874
まずコントロールスを付けることで、再生や停止をマウスだけでなくキーボードでも操作しやすくなります。

62
00:05:23.874 --> 00:05:25.515
次に文字起こしです。

63
00:05:25.515 --> 00:05:30.436
音声の内容を文章でも用意しておけば、音を出せない場所にいる人、聞き取りが難しい人、

64
00:05:30.436 --> 00:05:35.357
内容を検索したい人にも情報が届きます。

65
00:05:35.357 --> 00:05:40.114
記事の事例で文字起こしが添えられていたのは、このためです。

66
00:05:40.114 --> 00:05:43.886
また、自動再生だけに頼る構成は避けてください。

67
00:05:43.886 --> 00:05:47.905
制限で再生されない場合に、利用者自身が再生ボタンを押せる形にしておくことが、

68
00:05:47.905 --> 00:05:51.924
確実で親切な設計です。

69
00:05:51.924 --> 00:05:54.115
ブラウザー互換性を確認します。

70
00:05:54.115 --> 00:06:00.397
記事が紹介するエムディーエヌのデータでは、オーディオ要素本体は、クロームが三以降、

71
00:06:00.397 --> 00:06:06.680
エッジが十二以降、ファイアフォックスが三点五以降、サファリが三点一以降から対応しています。

72
00:06:06.680 --> 00:06:10.332
非常に古いバージョンから使える、安定した要素です。

73
00:06:10.332 --> 00:06:12.669
ただし属性ごとには差があります。

74
00:06:12.669 --> 00:06:20.266
たとえばミューテッドはクローム十五以降、サファリ六以降、クロスオリジンはもっと新しいバージョンからです。

75
00:06:20.266 --> 00:06:25.087
また、要素が使えても音声形式への対応はブラウザーごとに異なります。

76
00:06:25.087 --> 00:06:29.032
対象の端末で実際に再生して確認する習慣を持ちましょう。

77
00:06:29.032 --> 00:06:32.637
まとめとして、よくある間違いを三つ挙げます。

78
00:06:32.637 --> 00:06:36.405
一つ目は、コントロールスを付け忘れることです。

79
00:06:36.405 --> 00:06:40.829
操作部品がなければ、利用者は再生のしようがありません。

80
00:06:40.829 --> 00:06:45.089
二つ目は、オートプレイが必ず効くと思い込むことです。

81
00:06:45.089 --> 00:06:49.513
音声の自動再生は制限されるのが普通だと考えてください。

82
00:06:49.513 --> 00:06:52.135
三つ目は、真偽属性の書き方です。

83
00:06:52.135 --> 00:06:57.214
コントロールスやループなどは、属性があるかないかで決まります。

84
00:06:57.214 --> 00:07:03.276
フォルスと書いても解除にはならず、解除したいときは属性自体を取り除きます。

85
00:07:03.276 --> 00:07:10.486
オーディオタグは、ファイルを指定し、コントロールスを付け、文字情報も添えるのが基本です。

86
00:07:10.486 --> 00:07:12.452
これで解説を終わります。