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

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
音声の埋め込み
について学びたい方へ前回は、「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
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog