- HOME
- > BLOG CATEGORY
- 【HTML】audioタグの使い方、音声を埋め込む方法について解説

- お知らせ
- NEW 2023.06.01 【CSS】画像の透過について、mix-blend-modeを使ってみよう
- お知らせ
- 2023.05.18 【WordPress】各ページ背景画像の指定についてbody_classを解説
- お知らせ
- 2023.05.11 【WordPress】CPT UI インポート/エクスポート機能について解説
こんな方に読んでほしい
音声の埋め込み
について学びたい方へ前回は、「videoタグ」について解説いたしました。
videoタグの使い方、埋め込み方法、自動再生やループ、音声についての解説はコチラから
今回は、「audioタグ」について解説いたします。
HTML5から「audioタグ」が導入されるようになりました。
audioタグとは、主にHTML文書内に音声を埋め込む際に使用します、音声の自動再生、ループ再生や音声のコントロールといった制御も可能になります。
[記事の内容]
audioタグ
とは、HTML5から導入されるようになりました。
audioタグは音声を埋め込む際に使います。音声ファイルを指定する際には、src
または、source
で指定します。
audioタグについての書き方は以下になります。
<!-- audioタグの使用例 -->
<audio src="音声URL"></audio>
controls属性
とは、再生、一時停止、ボリューム、再生位置などのコントローラー機能付き状態で
各ブラウザの標準のコントローラーが表示されます、必ず確認はしておきましょう。
controls属性について
<audio controls src="sample.mp3"></audio>
loop属性
とは、音声をループ再生します、音声が終わるとリピート再生になります。
上記で解説した、「controls属性」と同時に指定したい場合は半角スペースで開けて指定します。
loop属性について
<audio controls loop src="sample.mp3"></audio>
autoplay属性
とは、ページを読み込んだ際に音声を自動再生してくれます
autoplayを指定する際に注意点があります。
ユーザーの観点から、ページを開いた瞬間に音声が自動で流れ、ユーザーにとって不快な思いをさせてしまう恐れがあるため、できるだけ自動再生は避けるべきだと考えております。
<audio controls autoplay src="sample.mp3"></audio>
注意ポイント!
いきなり、音声が流れるのを避けるため、
スマートフォンやタブレットに自動再生(autoplay属性)の設定はできません。
muted属性
とは、音声の音をデフォルトで消して表示させます
※音声の音を取り除くわけではなく、音量の上げ下げは可能です
loop属性について
<audio controls muted src="sample.mp3"></audio>
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
タグを使う事により、複数指定が可能になります。
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」のファイル形式を読み込み対応していた場合は、そのファイル形式のみが流れます。
今回はこれで以上です。
2021.07.27
2021.07.09
2021.07.06
2021.07.02
2023.06.01
2023.05.18
2023.05.11
2023.05.09
2023.05.04
2023.04.27
2022.06.30
2020.03.22
2020.03.06
2020.02.22
© 2020 shu-naka-blog