HTML audio要素で音声ファイルを再生する

目次

サンプル audio要素で音声を再生する
  代替の音声ファイル/文言を指定する
仕様 audio要素
  source要素

audio要素で音声を再生する

audio要素で音声を再生するサンプルです。

真ん中の線は音声の進み具合を操作するバーです。
音量の調整は、マイクのアイコンにカーソルを置くと表示されるバーで行います。

 

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
    <audio src="audiotest1.mp3" controls>
</body>
</html>

8行目がaudio要素です。
srcは、mp3のパス(ファイル名)を指定しています。
controlsは、音声の再生ボタン等のコントロールバーを表示します。

 

代替の音声ファイル/文言を指定する

mp3ファイルが再生できないときに、代わりにwavファイルで再生する、またはメッセージを表示する場合のサンプルです。

 

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
    <audio controls  >
        <source src="audiotest1.mp3" type="audio/mp3">
        <source src="audiotest1.wav" type="audio/mp3">
        <p>※ご利用のブラウザでは再生できません</p>
    </audio>
</body>
</html>

9・10行目は、ブラウザは上の行から再生できるかどうかチェックしていき、再生できる場合、そのファイルを再生し、それより下の行にはいきません。
11行目の文言は9・10行目のファイルが再生できなかった場合に表示されます。

 

audio要素

audio要素の属性です。

属性 説明
src 音声ファイルのURLを指定します。
※複数のファイルを指定する場合は、この属性ではなくsource要素のsrcを使用します。
controls 再生、音量等を制御するコントロールを表示します
autoplay 自動再生します。
loop 繰り返し再生を行います。
muted 初期状態が消音になります。

以下はMDNのaudio要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio

 

source要素

source要素の属性です。

属性 説明
src 音声ファイルのURLを指定します。
type ファイルのMIMEタイプを指定する

以下はMDNのsource要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/source

関連の記事

HTML video要素で動画ファイルを再生する

△上に戻る