SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

audioタグとは

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」のファイル形式を読み込み対応していた場合は、そのファイル形式のみが流れます。

関連記事

【HTML】iframeの使い方 HTMLにコンテンツを埋め込もう!
iframeとは、HTML文書を埋め込むことができます。
【HTML】videoタグの使い方、動画を埋め込む方法について解説
videoタグとは、主にHTML文書内に動画を埋め込む際に使用します。

まとめ

今回はこれで以上です。

POINT
  • audioタグとは、主にHTML文書内に音声を埋め込む際に使用します。
  • autoplay属性は、スマートフォンやタブレットに自動再生の設定はできません。
  • sourceタグを使う事により、複数指定が可能になります。
  • type属性でファイルの種類を指定します。audio/ファイルの形式になります。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top