Web Audio のサウンド再生を一時停止 (ポーズ) するコードを紹介します。
概要
Web Audio のサウンド再生を一時停止する場合には、AudioContextの
suspend()メソッドを呼び出します。
一時停止した状態からサウンドを再生する場合は、AudioContextの
resume()メソッドを呼び出します。
実装例
コード
下記の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() {
context.suspend();
}
function playRestart() {
context.resume();
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="playSound();">再生</a><br />
<a href="javascript:void(0);" onclick="playPause();">停止</a><br />
<a href="javascript:void(0);" onclick="playRestart();">再開</a><br />
</body>
</html>
解説
Web Audio APIによるサウンド再生の詳細は
こちらの記事を参照してください。
再生されているサウンドを一時停止する場合には、オーディオコンテキストの
suspend() メソッドを呼び出します。
上記のコードでは、[停止]リンクをクリックすると、
playPause() 関数を呼び出します。関数中の
context.suspend(); メソッドを呼び出し、オーディオ再生を一時停止します。
function playPause() {
context.suspend();
}
停止したサウンドを再開する場合は[再開]リンクをクリックします。
playRestart()関数が呼び出され、関数中の
context.resume(); メソッドにより、オーディオの再生を再開します。
function playRestart() {
context.resume();
}
実行結果
上記のHTMLファイルを表示します。下図のページが表示されます。
[再生]リンクをクリックします。タブの左端にスピーカーのアイコンが表示され、サウンドの再生が始まります。
[停止]リンクをクリックすると、サウンドの再生が一時停止します。タブの左端のスピーカーのアイコンは表示されたままです。
[再開]リンクをクリックすると、サウンドを停止した位置から再生が再開されます。
Web Audio APIのサウンド再生を一時停止する処理を実行できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-03-27
作成日: 2021-03-26
