70 lines
2.0 KiB
HTML
70 lines
2.0 KiB
HTML
|
<audio controls autoplay></audio>
|
||
|
|
<br/><br/>
|
||
|
|
<div id="log">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function log(str) {
|
||
|
|
var el = document.querySelector('#log');
|
||
|
|
el.appendChild(document.createTextNode(str));
|
||
|
|
el.appendChild(document.createElement('br'));
|
||
|
|
};
|
||
|
|
|
||
|
|
function loadNextChunk() {
|
||
|
|
var chunkName = chunkBasename + '_' + chunkID + '.aac';
|
||
|
|
var chunkURL = chunkHost + '/' + chunkName;
|
||
|
|
log('Loading chunk ' + chunkID + ' from ' + chunkURL);
|
||
|
|
|
||
|
|
var request = new XMLHttpRequest();
|
||
|
|
request.responseType = 'arraybuffer';
|
||
|
|
request.open('GET', chunkURL, true);
|
||
|
|
request.addEventListener('load', function(evt) {
|
||
|
|
log('Loaded chunk ' + chunkName + ', rcvd ' + request.response.byteLength + ' bytes');
|
||
|
|
audio.play();
|
||
|
|
|
||
|
|
processChunk(request.response);
|
||
|
|
}, false);
|
||
|
|
request.send();
|
||
|
|
chunkID++;
|
||
|
|
chunkID>1751&&(chunkID=1747)
|
||
|
|
}
|
||
|
|
|
||
|
|
function processChunk(arraybuffer) {
|
||
|
|
// all the chunks have a 73-byte ID3 tag prepended to them by the HLS server.
|
||
|
|
// It's easy to remove this before sending it to the SourceBuffer:
|
||
|
|
log('Appending arraybuffer to SourceBuffer...');
|
||
|
|
mediaSourceBuffer.appendBuffer(arraybuffer.slice(73));
|
||
|
|
}
|
||
|
|
|
||
|
|
var mediaSource, mediaSourceBuffer, audio;
|
||
|
|
var chunkID = 1747;
|
||
|
|
// var codec = 'audio/mp4; codecs="mp4a.40.29"'; // HE-AAC v2
|
||
|
|
var codec = 'audio/aac'; // HE-AAC v2
|
||
|
|
var chunkHost = '/audio';
|
||
|
|
var chunkBasename = 'media_w1745922472';
|
||
|
|
var interval;
|
||
|
|
|
||
|
|
log('Creating MediaSource object');
|
||
|
|
mediaSource = new MediaSource();
|
||
|
|
|
||
|
|
mediaSource.addEventListener('sourceopen', function() {
|
||
|
|
log('MediaSource rcvd sourceopen');
|
||
|
|
mediaSourceBuffer = mediaSource.addSourceBuffer(codec);
|
||
|
|
|
||
|
|
interval = setInterval(loadNextChunk, 2000);
|
||
|
|
loadNextChunk();
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
mediaSource.addEventListener('sourceclose', function() {
|
||
|
|
log('MediaSource rcvd sourceclose - playback failed!');
|
||
|
|
if(interval) {
|
||
|
|
clearInterval(interval);
|
||
|
|
interval = null;
|
||
|
|
}
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
audio = document.querySelector('audio');
|
||
|
|
audio.src = URL.createObjectURL(mediaSource);
|
||
|
|
</script>
|
||
|
|
|