JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/anton-test-3123145/test-17.js"></script>
<p>Media source</p>
<audio class="audio-bin" controls=""></audio><p></p>
<p>Blob</p>
<audio class="audio-blob" controls=""></audio><p></p>
<p>
<input class="time" value="0">
<button class="set-time">Set time</button>
<button class="play-all">Play all</button>
<button class="print-buffer-zones">Print buffered zones</button>
</p>
JavaScript
setUpPlayers = function(bindata) {
var base64ToArrayBuffer = function(base64) {
var binary_string = atob(base64)
var bytes = new Uint8Array(binary_string.length)
for (var i = 0; i < binary_string.length; i++) {
bytes[i] = binary_string.charCodeAt(i)
}
return bytes.buffer
}
// buttons
var bufferedZones = function(player) {
zones = []
for(var i = 0; i < player.buffered.length; i++){
zones.push(player.buffered.start(i) + " - " + player.buffered.end(i))
}
return zones.join(', ')
}
$('.set-time').on('click', function() {
$('.audio-bin')[0].pause()
$('.audio-bin')[0].currentTime = +$('.time').val()
$('.audio-blob')[0].pause()
$('.audio-blob')[0].currentTime = +$('.time').val()
})
$('.play-all').on('click', function() {
$('.audio-bin')[0].play()
$('.audio-blob')[0].play()
})
$('.print-buffer-zones').on('click', function() {
$('.audio-bin + p').html(bufferedZones($('.audio-bin')[0]))
$('.audio-blob + p').html(bufferedZones($('.audio-blob')[0]))
})
// Blob player
$('.audio-blob')[0].src = URL.createObjectURL(
new Blob(
bindata.map(function(data) { return base64ToArrayBuffer(data.data)}),
{ type: 'audio/webm' }
)
)
// MediaSource player
var mediaSource = new MediaSource()
var sourceBuffer = null
var buffer = bindata;
var appendNext = function() {
if (!buffer.length || !sourceBuffer || sourceBuffer.updating) { return }
sourceBuffer.appendBuffer(base64ToArrayBuffer(buffer.shift().data))
};
mediaSource.onsourceopen = function() {
mediaSource.onsourceopen = null
sourceBuffer = mediaSource.addSourceBuffer('audio/webm; codecs="opus"')
sourceBuffer.onupdateend = appendNext
appendNext()
};
...