8 / 5 Support

Web Audio API – Audio-Buffer aufnehmen und wiedergeben

Erstellt von Thomas Sommer

31. Januar 2013

Endlich ist es mir gelungen, mit der Web Audio API von Google-Chrome eine Audio-Aufnahme vom Mikrofon vorzunehmen und diese wiederzugeben, ohne das Audio-Tag zu verwenden. Die Daten werden in einen Audio-Buffer gespeichert und können so nachbearbeitet werden. Auch gelang es mir, zwei verschiedene Audio-Buffer zu mischen, was eigentlich gar nicht so schwierig ist.

Hier ein Beispiel, wie man Audio vom Mikrofon aufnimmt und wiedergibt (funktioniert auf Google Chrome Canary. Andere weiss ich nicht):

var audio_context;
var mic;
var tmpBuffer;
var offset=0;
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
audio_context = new AudioContext;
console.log(‚Audio context eingerichtet.‘);
} catch (e) {alert(‚Ihr Web-Browser unterstuetzt die Web Audio API nicht!‘);  }
navigator.getUserMedia({video:true, audio: true}, startUserMedia, function(e) {     console.log(‚Kein live audio Eingang: ‚ + e);});
tmpBuffer=audio_context.createBuffer(1,1000000,48000);  // An Bedarf anpassen
var recording=false;
var recorder = audio_context.createJavaScriptNode(1024, 1, 1);
recorder.connect(audio_context.destination);

function startUserMedia(stream) {
mic = audio_context.createMediaStreamSource(stream);
mic.connect(recorder);
console.log(‚Einang hergestellt.‘);
}

function startRecording() {
console.log(„aufnehmen…“);
recording=true;
}

function stopRecording() {
console.log(„Aufnahme anhalten…“);
recording=false;
}

function resetRecording() {
console.log(„Reset buffer…“);
tmpBuffer=““;
tmpBuffer=audio_context.createBuffer(1,1000000,48000);
offset=0;
}

function playRecording()
{
playAudioBuffer(tmpBuffer);
}

function activateAudio(){
recorder.onaudioprocess = function (e) {
var output = e.outputBuffer.getChannelData(0);
var input = e.inputBuffer.getChannelData(0);
if (recording){
var channel=tmpBuffer.getChannelData(0);
channel.set(input,offset);
offset+=e.inputBuffer.length;
}
}
}

function deactivateAudio(){
recorder.onaudioprocess=““;
}

function playAudioBuffer(x)
{
var node=audio_context.createBufferSource();
node.buffer=x;
node.connect(audio_context.destination);
console.log(„Aufnahme abspielen…“);
node.start(0);
}

Dies ist ledglich der JavaScript-Teil. Der Anwender möge die HTML-Struktur zum Aufrufen der Funktionen selber erstellen, was für einen HTML-/ JavaScript-Programmierer kein Problem sein sollte.

Das könnte Sie auch interessieren…

Sermon SFC – Revelation 2

Sermon SFC – Revelation 2

Take it seriously with faith. Focus on God. Don't compromise your faith. by Rev. Geoffrey Matiti, Revelation 2

Latte Macchiato

Latte Macchiato

Wer von Zeit zu Zeit diese besondere Art von Kaffee geniessen möchte, dem empfehle ich spezielle...

0 Kommentare