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

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で表示した場合は、下図の画面が表示されます。
Audio タグを利用してサウンドを再生する:画像1

再生ボタンのクリックでサウンドが再生されます。音量やシークもできます。
Audio タグを利用してサウンドを再生する:画像2

Microsoft Edgeの場合

Microsoft Edgeで表示した場合は、下図の画面が表示されます。
Audio タグを利用してサウンドを再生する:画像3

再生ボタンのクリックでサウンドが再生されます。音量やシークもできます。
Audio タグを利用してサウンドを再生する:画像4

補足:幅を指定する場合

幅を指定する場合は、スタイル、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>

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

Internet explorerでの表示例

width=280px;
Audio タグを利用してサウンドを再生する:画像5
width=160px;
Audio タグを利用してサウンドを再生する:画像6

Microsoft Edgeでの表示例

width=120px;
Audio タグを利用してサウンドを再生する:画像7
width=64px;
Audio タグを利用してサウンドを再生する:画像8
AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2015-10-17
Copyright © 1995–2025 iPentec all rights reserverd.