💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、HTML5 のオーディオタグを使って、ウェブページに直接オーディオファイルを埋め込んで再生する方法を学びます。この実験では、ウェブ開発者にとっての基本的なスキルをカバーしており、オーディオタグの基本構造の理解、オーディオコントロールの設定、複数のオーディオソース形式の追加、高度な属性の探索、そして簡単なオーディオプレイヤーのウェブページの作成が含まれます。手を動かしながらの演習を通じて、外部プラグインに頼ることなく、ネイティブな HTML5 機能を使ってオーディオ再生機能を実装する実践的な経験を得ることができます。
手順を追うことで、オーディオコンテンツをウェブページにシームレスに統合し、オーディオプレイヤーコントロールをカスタマイズし、クロスブラウザ対応を確保する方法を学ぶことができます。この実験は、オーディオ要素の操作に関する包括的な紹介を提供し、豊かなマルチメディア体験でウェブアプリケーションを強化することができます。
このステップでは、HTML5 のオーディオタグの基本を学びます。これは、外部プラグインを使わずに、ウェブページに直接オーディオファイルを埋め込んで再生できる強力な機能です。
HTML5 の<audio>タグは、シンプルで多用途な要素であり、ウェブ開発者がオーディオコンテンツをシームレスに含めることを可能にします。その基本構造と基本的な使い方を見てみましょう。
まず、オーディオタグを示すために、~/projectディレクトリに新しい HTML ファイルを作成します。
cd ~/project
touch audio-basics.htmlWebIDE でaudio-basics.htmlファイルを開き、次の基本的な HTML 構造を追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Audio Tag Basics</title>
</head>
<body>
<h1>HTML5 Audio Tag Example</h1>
<audio src="sample-audio.mp3"></audio>
</body>
</html>基本的な<audio>タグは、シンプルな構文を持っています。
src属性は、オーディオファイルへのパスを指定します。基本的なオーディオタグの出力例：
HTML5 オーディオタグに関する要点：
WebIDE でaudio-basics.htmlファイルをプレビューすると、オーディオプレイヤーのコントロールが表示されないため、空白のページしか見えません。
注：WebIDE で HTML ファイルをプレビューする方法に関する詳細はこちらをご覧ください。
このステップでは、コントロールを追加してオーディオソースを設定することで、HTML5 のオーディオタグを強化する方法を学びます。これにより、ユーザー体験を向上させることができます。
WebIDE でaudio-basics.htmlファイルを開き、オーディオタグを変更してコントロールを追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Audio Tag with Controls</title>
</head>
<body>
<h1>Audio Player with Controls</h1>
<audio src="sample-audio.mp3" controls>
Your browser does not support the audio element.
</audio>
</body>
</html>この例での主な変更点：
controls属性を追加しました。controls属性は、次のデフォルトのオーディオプレイヤーインターフェイスを提供します。
さらに、ソースの設定オプションを見てみましょう。
<audio controls>
<source src="sample-audio.mp3" type="audio/mpeg" />
<source src="sample-audio.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>異なるオーディオソース設定の例：
<source>タグを使用することで、ブラウザに対応した形式を選択できます。type属性は、オーディオファイルの MIME タイプを指定します。オーディオプレイヤーの出力例：
再生ボタンをクリックしてオーディオの再生を開始しましょう。ブラウザのタブがミュート解除されていることを確認してください（https://www.wikihow.com/Mute-and-Unmute-Google-Chrome-Tabs）。
このステップでは、クロスブラウザ対応を確保し、オーディオ再生の信頼性を向上させるために、複数のオーディオファイル形式を提供する方法を学びます。
まず、~/projectディレクトリにあるsample-audio.mp3を異なる形式（music.ogg、music.wav）にコピーしましょう。
cd ~/project
cp sample-audio.mp3 music.mp3
ffmpeg -i sample-audio.mp3 music.ogg
ffmpeg -i sample-audio.mp3 music.wav変換プロセスが完了するまで待ってから次の手順に進みます。
次に、audio-basics.htmlファイルを更新して、複数のオーディオソースを含めます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Audio Source Formats</title>
</head>
<body>
<h1>Cross-Browser Audio Playback</h1>
<audio controls>
<source src="music.mp3" type="audio/mpeg" />
<source src="music.ogg" type="audio/ogg" />
<source src="music.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
</body>
</html>複数のオーディオソースに関する要点：
ブラウザの互換性の例：
このステップでは、HTML5 のオーディオタグの高度な属性を見つけます。これらの属性を使うことで、オーディオ再生とユーザー体験に対してより多くのコントロールを行うことができます。
高度な属性を示すために、audio-basics.htmlファイルを更新します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Audio Tag Attributes</title>
</head>
<body>
<h1>Advanced Audio Playback Options</h1>
<audio src="music.mp3" controls autoplay loop preload="metadata" muted>
Your browser does not support the audio element.
</audio>
</body>
</html>説明する主な高度な属性：
autoplay：ページが読み込まれるときに自動的にオーディオを再生します。
loop：オーディオトラックを連続的に繰り返します。
preload：ブラウザがオーディオをどのように読み込むかを指定します。
none：事前読み込みしません。metadata：メタデータ（再生時間など）のみを読み込みます。auto：オーディオファイル全体を事前読み込みします。muted：オーディオをミュート状態で開始します。
高度なオーディオコントロールの出力例：
このステップでは、HTML5 のオーディオタグに関することを学んだすべてを示す、完全なオーディオプレイヤーのウェブページを作成します。
まず、~/projectディレクトリに新しいファイルmusic-player.htmlを作成します。
cd ~/project
touch music-player.html次に、WebIDE でmusic-player.htmlを開き、以下のコードを追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Music Player</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
.player-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="player-container">
<h1>My Music Player</h1>
<audio id="musicPlayer" controls>
<source src="music.mp3" type="audio/mpeg" />
<source src="music.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
<div>
<button onclick="document.getElementById('musicPlayer').play()">
Play
</button>
<button onclick="document.getElementById('musicPlayer').pause()">
Pause
</button>
<button onclick="document.getElementById('musicPlayer').volume += 0.1">
Volume Up
</button>
<button onclick="document.getElementById('musicPlayer').volume -= 0.1">
Volume Down
</button>
</div>
</div>
<script>
const player = document.getElementById("musicPlayer");
player.addEventListener("ended", () => {
console.log("Song finished playing");
});
</script>
</body>
</html>CSS や JavaScript に慣れていない場合は心配しないでください。上のコードは簡単で理解しやすいものです。プレイヤーコンテナの基本的な CSS スタイリングとレスポンシブデザインが含まれています。JavaScript コードは、オーディオプレイヤーにイベントリスナーを追加して、曲が終了したときにメッセージをログに記録します。
オーディオプレイヤーの主な機能：
ブラウザでの出力例：
この実験では、参加者は HTML5 のオーディオタグを使ってオーディオファイルを直接 Web ページに埋め込み、再生する基本を学びました。この実験では、学習者が<audio>タグの基本構造を理解し、オーディオコントロールを設定し、オーディオ再生機能を強化するさまざまな属性を探ることをガイドしました。
主な学習成果としては、オーディオソース属性の操作、再生コントロールの追加、複数のオーディオ形式のサポート、シンプルなオーディオプレイヤーのウェブページの作成が挙げられます。参加者は、外部プラグインに依存することなく、ネイティブなオーディオ埋め込み技術を実装する実践的な経験を得ました。これは、HTML5 のオーディオ機能の多様性と使いやすさを、現代の Web ブラウザ全体で示しています。
