audio capture and playback not working using mediarecorder api and html5 audio tag in firefox os

Question

I want to capture voice at interval and play it in a audio tag.

https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/ this link of dictaphone sample is a good site for this. Here used

record.onclick = function() {
  mediaRecorder.start();

to start recording audio here. If i use

mediaRecorder.start(2000); // 2sec interval

then it will give data in every 2 sec interval

mediaRecorder.ondataavailable = function(e) {

this function will be called which give the audio data in blob (e.data) In this function audio src is set.

var audioURL = window.URL.createObjectURL(e.data);
audio.src = audioURL;

calling audio.play() audio can be played. But problem is for first time it plays 2 sec recorded voice. but after that when next data of 2 sec comes no audio is played. there is audio data as blob but no audio sound plays after that first time playing.. How can i handle this to play recorded voice at interval?

any suggestion plz..

Answer 1

Ok, I found the solution, that MediaSource API (yep, another non-stable API). You can found some example in that document or my simply version here:

var mediaSource = new MediaSource();
var replay = document.querySelector('#replay');
replay.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
    console.log('sourceopen')
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
});

var mediaConstraint = { video: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var fileReader = new FileReader();
        fileReader.onload = function() {
            sourceBuffer.appendBuffer(fileReader.result);
        };
        fileReader.readAsArrayBuffer(e.data);
    }
}, function(error){});

Note that in Firefox you need set the enable-media-source flag to true.