LabEx
ログイン登録

HTML5 オーディオタグでオーディオファイルを再生する

HTMLBeginner
オンラインで実践に進む

はじめに

この実験では、HTML5 のオーディオタグを使って、ウェブページに直接オーディオファイルを埋め込んで再生する方法を学びます。この実験では、ウェブ開発者にとっての基本的なスキルをカバーしており、オーディオタグの基本構造の理解、オーディオコントロールの設定、複数のオーディオソース形式の追加、高度な属性の探索、そして簡単なオーディオプレイヤーのウェブページの作成が含まれます。手を動かしながらの演習を通じて、外部プラグインに頼ることなく、ネイティブな HTML5 機能を使ってオーディオ再生機能を実装する実践的な経験を得ることができます。

手順を追うことで、オーディオコンテンツをウェブページにシームレスに統合し、オーディオプレイヤーコントロールをカスタマイズし、クロスブラウザ対応を確保する方法を学ぶことができます。この実験は、オーディオ要素の操作に関する包括的な紹介を提供し、豊かなマルチメディア体験でウェブアプリケーションを強化することができます。

HTML5 オーディオタグの基本を理解する

このステップでは、HTML5 のオーディオタグの基本を学びます。これは、外部プラグインを使わずに、ウェブページに直接オーディオファイルを埋め込んで再生できる強力な機能です。

HTML5 の<audio>タグは、シンプルで多用途な要素であり、ウェブ開発者がオーディオコンテンツをシームレスに含めることを可能にします。その基本構造と基本的な使い方を見てみましょう。

まず、オーディオタグを示すために、~/projectディレクトリに新しい HTML ファイルを作成します。

cd ~/project
touch audio-basics.html

WebIDE で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 オーディオタグに関する要点：

  1. 複数のオーディオ形式（MP3、WAV、OGG）をサポートしています。
  2. 最新のウェブブラウザで動作します。
  3. プラグインなしでオーディオを埋め込むネイティブな方法を提供します。

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>

この例での主な変更点：

  1. 再生コントロールを表示するためにcontrols属性を追加しました。
  2. HTML5 オーディオをサポートしていないブラウザ用の代替テキストを含めました。

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 タイプを指定します。
  • ブラウザは最初にサポートされる形式を使用します。

オーディオプレイヤーの出力例：

HTML5 audio player with controls

再生ボタンをクリックしてオーディオの再生を開始しましょう。ブラウザのタブがミュート解除されていることを確認してください（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>

複数のオーディオソースに関する要点：

  1. ブラウザは最初の互換性のある形式を使用します。
  2. 一般的なオーディオ形式には、以下があります。
    • MP3（audio/mpeg）
    • OGG（audio/ogg）
    • WAV（audio/wav）
  3. 順序が重要です：好ましい形式を最初にリストに記載します。

ブラウザの互換性の例：

  • Chrome：MP3 を好む
  • Firefox：OGG を好む
  • Safari：MP3 を好む
  • ブラウザは最初にサポートされる形式を自動的に選択します。

オーディオタグの高度な属性を探求する

このステップでは、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>

説明する主な高度な属性：

  1. autoplay：ページが読み込まれるときに自動的にオーディオを再生します。
    • バックグラウンドミュージックやサウンドエフェクトに便利です。
    • 注：多くのブラウザはデフォルトでオートプレイをブロックしています。
  2. loop：オーディオトラックを連続的に繰り返します。
    • バックグラウンドミュージックやサウンドループに最適。
  3. preload：ブラウザがオーディオをどのように読み込むかを指定します。
    • none：事前読み込みしません。
    • metadata：メタデータ（再生時間など）のみを読み込みます。
    • auto：オーディオファイル全体を事前読み込みします。
  4. muted：オーディオをミュート状態で開始します。
    • 初期のユーザーコントロールに便利です。

高度なオーディオコントロールの出力例：

HTML5 audio controls example

シンプルなオーディオプレイヤーの Web ページを作成する

このステップでは、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
          Play
        </button>
        <button
          Pause
        </button>
        <button += 0.1">
          Volume Up
        </button>
        <button -= 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 コードは、オーディオプレイヤーにイベントリスナーを追加して、曲が終了したときにメッセージをログに記録します。

オーディオプレイヤーの主な機能：

  1. 基本的な CSS スタイリングによるレスポンシブデザイン
  2. 複数のオーディオソース形式
  3. 標準的なオーディオコントロール
  4. カスタムの再生/一時停止ボタン
  5. 音量コントロールボタン
  6. 曲の終了時のイベントリスナー

ブラウザでの出力例：

Simple music player webpage example

まとめ

この実験では、参加者は HTML5 のオーディオタグを使ってオーディオファイルを直接 Web ページに埋め込み、再生する基本を学びました。この実験では、学習者が<audio>タグの基本構造を理解し、オーディオコントロールを設定し、オーディオ再生機能を強化するさまざまな属性を探ることをガイドしました。

主な学習成果としては、オーディオソース属性の操作、再生コントロールの追加、複数のオーディオ形式のサポート、シンプルなオーディオプレイヤーのウェブページの作成が挙げられます。参加者は、外部プラグインに依存することなく、ネイティブなオーディオ埋め込み技術を実装する実践的な経験を得ました。これは、HTML5 のオーディオ機能の多様性と使いやすさを、現代の Web ブラウザ全体で示しています。

関連 HTML コース
初心者向け HTML

初心者向け HTML

htmlweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development