HTMLには音声ファイルを埋め込むaudioタグがあります。audioタグは属性を付与することでオーディオプレイヤーを表示させたり、ループ再生することができます。
この記事では、「audioタグと使い方と属性」について解説していきます。
この記事のゴールは「audioタグの役割と属性について理解すること」です。
いっしょに学習していきましょう。
- HTMLのaudioタグの基礎知識
なお、音声ファイルを埋め込むことができるaudioタグの他に、動画ファイルを埋め込むvideoタグがあります。videoタグについては下記の記事で解説していますので、ご一読ください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
HTMLのaudioタグとは：音声ファイルを埋め込む
audioタグは、音声ファイルを埋め込むことができます。audioタグはHTML5から採用された比較的新しいタグです。
基本書式
<audio src=”音声ファイル”></audio>基本書式にコードを当てはめると次のようになります。
<audio controls src="water.mp3" type="audio/mp3">水が流れる音</audio>出力結果
audioタグにcontrols属性を付与すると、オーディオプレイヤーが表示され、再生・停止や音量調節などができるようになります。
audioタグで使用できる属性一覧
audioタグには属性を指定することで、挙動を設定することができます。
下記がaudioタグで使用できる属性の一覧です。
- controls：オーディオプレイヤーを表示
- autoplay：音声を自動再生する
- loop：音声を繰り返し再生
- preload：音声データを事前に読み込ませるかどうか指定できる
autoplayを指定していると、preloadの値は無視される - muted：音声を出さない（ミュート設定）
これらの属性について一つずつ解説します。
audioタグの属性：オーディオプレイヤーを表示するcontrols
controls属性を指定すると、音量調節機能、再生・停止ボタン、再生位置のバーなどを備えたオーディオプレイヤーが表示されます。
<audio controls src="water.mp3" type="audio/mp3">水が流れる音</audio>出力結果
audioタグの属性：音声を自動再生するautoplay
autoplay属性を指定すると、Webページが読み込まれ、音声が再生可能な状態になったら音声が自動再生されます。
<audio controls autoplay muted src="water.mp3" type="audio/mp3">水が流れる音</audio>出力結果
audioタグの属性：音声を繰り返し再生するloop
loop属性を指定すると、音声が最後まで再生されると自動的に最初に戻って音声が再生されるようになります。
<audio controls loop src="water.mp3" type="audio/mp3">水が流れる音</audio>出力結果
audioタグの属性：音声データを事前に読み込ませるかどうか指定できるpreload
preload属性は、あらかじめ音声データを読み込んでおくかどうか指定することができます。
<audio controls preload="auto" src="water.mp3" type="audio/mp3">水が流れる音</audio>preload属性は、以下の3つの値を適用できます。
- none：音声データの事前読み込み禁止
- metadata：音声のメタデータだけ事前読み込み
- auto：ファイル全体を事前に読み込みする
なお、autoplay属性を指定していると、preloadの値は無視されます。
audioタグで、sourceタグを使って音声データを複数指定する方法
audioタグではさまざまな音声データ形式を扱うことができます。
ブラウザによっては、mp3形式に対応していても他の形式には対応していない、ということがあります。複数の音声データ形式を使いたいときには、下記のようにsourceタグを使って複数の形式を指定することができます。
指定した全ての形式が再生されるわけではなく、対応している一つのみが再生されます。
<audio controls>
<source src="audio.mp3" type="audio/mp3"/>
<source src="audio.ogg" type="audio/ogg"/>
<source src="audio.wav" type="audio/wav"/>
</audio>
まとめ
audioタグについて解説しました。audioタグは音声データをブラウザで扱う際に有用なタグになります。音声形式によっては対応していないブラウザがあるため、sourceタグを使って対応しましょう！
audioタグまとめ
- audioタグは、音声を埋め込むタグ
- audioタグの属性で、さまざまな設定を付与することができる
- sourceタグで音声データのファイル形式を複数指定できる
一つ、確かな理解を積み上げましたね。
ただ「理解した」と「実務で使える」の間には、もう一段ギャップがあります。なんとなく作れても、実務基準ではコードにムダや間違いがあるとみなされることがあります。自分では気づけない、そのズレをどう埋めるかが次の課題です。
そのギャップを埋める一番早い方法は、実際の案件レベルの制作を、メンターに見てもらいながら進めることです。
ZeroPlus Gateでは、30日間無料で、正しくWebサイトを作る力が身につく実践型の学習環境を提供しています。
- メンターとあなただけの学習ロードマップを作れる
- 現場経験豊富なプロへ回数無制限で質問ができる
- 元ランサーズの技術責任者監修のカリキュラム
このレベルの環境を、入会金も月謝も一切なしで提供しているのはZeroPlus Gateだけです。ただし、参加者の数には制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
登録は30秒、今すぐ次の一歩へ
