ホームページで音声ファイルを埋め込んで紹介したい！そんな時に使える、便利なタグをご存じですか？今回ご紹介するのは、音声ファイルを埋め込む『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>:埋め込み音楽要素
