2

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..

Feru Maximus
  • 91
  • 1
  • 7
  • 1
    https://bugzilla.mozilla.org/show_bug.cgi?id=898771 say that that is the "expected behavior" (they even not sure what is the expected behaivor)... Only the first blob have the valid header, we need to find away to append these blobs together..I think! – nvcnvn Jan 06 '15 at 03:06

1 Answers1

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.

nvcnvn
  • 4,991
  • 8
  • 49
  • 77