Wie programmiere ich programmatisch ein Webm-Audio, das ich gerade in HTML5 aufgenommen habe?

Question

Ich habe gerade ein Stück Audio aufgenommen und möchte es mit reinem Javascript Code abspielen.

Also das ist mein Code:

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

Was muss ich in ondataavailable so zu tun, dass ich die Audio-Stücke im Speicher abgelegt spielen können, ohne und audio oder video-Tag in HTML?

Answer 1

Ich sehe nicht wirklich, warum Sie kein Audio- oder Videoelement wollen, aber die ersten Schritte sind gleich.

Das Ereignis MediaRecorder.ondataavailable wird in regelmäßigen Abständen ausgelöst und enthält eine data-Eigenschaft, die einen Teil des aufgezeichneten Mediums enthält. Sie müssen diese Chunks speichern, um sie am Ende der Aufzeichnung in einem einzelnen Blob zusammenführen zu können.
Um sie zusammenzuführen, würden Sie einfach new Blob(chunks_array) aufrufen, wobei chunks_array ein Array ist, das alle Brocken enthält, die Sie von dataavailable.data erhalten haben.

Sobald Sie diesen endgültigen Blob haben, können Sie ihn als normales Medium verwenden, z. B. entweder in einem MediaElement dank der Methode URL.createObjectURL abspielen oder in einen ArrayBuffer konvertieren und dann über die WebAudio API dekodieren oder was auch immer Sie wollen.

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 für Chrom und seinen schweren Einschränkungen iframes.