Web Audio API で再生しているサウンドを一時停止するコードを紹介します。
概要
Web Audio APIで再生しているサウンドを一時停止する場合はAudioContextオブジェクトのsuspend メソッドを呼び出します。停止状態から再生を再開する場合はAudioContextオブジェクトのresume メソッドを呼び出します。
書式
一時停止する場合
(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;
window.onload = function () {
request = new XMLHttpRequest();
request.open("GET", "sound2.mp3", true);
request.responseType = "arraybuffer";
request.onload = completeOnLoad;
request.send();
};
function completeOnLoad() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
// オーディオをデコード
context.decodeAudioData(request.response, function (buf) {
source.buffer = buf;
source.loop = false;
});
source = context.createBufferSource();
var elem = document.getElementById("Play");
elem.addEventListener("click", playStart, false);
var elem2 = document.getElementById("Pause");
elem2.addEventListener("click", playPause, false);
}
function playStart() {
source.connect(context.destination);
source.start(0);
}
function playPause() {
if (stopflag == 0) {
context.suspend();
stopflag = 1;
} else {
context.resume();
stopflag = 0;
}
}
</script>
</head>
<body>
<a id="Play" href="javascript:void(0);">再生</a><br />
<a id="Pause" href="javascript:void(0);">停止/再開</a><br />
</body>
</html>
解説
Web Audio APIを利用したサウンド再生については「
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用) (JavaScript プログラミング)」または「
iOSのMobile SafariでWeb Audio API を利用してサウンドを再生する (JavaScript プログラミング)」の記事を参照してください。
[停止/再開]のリンクがクリックされると、playPause() 関数を呼び出します。playPause関数では stopflagの値を確認し、値が0の場合は再生中のため、context.suspend() メソッドを呼び出し再生を一時停止します。停止後stopflagの値を1に変更します。
stopflagの値が1の場合は再生が停止されている状態のため、 context.resume() メソッドを呼び出し再生を再開します。
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。[再生]リンクをクリックするとサウンドの再生が始まります。サウンドの再生中に[停止/再開]リンクをクリックするとサウンドの再生が停止します。もう一度[停止/再開]リンクをクリックすると停止した位置からサウンドの再生が再開します。
著者
iPentec.com の代表。ハードウェア、サーバー投資、管理などを担当。
Office 365やデータベースの記事なども担当。
最終更新日: 2019-09-02
作成日: 2019-09-01
