HTML初心者リファレンス『audioタグ』基本編+応用編~音声ファイルを埋め込む方法~

ホームページで音声ファイルを埋め込んで紹介したい!そんな時に使える、便利なタグをご存じですか?今回ご紹介するのは、音声ファイルを埋め込む『audioタグ』について。

まずはaudioタグの基本的な書き方から学習し、属性を使用して再生位置を指定したり、ダウンロード禁止にしたり、自動再生させたり、より自分好みにカスタマイズできるようになりましょう!

audioタグを導入して、より使い勝手の良いページを作成するには?

今回は、audioタグの

・基本的な使い方
・audioタグと類似タグ『videoタグ』との違い

・属性を使用したaudioタグの詳細な設定方法

について説明します。

audioタグとは

audioタグの読み方

audioタグは「オーディオタグ」と読みます。

audioタグの説明

名前からもわかる通り、audioタグを使用することで、HTML文書内に音声ファイルを埋め込むことができます。直接音声ファイルを埋め込むほか、ストリーミングメディアの指定も可能です。

audioタグで利用できる属性

audioタグでは以下の属性を使うことができます。

属性 説明
グローバル属性 全要素で使用可能な属性(class属性など)
autoplay属性 再生可能な状態に遷移した後、即座にコンテンツを再生する
controls属性 各機能を制御するコントロールを表示する
(再生・一時停止・音量調節・シーク)
crossorigin属性  CORS(オリジン間リソース共有)への対応を提供する

※CORSとは別のオリジン(https://yahoo.co.jp:443:プロトコル+ドメイン+ポート番)のサーバへのアクセスを許可できる仕組みのこと

 anonymous属性  CORSリクエストで資格情報フラグをsmae-originに設定
use-credentials属性  CORSリクエストで資格情報フラグをincludeに設定
currentTime属性  コンテンツの現在の再生位置を秒単位で返す
duration属性  メディアの音声の合計の長さを秒単位で返す
loop属性  コンテンツ再生終了後、自動的に先頭に戻る
muted属性  初期状態のとき消音を設定する
preload属性  ユーザにコンテンツに関するヘルプ情報を与える
・none:事前に音声を読み込まないように指示する
・metadata:音声のメタデータを読み込む(長さ等)
・auto:ファイル全体をがダウンロード可能であることを示す
src属性 埋め込むコンテンツのURLを指定する
注意
この他にも試験中の属性がありますが、完全にサポートされるまで使用しないようにしましょう

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 3
Edge 12
Firefox 3.5
nternet Explorer  9
Opera  10.5
Safari  3.1
スマートフォン用ブラウザ 対応状況
Android webview  3
Android版Chrome  18
Android版Firefox  4
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  1.0

audioタグの基本的な使い方

audioタグの使い方

では実際に音声ファイルを埋め込んだコードを見ながら、audioタグの使い方を見ていきましょう。audioタグは、src属性とcontrols属性とセットで使います。

src=””の中には、その音源があるURLを、controlsは記載するだけで再生・停止・音量調節などを行う「オーディオプレイヤー」が表示されます。

このオーディオプレイヤーはChrome、Safari、Edgeなど、ブラウザごとに見た目が異なります。

See the Pen
audioタグ
by rabbittyu (@rabbittyu)
on CodePen.

 

audioタグと類似する『videoタグ』との違い

audioタグと似たタグに『videoタグ』が存在します。videoタグは、HTML文書内に動画を埋め込むタグで、埋め込みという点では共通していますが、埋め込むのは動画なので音声ファイルを埋め込むときはaudioタグを使用しましょう。

しかしYouTubeにアップされているフリー音源や、許可取得済みの音源、自分の音源などを挿入する際はvideoタグを使用することで、読者にその音源を動画として視聴させることができます。

audioタグの応用的な使い方

loop属性でループ再生させる

属性に『loop』を指定し、終了後に自動的にコンテンツの先頭に戻るように指定しました。

See the Pen
PozeQzG
by rabbittyu (@rabbittyu)
on CodePen.

autoplay属性とmuted属性で消音状態で自動再生させる

自動再生は非常に便利に見えますが、実は読者にとって有難くないこともあるのです。例えば大音量の設定のままパソコンでページを読み込んだ時や、電車でミュートにしないままページを読み込んだ時、音声ファイルが再生されると読者にとっては不都合になることが多いです。

そこでここでは初期状態で消音にする『muted』を指定し、消音状態での再生を設定しました。こうすることで、読者は準備をしっかり整えてから音声ファイルを試聴できますね。

See the Pen
dyXedpb
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はHTML文書に音声ファイルを埋め込む『audioタグ』について解説しました。直接埋め込むことで、そのページ内にとどまりながら音声を再生できるので、とても使いやすくなりましたね!

属性の中には複雑なものもありますが、src、loop、autoplay、mutedの3つが使えれば問題ないでしょう。ぜひ自分の作成しているページに組み込んで、より汎用性の高いサイトをさくせいしてみてくださいね。

参考文献:MDN web docs <audio>:埋め込み音楽要素

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?