HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML Webページにオーディオプレーヤーを追加する方法

HTMLでのオーディオ再生の基本

Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。

対応している音声フォーマット

HTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。

  • MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能
  • Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがち
  • Ogg（audio/ogg）― オープンソースの圧縮形式

コード例

以下のコードを実行すると、HTML Webページにオーディオプレーヤーを追加できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML audioタグ</title>
   </head>
   <body>
      <p>再生ボタンをクリックしてください...</p>
      <p>（曲：Windowsのサンプル音楽として収録されている「Kalimba」）</p>
      <audio controls>
         <source src="/html/Kalimba.mp3" type="audio/mpeg">
      </audio>
   </body>
</html>

覚えておくと便利な属性

<audio>要素では、以下のような属性も活用できます。

  • autoplay ― ページ読み込み時に自動再生する
  • loop ― 音声を繰り返し再生する
  • muted ― ミュート状態で読み込む
  • preload ― ページ読み込み時の音声データの事前読み込み方法を指定する

また、<source>要素を複数記述しておくと、ブラウザが対応していないフォーマットの場合に自動的に別の形式へ切り替えられるため、より多くの環境で確実に音声を再生できます。

  1. PowerPointに音声（オーディオ）を追加する方法｜Windows・Mac別の手順を解説

    ポイントWindowsの場合：「挿入」>「オーディオ」>「オーディオの録音」の順に選択します。名前を付けて「録音」を押すと録音が始まり、「停止」で終了、「OK」で確定します。Macの場合：「挿入」>「オーディオ」>「ファイルからオーディオ」の順に選択し、使いたいファイルを選ぶとスライドに表示されます。詳細なカスタマイズは、Macでは「オーディオ形式」タブ、Windowsではスピーカーアイコンからアクセスできます。動きのあるPowerPointスライドショーは、プレゼンテーションに彩りを添えてくれます。PowerPointには、ありきたりな箇条書きのリストから一歩踏み出し

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値