Aufnahme html5 Audio

Question

Ist es möglich, noch mit html5 Ton aufzunehmen? Ich habe die neueste Kanarienvogel-Version von Chrome heruntergeladen und verwenden Sie den folgenden Code ein:

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia ({audio: true}, gotAudio, noStream);

Dies fordert den Benutzer dann Audioaufzeichnung zu ermöglichen, und wenn Sie sagen „Ja“ eine Meldung angezeigt, dass Chrom Aufzeichnung. Ist es jedoch möglich, auf den Audiopuffer mit den Rohdaten zuzugreifen? Ich kann nicht herausfinden, wie. Es gibt empfohlene Spezifikationen, die noch nicht implementiert wurden, aber weiß jemand, ob es tatsächlich in jedem Browser durchgeführt werden kann und Anweisungen gibt?

Answer 1

Hier können Sie mein Beispiel finden, aber es funktioniert nicht (teilweise). Weil AUDIO-Aufnahme noch nicht in Chrome implementiert ist. Das ist der Grund, warum Sie einen 404-Fehler bekommen, der besagt, dass BLOB nicht gefunden werden kann.

Auch gibt es ein Formular darunter ist, weil mein Ziel war, das BLOB zu einer PHP-Datei zu senden, aber da nicht funktioniert, kann ich nicht versuchen. Speichere es, du kannst es später verwenden.

<audio></audio> 
<input onclick="startRecording()" type="button" value="start recording" /> 
<input onclick="stopRecording()" type="button" value="stop recording and play" /> 
<div></div> 
<!-- 
<form enctype="multipart/form-data"> 
<input name="file" type="file" /> 
<input type="button" value="Upload" /> 
</form> 
--> 

<script> 
    var onFailed = function(e) { 
    console.log('sorry :(', e); 
    }; 

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || navigator.msGetUserMedia || 
var localStream 

var audio = document.querySelector('audio'); 
var stop = document.getElementById('stop'); 


    function startRecording(){ 
     if (navigator.getUserMedia) { 
      navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) { 
      audio.src = window.URL.createObjectURL(stream); 
     document.getElementsByTagName('div')[0].innerHTML = audio.src; 
      localStream = stream; 
      }, onFailed); 
     } else { 
      alert('Unsupported'); 
      //audio.src = 'someaudio.ogg'; // fallback. 
     } 
    } 



    function stopRecording(){ 
     localStream.stop(); 
     audio.play(); 
    } 


    function sendAudio(){ 

    } 
</script> 

Anmerkung: einige Informationen und Artikel zu Firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

Answer 2

Webkit und Chrome Audio-API Unterstützung Aufnahme jedoch als ihre API entwickeln die es wird schwierig sein, Code zu erhalten, die sie verwendet.

Ein aktives Open-Source-Projekt mit dem Namen Sink.js ermöglicht die Aufnahme und ermöglicht es Ihnen auch rohe Proben drücken: https://github.com/jussi-kalliokoski/sink.js/. Da das Projekt ziemlich aktiv ist, waren sie in der Lage, die Änderungen von Webkit und Chrome im Auge zu behalten.

Answer 3

Nun ist es möglich, den Audiopuffer mit Audio Kontext API und getChannelData() zuzugreifen.

Hier ist ein Projekt auf GitHub, die direkt im MP3-Format nimmt Audio auf und speichert es auf dem Webserver: https://github.com/nusofthq/Recordmp3js

In recorder.js werden Sie sehen, wie die Audio-Puffer durch Kanäle wie so einzeln zugegriffen wird:

this.node.onaudioprocess = function(e){ 
     if (!recording) return; 
     worker.postMessage({ 
     command: 'record', 
     buffer: [ 
      e.inputBuffer.getChannelData(0), 
      //e.inputBuffer.getChannelData(1) 
     ] 
     }); 
    } 

Für eine ausführlichere Erläuterung der Implementierung Sie folgende Blogpost lesen: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/