今回は【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属性
とは、再生、一時停止、ボリューム、再生位置などのコントローラー機能付き状態で
各ブラウザの標準のコントローラーが表示されます、必ず確認はしておきましょう。
<audio controls src="sample.mp3"></audio>
音声をループ再生について(loop属性)
loop属性
とは、音声をループ再生します、音声が終わるとリピート再生になります。
上記で解説した、「controls属性」と同時に指定したい場合は半角スペースで開けて指定します。
<audio controls loop src="sample.mp3"></audio>
音声の自動再生について(autoplay属性)
autoplay属性
とは、ページを読み込んだ際に音声を自動再生してくれます
autoplayを指定する際に注意点があります。
ユーザーの観点から、ページを開いた瞬間に音声が自動で流れ、ユーザーにとって不快な思いをさせてしまう恐れがあるため、できるだけ自動再生は避けるべきだと考えております。
<audio controls autoplay src="sample.mp3"></audio>
注意ポイント!
いきなり、音声が流れるのを避けるため、
スマートフォンやタブレットに自動再生(autoplay属性)の設定はできません。
音声を音量について(muted属性)
muted属性
とは、音声の音をデフォルトで消して表示させます
※音声の音を取り除くわけではなく、音量の上げ下げは可能です
<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」のファイル形式を読み込み対応していた場合は、そのファイル形式のみが流れます。
関連記事
まとめ
今回はこれで以上です。
- POINT
- audioタグとは、主にHTML文書内に音声を埋め込む際に使用します。
- autoplay属性は、スマートフォンやタブレットに自動再生の設定はできません。
- sourceタグを使う事により、複数指定が可能になります。
- type属性でファイルの種類を指定します。audio/ファイルの形式になります。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事