HTMLにMP3を埋め込みブラウザで音声ファイルを再生する

この記事について

環境	HTML、javascript
目的	HTMLにMP3を埋め込んでブラウザで再生する
結果	audio要素を置いてJavaScriptのplay()をボタンやリンクから呼ぶ

HTMLにMP3を埋め込んでブラウザで再生するには、audio要素をJavaScriptから操作すればいい。

ボタンクリックでMP3が再生するサンプルコード

<html>
<head>
<script language="JavaScript"><!--
function playSound() {
document.getElementById('audio').play();

}
// --></script>
</head>

<body>

<audio id="audio">
<source src="sound.mp3" type="audio/mp3">
</audio>

<input type="button" value="再生" onclick="playSound()">

</body>
</html>

リンククリックで再生するバージョンにしたい場合は、再生ボタンを次のように書き換える

<a href="javascript:playSound()">再生</a>