Audio オブジェクトを利用してサウンドを再生する - JavaScript
JavaScriptのAudio オブジェクトを利用してサウンドを再生するコードを紹介します。
サウンドの再生
サウンドの再生をするコードです。
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
var audioElem;
function PlaySound() {
audioElem = new Audio();
audioElem.src = "sound2.mp3";
audioElem.play();
}
function StopSound(){
audioElem.pause();
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="PlaySound();">再生</a><br/>
<a href="javascript:void(0);" onclick="StopSound();">停止</a><br />
</body>
</html>
解説
再生リンクをクリックすると、JavaScriptのPlaySound()関数が実行されます。
audioElem = new Audio();
により、Audioオブエジェクトを作成します。
audioElem.src = "sound2.mp3";
Audioオブエジェクトのインスタンスのsrcプロパティに再生するサウンド名を設定します。この場合は同じディレクトリに配置されている"sound2.mp3"ファイルを再生します。パスの指定は相対パスでも指定可能です。
audioElem.play();
play()メソッドを呼び出すと再生を開始します。
audioElem.pause();
サウンドの停止は、pause()メソッドです。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
再生リンクをクリックすると、サウンドが再生されます。
停止リンクをクリックすると、サウンド再生が停止します。
音量を変更する
音量を変化させる場合は、Audioオブエジェクトのvolumeプロパティに値を設定します。値の範囲は0～1.0の範囲です。
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
var audioElem;
function PlaySound() {
audioElem = new Audio();
audioElem.src = "sound2.mp3";
audioElem.play();
}
function StopSound(){
audioElem.pause();
}
function Volume(flag) {
if (0 < flag) {
if (0.9 < audioElem.volume) {
audioElem.volume = 1;
} else {
audioElem.volume += 0.1;
}
} else {
if (audioElem.volume < 0.1) {
audioElem.volume = 0;
}
else {
audioElem.volume -= 0.1;
}
}
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="PlaySound();">再生</a><br/>
<a href="javascript:void(0);" onclick="StopSound();">停止</a><br />
<a href="javascript:void(0);" onclick="Volume(1);">音量を上げる</a><br />
<a href="javascript:void(0);" onclick="Volume(-1);">音量を下げる</a><br />
</body>
</html>
実行結果
HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。[再生]リンクをクリックするとサウンドの再生が始まります。[音量を上げる][音量を下げる]リンクをクリックすると音量が変化します。
注意
Internet Explorerの場合、初期値は1.0(最大になっている)のため、[音量を上げる]リンクをクリックしても音量は変化しません。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
