Audio タグを利用してサウンドを再生する - HTML

Audio タグを利用してサウンドを再生するコードを紹介します。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
  <audio controls src="sound.mp3">対応していません。</audio>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。

Internet Explorerの場合

Internet Explorerで表示した場合は、下図の画面が表示されます。

再生ボタンのクリックでサウンドが再生されます。音量やシークもできます。

Microsoft Edgeの場合

Microsoft Edgeで表示した場合は、下図の画面が表示されます。

再生ボタンのクリックでサウンドが再生されます。音量やシークもできます。

補足：幅を指定する場合

幅を指定する場合は、スタイル、CSSなどでwidthプロパティを指定します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
  <audio controls src="sound.mp3" style="width:280px;">対応していません。</audio>
</body>
</html>

幅を狭くすると、シークバーや音量調節コントロールが非表示になります。