HTML - オーディオ要素
こんにちは、Web開発者の卵さんたち！今日は、HTMLオーディオ要素の素晴らしい世界に飛び込みます。数年間この内容を教えてきた者として言えるのは、あなたのウェブページに音を追加することで、非常に生き生きとしたものになるということです。それでは、始めましょう！
文法
HTML <audio> 要素は、ドキュメントに音声コンテンツを埋め込むために使用されます。これはHTMLに比較的新しい追加で、HTML5で導入され、ウェブサイトに音声を含める方法を大きく変えました。
以下は基本的な文法です：
<audio src="audio_file.mp3" controls>
您のブラウザはオーディオ要素をサポートしていません。
</audio>これを分解すると：
-
<audio>: これはオーディオ要素の開始タグです。 -
src="audio_file.mp3": この属性はオーディオファイルのソースを指定します。 -
controls: この属性は再生、停止、ボリュームなどのオーディオコントロールを追加します。 - 開始タグと終了タグの間のテキストは、ブラウザがオーディオ要素をサポートしていない場合に表示されます。
HTMLにオーディオを埋め込む方法
基本的な文法を知ったので、実際にHTMLドキュメントにオーディオを埋め込む方法を見てみましょう。いくつか異なる方法がありますので、それぞれお見せします。
メソッド1: src属性を使用する
これは最もシンプルな方法です：
<audio src="path/to/audio.mp3" controls></audio>メソッド2: <source>要素を使用する
この方法を使用すると、複数のオーディオソースを指定できます：
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<source src="path/to/audio.ogg" type="audio/ogg">
您のブラウザはオーディオ要素をサポートしていません。
</audio>この例では、ブラウザはまずMP3ファイルを再生しようとします。できなければ、OGGファイルに移行します。どちらも再生できない場合、テキストメッセージを表示します。
メソッド3: JavaScriptを使用する
より高度な制御を行うには、JavaScriptを使用します：
<audio id="myAudio">
<source src="path/to/audio.mp3" type="audio/mpeg">
您のブラウザはオーディオ要素をサポートしていません。
</audio>
<button onclick="playAudio()">再生</button>
<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
</script>この方法は、オーディオの再生時刻や方法をより柔軟に制御することができます。
HTMLオーディオ要素の例
理解を深めるために、いくつかの例を見てみましょう。
例1: 基本的なオーディオプレイヤー
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您のブラウザはオーディオ要素をサポートしていません。
</audio>これは基本的なオーディオプレイヤーを作成します。まずOGGファイルを再生しようとし、サポートできない場合はMP3ファイルに移行します。
例2: 自動再生とループ
<audio controls autoplay loop>
<source src="background_music.mp3" type="audio/mpeg">
您のブラウザはオーディオ要素をサポートしていません。
</audio>このオーディオは、ページが読み込まれたときに自動的に再生され、繰り返し再生されます。ただし、自動再生はユーザーにとって邪魔になることがありますので、注意してください。
例3: preload属性
<audio controls preload="auto">
<source src="interview.mp3" type="audio/mpeg">
您のブラウザはオーディオ要素をサポートしていません。
</audio>preload属性は、ページが読み込まれたときにブラウザがどのようにするかを指定します。"auto"は、ブラウザがオーディオファイル全体を読み込むことを意味します。
異なるオーディオフォーマットに対するブラウザのサポート
ここで非常に重要なことを理解する必要があります：すべてのブラウザがすべてのオーディオフォーマットをサポートしているわけではありません。以下の表で確認してみましょう：
| フォーマット | Chrome | Firefox | Safari | Opera | Internet Explorer |
|---|---|---|---|---|---|
| MP3 | 是 | 是 | 是 | 是 | 是 (9+) |
| WAV | 是 | 是 | 是 | 是 | はい |
| OGG | 是 | 是 | はい | 是 | はい |
MP3は最も広くサポートされているフォーマットです。したがって、MP3バージョンのオーディオを含めることが多いです。
私の教え以来的プロティップは、オーディオファイルの少なくとも2つの異なるフォーマットを提供することです。このようにすることで、ブラウザサポートの多くをカバーできます。
結論として、HTMLオーディオ要素は、ウェブページに音を追加するための強力なツールです。音楽プレイヤーを作成する、バックグラウンド音楽を追加する、またはコンテンツにオーディオクリップを含める場合、<audio>要素の使い方を理解することは非常に重要です。
覚えるための鍵は練習です。それでは、HTMLドキュメントにオーディオを埋め込んでみましょう。私たちが議論した異なる属性や方法を試してみてください。そして、最も重要なのは、楽しむことです！あなたが次のビラルなオーディオベースのウェブサイトを作成する人になるかもしれません！
Credits: Image by storyset