質問
サイズの大きいmp3をXHRでロードし、WebAudioAPIを用いて再生しているのですが、ロードが完了するまでの待ち時間が発生します。
サイズが大きいmp3であっても待ち時間を少なく抑えて再生を開始する方法はありますでしょうか。
たとえば、SoundCloudは再生ボタンをクリックすると即座に再生が開始されます。デベロッパーツールで確認すると再生しながらロードを行っているのがわかります。
どのような実装でこれを実現しているのか分かっていないのですが、何かしらの方法があるのではないかと考えています。
待ち時間が発生してしまう実装
(function () {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
loadSound('./audio/sample.mp3');
function loadSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.setRequestHeader('Range', 'bytes=0-');
request.responseType = 'arraybuffer';
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
playSound(buffer);
}, function () {
console.debug('error');
});
};
request.send();
}
function playSound(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
}
})();