音声を流し終えてから、指定時間後に別の音声を流したいと思ったので
WebAudioAPIで試してみる。
HTML部分
とりあえず、ボタンを用意。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<button id="btn" disabled>Start</button>
</body>
</html>
JavaScript部分
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
var schedule = [
{"time":0, "file":"1.wav"},
{"time":5, "file":"2.wav"}
];
var plans = []
var getAudioBuffer = function(schedule, index){
if(index >= schedule.length){
document.getElementById('btn').disabled = false;
return;
}
plans[index] = {
"time":schedule[index]["time"],
"buffer":null
};
var req = new XMLHttpRequest();
req.open('GET', schedule[index]["file"], true);
req.responseType = 'arraybuffer';
req.onreadystatechange = function(){
if(req.readyState === 4){
if(req.status === 0 || req.status === 200){
context.decodeAudioData(req.response, function(buffer){
plans[index]["buffer"] = buffer;
});
getAudioBuffer(schedule, index+1);
}
}
};
req.send('')
};
var planid = 0;
var playSound = function(){
var source = context.createBufferSource();
source.buffer = plans[planid]["buffer"];
source.onended = function(){
planid++;
if(planid < plans.length){
setTimeout(playSound, plans[planid]["time"]*1000);
}
};
source.connect(context.destination);
source.start(0);
}
window.onload = function(){
getAudioBuffer(schedule, 0);
var btn = document.getElementById('btn');
btn.onclick = function(){
planid = 0;
playSound();
}
}
とりあえず動かしたかったので
変数がグローバル多い、これはちゃんと作る時は直そう。
エラー制御とか諸々の制御もてきとうになっている。
getAudioBuffer
再生用の音声データをXMLHttpRequestで取ってきてバッファ持っておく。
最初、複数並列に投げようとして最後の1つしか受け取れなかったので
一つずつ、終わったら次の取得をする形にして対応。
全部の読み込みが終わったら再生ボタンを有効にする。
playSound
再生の完了を取得して次の音声流したいので
onendedイベントハンドラに終了を受け取って次の再生を行う処理を追加。
次に再生する音声が再生終了後に何秒後に流すのか持っておいて
setTimeoutで指定秒数後に再生。