【HTML】audioタグの使い方!!音声を埋め込む方法について解説

シュウ

今回は【HTML】audioタグの使い方!!音声を埋め込む方法の解説になります！

こんな方に読んでほしい

HTMLを学び始めた方へ
音声の埋め込みについて学びたい方へ
今回はaudioタグ自動再生、ループ再生や再生・停止ボタンなどの解説になります。

前回は、「videoタグ」について解説いたしました。
videoタグの使い方、埋め込み方法、自動再生やループ、音声についての解説はコチラから

今回は、「audioタグ」について解説いたします。
HTML5から「audioタグ」が導入されるようになりました。
audioタグとは、主にHTML文書内に音声を埋め込む際に使用します、音声の自動再生、ループ再生や音声のコントロールといった制御も可能になります。

[記事の内容]

audioタグとは

audioタグとは、HTML5から導入されるようになりました。
audioタグは音声を埋め込む際に使います。音声ファイルを指定する際には、srcまたは、sourceで指定します。
audioタグについての書き方は以下になります。

<!-- audioタグの使用例 -->
<audio src="音声URL"></audio>

指定できる属性

controls属性
再生、一時停止、ボリューム、再生位置などのコントローラー機能付き状態で表示されます
loop属性
動画をループ再生します、リピート再生になります
autoplay属性
ページを読み込んだ際に動画を自動再生してくれます
muted属性
動画の音声をデフォルトで消して表示させます
※動画の音声を取り除くわけではなく、音量の上げ下げは可能です
crossorigin属性
crossorigin属性は、CORS（Cross-Origin Resource Sharing / クロスドメイン通信）の設定をします。属性値が空、または次の値以降の際は、anonymousが指定されたのと同様になります。
「anonymous」のユーザー認証情報は不要になります。(SSL認証書、HTTP認証など)
「use-credentials」ユーザー認証情報を求めます。
preload
動画データをあらかじめ読み込んで表示させておく指定になります
「none」データの事前読み込みはしないようにします
「auto」ファイル全体を事前に読み込むようにします
「metadata」動画のメタデータ(長さやファイルサイズ)の情報のみ読み込むようにします

コントローラー表示について(controls属性)

controls属性とは、再生、一時停止、ボリューム、再生位置などのコントローラー機能付き状態で
各ブラウザの標準のコントローラーが表示されます、必ず確認はしておきましょう。

controls属性について

<audio controls src="sample.mp3"></audio>

音声をループ再生について(loop属性)

loop属性とは、音声をループ再生します、音声が終わるとリピート再生になります。
上記で解説した、「controls属性」と同時に指定したい場合は半角スペースで開けて指定します。

loop属性について

<audio controls loop src="sample.mp3"></audio>

音声の自動再生について(autoplay属性)

autoplay属性とは、ページを読み込んだ際に音声を自動再生してくれます
autoplayを指定する際に注意点があります。
ユーザーの観点から、ページを開いた瞬間に音声が自動で流れ、ユーザーにとって不快な思いをさせてしまう恐れがあるため、できるだけ自動再生は避けるべきだと考えております。

<audio controls autoplay src="sample.mp3"></audio>

注意ポイント！
いきなり、音声が流れるのを避けるため、
スマートフォンやタブレットに自動再生(autoplay属性)の設定はできません。

音声を音量について(muted属性)

muted属性とは、音声の音をデフォルトで消して表示させます
※音声の音を取り除くわけではなく、音量の上げ下げは可能です

loop属性について

<audio controls muted src="sample.mp3"></audio>

音声データをあらかじめ読み込んで表示について(preload属性)

preload属性とは、音声データをあらかじめ読み込んで表示させておく指定になります。
「none」データの事前読み込みはしないようにします。
「auto」ファイル全体を事前に読み込むようにします。
「metadata」音声のメタデータ(長さやファイルサイズ)の情報のみ読み込むようにします。

<!--none-->
<audio controls preload="none" src="sample.mp3"></audio>

<!--auto-->
<audio controls preload="auto" src="sample.mp3"></audio>

<!--metadata-->
<audio controls preload="metadata" src="sample.mp3"></audio>

音声データを複数指定する方法について

今まではファイル形式の「mp3」のみでの解説でしたが、ファイル形式には他に「ogv、wav、ogg」などが存在します。
ブラウザによっては、「mp3」は対応しているが、他のファイル形式は対応していない問題がでてきます。
そのような場合は複数指定が必要になってきます。

sourceタグで複数の指定をおこなう

sourceタグを使う事により、複数指定が可能になります。
audio〜/audioの間に、sourceタグを指定し、その中にsrcに動画のURLを指定します。
書き方は以下になります。

<!-- audioタグの使用例 下記のように記述を直します -->
<audio src="動画URL"></audio>

<!-- sourceタグを使い複数指定 -->
<audio controls>
  <source src="動画URL" type="ファイルの種類"/>
  <source src="動画URL2" type="ファイルの種類"/>
  <source src="動画URL3" type="ファイルの種類"/>
</audio>

また、後ろの方に、type属性でファイルの種類を指定します。audio/ファイルの形式になります。
type属性を指定した場合は以下になります。

<!-- sourceタグを使い複数指定 -->
<audio controls>
  <source src="sample.mp4" type="audio/mp3"/>
  <source src="sample.ogv" type="audio/wav"/>
  <source src="sample.wmv" type="audio/ogg"/>
</audio>

上記の指定方法だと3つの動画を指定していますが、3つとも動画が流れる訳ではありません。
最初の「mp3」を読み込み、ブラウザが未対応だった場合、次の「wav」のファイル形式を読み込み対応していた場合は、そのファイル形式のみが流れます。