Web Audio のサウンド再生を停止 (終了) するコードを紹介します。
概要
Web Audio のサウンド再生を停止するには、AudioContextのcloseメソッドを呼び出して、オーディオコンテキストを閉じるか、AudioBufferSourceNodeのstopメソッドを呼び出して、
オーディオソースを停止する方法があります。
方法:AudioContext を閉じる方法
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
<script type="text/javascript">
var request, source, stopflag=0;
function playSound() {
request = new XMLHttpRequest();
request.open("GET", "sound2.mp3", true);
request.responseType = "arraybuffer";
request.onload = completeOnLoad;
request.send();
}
function completeOnLoad() {
context = new AudioContext();
source = context.createBufferSource();
// オーディオをデコード
context.decodeAudioData(request.response, function (buf) {
source.buffer = buf;
source.loop = false;
});
source.connect(context.destination);
source.start(0);
}
function playPause() {
if (stopflag == 0) {
context.suspend();
stopflag = 1;
} else {
context.resume();
stopflag = 0;
}
}
function closeAudioContext() {
context.close();
}
</script>
</head>
<body>
<a id="Play" href="javascript:void(0);" onclick="playSound();">再生</a><br />
<a id="Pause" href="javascript:void(0);" onclick="playPause();">停止/再開</a><br />
<a id="Stop" href="javascript:void(0);" onclick="closeAudioContext();">Close (AudioContext)</a><br />
</body>
</html>
解説
下記のリンクで
closeAudioContext()関数を呼び出します。
<a id="Stop" href="javascript:void(0);" onclick="closeAudioContext();">Close (AudioContext)</a><br />
closeAudioContext()関数では、AudioContext オブジェクトの
close() メソッドを呼び出しオーディオコンテキストを閉じます。
function closeAudioContext() {
context.close();
}
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
[再生]リンクをクリックするとサウンドの再生が始まります。上部のタブにスピーカーのアイコンが表示されます。
[停止/再開]リンクをクリックするとサウンドの一時停止や再開が動作します。
[Close (AudioContext)]リンクをクリックすると、サウンドが停止します。サウンドが停止してしばらくすると上部のタブのスピーカーのアイコンが消えます。
方法:AudioBufferSourceNode を停止する方法
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
<script type="text/javascript">
var request, source, stopflag=0;
function playSound() {
request = new XMLHttpRequest();
request.open("GET", "sound2.mp3", true);
request.responseType = "arraybuffer";
request.onload = completeOnLoad;
request.send();
}
function completeOnLoad() {
context = new AudioContext();
source = context.createBufferSource();
// オーディオをデコード
context.decodeAudioData(request.response, function (buf) {
source.buffer = buf;
source.loop = false;
});
source.connect(context.destination);
source.start(0);
}
function playPause() {
if (stopflag == 0) {
context.suspend();
stopflag = 1;
} else {
context.resume();
stopflag = 0;
}
}
function stopAudioSource() {
source.stop();
}
function startAudioSource() {
source.start(0);
}
</script>
</head>
<body>
<a id="Play" href="javascript:void(0);" onclick="playSound();">再生</a><br />
<a id="Pause" href="javascript:void(0);" onclick="playPause();">停止/再開</a><br />
<a id="Stop" href="javascript:void(0);" onclick="stopAudioSource();">Stop (AudioSource)</a><br />
<a id="Start" href="javascript:void(0);" onclick="startAudioSource();">Start (AudioSource)</a><br />
</body>
</html>
解説
下記のリンクで
stopAudioSource() startAudioSource() 関数を呼び出します。
<a id="Stop" href="javascript:void(0);" onclick="stopAudioSource();">Stop (AudioSource)</a><br />
<a id="Start" href="javascript:void(0);" onclick="startAudioSource();">Start (AudioSource)</a><br />
stopAudioSourceと
startAudioSource関数は以下です。
function stopAudioSource() {
source.stop();
}
function startAudioSource() {
source.start(0);
}
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
[再生]リンクをクリックします。サウンドの再生が始まります。上部のタブの左側にスピーカーのアイコンが表示されます。
また、[停止/再開]リンクをクリックするとサウンドの一時停止や再開ができます。
[Stop (AudioSource)]のリンクをクリックするとサウンドが停止します。サウンド停止後しばらくすると、上部のタブの左側のスピーカーのアイコンが消えます。
[Stop (AudioSource)]のリンクをクリックしてサウンドが停止した状態で、[Start (AudioSource)]リンクをクリックしてもサウンドは再生されません。
デバッグコンソールを確認すると下記のエラーが表示されます。
一度停止したオーディオソースは使い捨てになり、再度、再生することはできないようです。
Uncaught DOMException: Failed to execute 'start' on 'AudioBufferSourceNode': cannot call start more than once.
at startAudioSource (http://(HTMLファイルのパス):49:14)
at HTMLAnchorElement.onclick (http://(HTMLファイルのパス):58:74)
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-03-23
作成日: 2021-03-22
