WAVEファイルに関してはマイクロソフト系以外のブラウザはサポートしてますが、開発もとのマイクロソフトが駄目とは驚きです。
Firefoxには条件が少しありますが、MP3ファイルは基本、すべてのブラウザでサポートしているので今回はMP3でコードを書いています。
再生するファイルは以下のように記入します。ここでは『フリー音楽素材 H/MIX GALLERY』の音楽ファイルににリンクさせてもらっています。
audioElem.src = "URL";
ブログでは画像しかアップロードできないことが多いので、例えばGoogleDriveのファイルを共有設定してそのアドレスを音楽ファイルのURLとして使います。
JavaScriptの全体ソースコードは以下の通りです。必要な「body]部分をコピーしてHTMLとして張り付ければ動くと思います。
<html>
<head>
<title>音楽再生</title>
</head>
<body>
<script type="text/javascript">
var audioElem;
// 再生する
function PlaySound() {
audioElem = new Audio();
audioElem.src = "http://www.hmix.net/music/n/n75.mp3";
audioElem.play();
}
// 停止する
function StopSound(){
audioElem.pause();
}
// 音量を上げる
function upVol() {
audioElem.volume = audioElem.volume + 0.25;
}
// 音量を下げる
function downVol() {
audioElem.volume = audioElem.volume - 0.25;
}
</script>
<br>
<br>
<button type="button" onclick="PlaySound();">PLAY</a></button>
<button type="button" onclick="StopSound();">STOP</a></button><br><br>
<button type="button" onclick="upVol()">Vol up</button>
<button type="button" onclick="downVol()">Vol down</button><br>
</body>
</html>
ここで「再生」「停止」「音量増加」「音量減衰」の基本機能をコード化してますが、基本の雛形から色々と応用できると思います。
