2014-11-23 2 views
2

간격으로 음성을 캡처하여 오디오 태그로 재생하고 싶습니다.firefox os에서 mediarecorder api 및 html5 오디오 태그를 사용하여 오디오 캡처 및 재생이 작동하지 않습니다

https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/ 이 dictaphone 샘플 링크는이 사이트에 적합한 사이트입니다. 여기에 오디오를 녹음하기 시작한 경우

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

제가

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

를 사용하는 경우에는 다음이 기능이 기능 오디오 SRC에서 블롭의 오디오 데이터를 (e.data) 를 제공하는 호출 될

매 2 초 간격

mediaRecorder.ondataavailable = function(e) { 
데이터를 제공 설정됩니다.

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

audio.play() 오디오를 재생할 수 있습니다. 그러나 문제는 처음으로 녹음 된 음성을 2 초 재생합니다. 이후 2 초의 다음 데이터가 오면 오디오가 재생되지 않습니다. 블롭 (blob)과 같은 오디오 데이터가 있지만 첫 번째 재생 후에 오디오 사운드가 재생되지 않습니다. 간격으로 녹음 된 음성을 재생하려면 어떻게해야합니까?

어떤 제안을 plz ..

+1

https://bugzilla.mozilla.org/show_bug.cgi?id=898771 "예상되는 행동"이라고합니다 (예상되는 행동이 무엇인지 확실하지 않음) ... 첫 번째 BLOB에만 유효한 헤더, 우리는이 얼룩을 함께 덧붙이는 것을 발견 할 필요가있다. 나는 생각한다! – nvcnvn

답변

1

좋아, 나는 그 MediaSource API (네, 다른 비 안정적인 API를) 솔루션을 발견했다. 파이어 폭스에서 true로 가능 미디어 소스를 플래그를 설정해야한다는

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){}); 

참고 : 일부 해당 문서의 예 또는 여기 내 간단 버전을 찾을 수 있습니다.