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で表示した場合は、下図の画面が表示されます。
再生ボタンのクリックでサウンドが再生されます。音量やシークもできます。
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>
幅を狭くすると、シークバーや音量調節コントロールが非表示になります。
Internet explorerでの表示例
width=280px;
width=160px;
Microsoft Edgeでの表示例
width=120px;
width=64px;
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最近は生成AIの画像生成の沼に沈んでいる。
