【HTML Living Standard】audio要素の使い方
audio要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
audioオブジェクトは、Webページに音声コンテンツを埋め込み、再生機能を提供するために使用されるオブジェクトです。このオブジェクトを使用することで、システムエンジニアを目指す開発者は、音楽、ポッドキャスト、効果音などの音声ファイルをWebサイトに簡単に組み込むことができます。
通常、audio要素はsrc属性を用いて再生したい音声ファイルのURLを指定します。また、controls属性を指定することで、ブラウザが標準で提供する再生ボタン、一時停止ボタン、音量調整スライダー、再生位置シークバーといったユーザーインターフェースを自動的に表示させることが可能です。これにより、ユーザーは特別な操作をすることなく、直感的に音声コンテンツを操作できます。
さらに、autoplay属性を設定すればページ読み込み時に自動で音声再生を開始させたり、loop属性で音声の繰り返し再生を設定したり、preload属性で音声データの事前読み込み方法（例えば、ページ読み込み時に全てをダウンロードするか、メタデータだけをダウンロードするかなど）をブラウザに指示したりするなど、細かな制御も行えます。
このaudioオブジェクトの利用により、ウェブサイト訪問者は特別なプラグインをインストールする必要なく、さまざまなデバイスやブラウザ上で直接高品質な音声コンテンツを視聴できるため、リッチなマルチメディア体験を提供するための重要な基盤となります。Webアプリケーションや動的なコンテンツにおいて、ユーザーエンゲージメントを高めるために不可欠な要素の一つです。
構文(syntax)
1<audio controls> 2 <source src="path/to/audio.mp3" type="audio/mpeg"> 3 <source src="path/to/audio.ogg" type="audio/ogg"> 4 お使いのブラウザはオーディオ要素をサポートしていません。 5</audio>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML audioタグで音声ファイルを再生する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML audioタグのサンプルコード</title> 7</head> 8<body> 9 10 <!-- 11 audioタグは、ウェブページに音声コンテンツを埋め込むために使用されます。 12 'controls'属性は、再生、一時停止、音量調整などの標準的な再生コントロールを表示します。 13 --> 14 <audio controls> 15 <!-- 16 <source>タグは、複数の音声フォーマットを提供するために使用されます。 17 ブラウザはリストの中から最初にサポートするフォーマットを選択し、再生を試みます。 18 'src'属性には音声ファイルのパスを、'type'属性にはそのMIMEタイプを指定します。 19 ここでは、例として 'sample.mp3' と 'sample.ogg' を指定しています。 20 実際の使用時には、存在する音声ファイルへのパスに置き換えてください。 21 --> 22 <source src="sample.mp3" type="audio/mpeg"> 23 <source src="sample.ogg" type="audio/ogg"> 24 <!-- 25 audioタグをサポートしない古いブラウザ向けに表示される代替テキストです。 26 --> 27 お使いのブラウザは音声要素をサポートしていません。 28 </audio> 29 30</body> 31</html>
HTMLのaudioタグは、ウェブページに音声コンテンツを埋め込むために使用される要素です。このタグを使うことで、ウェブサイト訪問者はブラウザ上で直接音声を再生できるようになります。
サンプルコードでは、<audio controls>と記述されています。ここで指定されているcontrols属性は、音声の再生、一時停止、音量調整といった標準的な再生コントロールをブラウザに表示させるための「属性」（要素に対する追加情報、引数に相当）として機能します。これにより、利用者が簡単に音声を操作できるようになります。
audioタグの中には、<source>タグを複数配置できます。これは、異なる音声フォーマット（例: MP3やOGG）のファイルをブラウザに提供するためのものです。<source>タグでは、src属性で音声ファイルのパスを、type属性でそのMIMEタイプを指定します。ブラウザはリストの中から最初にサポートするフォーマットを自動的に選択し、再生を試みます。
また、audioタグ内に直接テキストを記述することで、古いブラウザなど、audioタグをサポートしない環境向けの代替コンテンツを表示させることができます。このaudioタグ自体は、特定の処理結果を返す「戻り値」という概念を持ちません。このコードは、ユーザーがウェブページ上で音声を快適に楽しめるよう設計されています。
audioタグを利用する際は、controls属性を指定することで、再生や一時停止、音量調整などの標準的な操作パネルが表示されます。ウェブページに音声コンテンツを埋め込む際は、<source>タグを複数使用し、MP3やOggといった異なる音声フォーマットを提供することが重要です。これにより、様々なブラウザでの互換性を高めることができます。src属性には音声ファイルの正しいパスを、type属性には適切なMIMEタイプを必ず指定してください。サンプルコードのsrcは仮のパスですので、実際に使用する音声ファイルのパスに置き換えてください。また、audioタグ内に記述されたテキストは、音声再生に対応しないブラウザに表示される代替内容となります。
HTML Audio音量制御サンプル
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Audio 音量制御サンプル</title> 7</head> 8<body> 9 <!-- audio要素は、Webページに音声コンテンツを埋め込むために使用されます。 --> 10 <!-- src属性で音声ファイルのパスを指定します。 --> 11 <!-- controls属性を追加すると、再生/一時停止、音量調整、シークバーなどの標準的なUIコントローラが表示されます。 --> 12 <!-- muted属性を追加すると、ページロード時に音声が初期状態でミュートになります。ユーザーはコントローラでミュートを解除できます。 --> 13 <audio src="audio/sample.mp3" controls muted> 14 お使いのブラウザは音声要素をサポートしていません。 15 </audio> 16</body> 17</html>
HTMLのaudio要素は、Webページに音声コンテンツを埋め込むために使用されます。この要素を利用することで、ユーザーはブラウザ上で音楽や効果音などを再生できるようになります。audio要素自体に特定の引数や戻り値は存在せず、その動作は主に設定する属性によって制御されます。
提示されたサンプルコードでは、<audio>タグが使用されており、src属性で「audio/sample.mp3」という音声ファイルのパスを指定しています。これにより、ブラウザは指定された音声ファイルを読み込みます。
controls属性を追加すると、ブラウザが標準で提供する再生UI（ユーザーインターフェース）が表示されます。このUIには、再生・一時停止ボタン、再生進捗バー、そして音量調整スライダーなどが含まれており、ユーザーはこれらを使って直感的に音声を操作できます。
また、muted属性を指定することで、ページが読み込まれた際に音声が初期状態でミュート（消音）になります。ユーザーは表示されたコントローラの音量調整部分から、いつでもミュートを解除したり、音量を変更したりすることが可能です。
<audio>タグの内部に記述された「お使いのブラウザは音声要素をサポートしていません。」というテキストは、万が一ユーザーのブラウザがaudio要素に対応していない場合に表示される代替コンテンツです。これにより、ブラウザの互換性に関わらず、ユーザーに適切な情報を提供できます。audio要素は、Webサイトに多様な聴覚体験を追加するための重要な要素です。
このサンプルコードでは、src属性で音声ファイルのパスを正確に指定することが重要です。パスが間違っていると音声は再生されませんので注意してください。また、controls属性を追加しないと、ユーザーは再生や一時停止、音量調整などの操作ができません。ユーザーが音量を含め自由に操作できるように、必ず含めるようにしましょう。muted属性は、Webページ表示時に音声を初期状態でミュートにする機能です。これにより、意図しない大きな音でユーザーを驚かせることを防ぎ、ユーザー体験に配慮できます。多くのモダンブラウザでは自動再生に制限が設けられているため、適切に利用することが推奨されます。audioタグの中のテキストは、お使いのブラウザがaudio要素をサポートしていない場合に表示される代替コンテンツです。