Wie zeichne ich Audio in Javascript?

Question

Ich verwende derzeit getUserMedia(), die nur auf Firefox und Chrome funktioniert, aber es wurde veraltet und funktioniert nur auf https (in Chrome). Gibt es einen anderen/besseren Weg, um die Spracheingabe in Javascript zu erhalten, das auf allen Plattformen funktioniert?

z. Wie können Webseiten wie web.whatsapp.com Audio aufnehmen? getUserMedia() fordert Erstbenutzer auf, Audioaufzeichnungen zuzulassen, während die WhatsApp-Anwendung die Erlaubnis des Benutzers nicht erfordert.

The getUserMedia() Ich bin derzeit mit sieht wie folgt aus:

navigator.getUserMedia(
    { 
     "audio": { 
      "mandatory": { 
       "googEchoCancellation": "false", 
       "googAutoGainControl": "false", 
       "googNoiseSuppression": "false", 
       "googHighpassFilter": "false" 
      }, 
      "optional": [] 
     }, 
    }, gotStream, function(e) { 
     console.log(e); 
    }); 

Answer 1

Chrome benötigt https verwenden, da getUserMedia ein leistungsfähiges feature ist. Der API-Zugriff sollte in nicht sicheren Domänen nicht funktionieren, da dieser API-Zugriff möglicherweise auf nicht sichere Akteure ausgeleitet wird. Firefox unterstützt weiterhin getUserMedia über http.

Ich habe RecorderJS verwendet und es hat meine Zwecke gut erfüllt. Hier ist ein Codebeispiel. (source)

function RecordAudio(stream, cfg) { 

    var config = cfg || {}; 
    var bufferLen = config.bufferLen || 4096; 
    var numChannels = config.numChannels || 2; 
    this.context = stream.context; 
    var recordBuffers = []; 
    var recording = false; 
    this.node = (this.context.createScriptProcessor || 
    this.context.createJavaScriptNode).call(this.context, 
    bufferLen, numChannels, numChannels); 

    stream.connect(this.node); 
    this.node.connect(this.context.destination); 

    this.node.onaudioprocess = function(e) { 
    if (!recording) return; 
    for (var i = 0; i < numChannels; i++) { 
     if (!recordBuffers[i]) recordBuffers[i] = []; 
     recordBuffers[i].push.apply(recordBuffers[i], e.inputBuffer.getChannelData(i)); 
    } 
    } 

    this.getData = function() { 
    var tmp = recordBuffers; 
    recordBuffers = []; 
    return tmp; // returns an array of array containing data from various channels 
    }; 

    this.start() = function() { 
    recording = true; 
    }; 

    this.stop() = function() { 
    recording = false; 
    }; 
} 

Die Verwendung ist einfach:

var recorder = new RecordAudio(userMedia); 
recorder.start(); 
recorder.stop(); 
var recordedData = recorder.getData() 

Edit: Sie können auch diese answer überprüfen möchten, wenn nichts funktioniert.

Answer 2

Die getUserMedia() ist nicht veraltet, veraltet verwendet es über http. Wie weit ich weiß, der einzige Browser, der https für getUserMedia() im Moment benötigt, ist Chrome, was ich denke, ist der richtige Ansatz.

Wenn Sie möchten ssl/tls für Ihren Test können Sie kostenlose Version von CloudFlare verwenden.

Whatsapp Seite bietet keine Aufnahmefunktionen, es ermöglicht Ihnen nur, Anwendung zu starten.

Good article about getUserMedia

Fully working example with use of MediaRecorder

Answer 3

Recorder JS macht die leichte Aufgabe für Sie. Es funktioniert mit Web Audio API Knoten

Chrome und Firefox Browsers hat sich jetzt entwickelt. Es gibt eine eingebaute MediaRecoder API, die Audioaufnahmen für Sie macht.

navigator.mediaDevices.getUserMedia({audio:true}) 
    .then(stream => { 
     rec = new MediaRecorder(stream); 
     rec.ondataavailable = e => { 
      audioChunks.push(e.data); 
      if (rec.state == "inactive"){ 
       // Use blob to create a new Object URL and playback/download 
      } 
     } 
    }) 
    .catch(e=>console.log(e)); 

Arbeiten demo

MediaRecoder Unterstützung geht von

Chrome-Unterstützung: 47

Firefox-Unterstützung: 25,0