HTML5で録音したwebmオーディオをプログラム的に再生するにはどうすればよいですか？

Question

オーディオを録音したばかりで、純粋なJavascriptコードで再生したいと思います。

だからこれは私のコードです：

navigator.getUserMedia({audio: true},function(stream){ 
    var recorder = new MediaRecorder(stream); 

    recorder.start(1000); 

    recorder.ondataavailable = function(e){ 
     console.log(e.data); 
     // var buffer = new Blob([e.data],{type: "video/webm"}); 
    }; 
}); 

は、私はHTMLで、オーディオなしでメモリに保存されているチャンクとaudioまたはvideoタグを再生することができるようondataavailableで行うには何がありますか？

Answer 1

なぜオーディオやビデオの要素が欲しくないのか分かりませんが、とにかく最初の手順は同じです。

MediaRecorder.ondataavailableイベントは定期的に発生し、記録されたメディアの塊を含むdataプロパティを含みます。 これらのチャンクは、録音の最後に1つのBlobでマージできるようにするために格納する必要があります。
これらをマージするには、new Blob(chunks_array)を呼び出します。chunks_arrayは、dataavailable.dataから得られたすべてのチャンクBLOBを含む配列です。

最終的なBlobを取得したら、URL.createObjectURLメソッドのおかげでMediaElementで再生するか、またはArrayBufferに変換してWebAudio APIでデコードするなど、通常のメディアとして使用できますまたはあなたが好む他の方法があれば。クロムとその重のiframeの制約のため

navigator.mediaDevices.getUserMedia({audio: true}) 
 
.then(recordStream) 
 
.catch(console.error); 
 

 
function recordStream(stream){ 
 
    const chunks = []; // an Array to store all our chunks 
 
    const rec = new MediaRecorder(stream); 
 
    rec.ondataavailable = e => chunks.push(e.data); 
 
    rec.onstop = e => { 
 
    stream.getTracks().forEach(s => s.stop()); 
 
    finalize(chunks); 
 
    }; 
 
    rec.start(); 
 
    setTimeout(()=>rec.stop(), 5000); // stop the recorder in 5s 
 
} 
 
function finalize(chunks){ 
 
    const blob = new Blob(chunks); 
 
    playMedia(blob); 
 
} 
 
function playMedia(blob){ 
 
    const ctx = new AudioContext(); 
 
    const fileReader = new FileReader(); 
 
    fileReader.onload = e => ctx.decodeAudioData(fileReader.result) 
 
    .then(buf => { 
 
    btn.onclick = e => { 
 
     const source = ctx.createBufferSource(); 
 
     source.buffer = buf; 
 
     source.connect(ctx.destination); 
 
     source.start(0); 
 
    }; 
 
    btn.disabled = false; 
 
    }); 
 
    fileReader.readAsArrayBuffer(blob); 
 
}

<button id="btn" disabled>play</button>

And as a plnkr。