Was ich letztendlich tun möchte, ist, vom Mikrofon des Benutzers aufzunehmen und die Datei auf den Server hochzuladen, wenn sie fertig sind. Bisher habe ich es geschafft, einen Stream zu einem Element mit dem folgenden Code zu erstellen:
var audio = document.getElementById("audio_preview");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: false, audio: true}, function(stream) {
audio.src = window.URL.createObjectURL(stream);
}, onRecordFail);
var onRecordFail = function (e) {
console.log(e);
}
Wie gehe ich von dort zur Aufnahme in eine Datei?
javascript
html
html5-audio
audio-recording
Fibericon
quelle
quelle
Antworten:
Unter http://webaudiodemos.appspot.com/AudioRecorder/index.html ist eine ziemlich vollständige Aufnahmedemo verfügbar
Sie können Audio im Browser aufnehmen und anschließend die aufgenommenen Daten exportieren und herunterladen.
Sie können die Quelle dieser Seite anzeigen, um Links zum Javascript zu finden. Zusammenfassend gibt es jedoch ein
Recorder
Objekt, das eineexportWAV
Methode und eineforceDownload
Methode enthält.quelle
Der unten gezeigte Code ist für Matt Diamond urheberrechtlich geschützt und kann unter MIT-Lizenz verwendet werden. Die Originaldateien sind hier:
Speichern Sie diese Dateien und verwenden Sie
quelle
Update jetzt Chrome unterstützt auch MediaRecorder API von v47. Das Gleiche wäre, es zu verwenden (die native Aufzeichnungsmethode ist wahrscheinlich schneller als Umgehungen), die API ist wirklich einfach zu verwenden und Sie würden unzählige Antworten finden, wie Sie einen Blob für den Server hochladen .
Demo - würde in Chrome und Firefox funktionieren, absichtlich weggelassen, Blob auf Server zu schieben ...
Codequelle
Derzeit gibt es drei Möglichkeiten:wav
[alle clientseitigen, unkomprimierten Code-Aufzeichnungen] können Sie -> Recorderjs auschecken . Problem: Die Dateigröße ist ziemlich groß, es ist mehr Upload-Bandbreite erforderlich.mp3
[Client-seitige, komprimierte Code-Aufzeichnung] können Sie -> mp3Recorder auschecken . Problem: Ich persönlich finde die Qualität schlecht, auch gibt es dieses Lizenzproblem.Als
ogg
[client + server (node.js
) - Code, komprimierte Aufzeichnung, unendliche Stunden der Aufzeichnung ohne Browserabsturz] können Sie auschecken -> recordOpus , entweder nur clientseitige Aufzeichnung oder Client-Server-Bündelung. Sie haben die Wahl.Beispiel für eine Aufnahme (nur Firefox):
Fiddle Demo für ogg Aufnahme.quelle
Dies ist ein einfacher JavaScript-Soundrekorder und -Editor. Du kannst es versuchen.
https://www.danieldemmel.me/JSSoundRecorder/
Kann von hier herunterladen
https://github.com/daaain/JSSoundRecorder
quelle
Hier ist ein gitHub-Projekt, das genau das tut.
Es zeichnet Audio vom Browser im MP3-Format auf und speichert es automatisch auf dem Webserver. https://github.com/Audior/Recordmp3js
Sie können auch eine detaillierte Erläuterung der Implementierung anzeigen: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
quelle
Sie können mit Recordmp3js von GitHub Ihre Anforderungen zu erreichen. Sie können vom Mikrofon des Benutzers aufnehmen und die Datei dann als MP3 abrufen. Laden Sie es schließlich auf Ihren Server hoch.
Ich habe dies in meiner Demo verwendet. An dieser Stelle ist bereits ein Beispiel mit dem Quellcode des Autors verfügbar: https://github.com/Audior/Recordmp3js
Die Demo ist hier: http://audior.ec/recordmp3js/
Funktioniert derzeit aber nur unter Chrome und Firefox.
Scheint gut und ziemlich einfach zu funktionieren. Hoffe das hilft.
quelle
getUserMedia()
funktioniert nur auf sicheren Ursprüngen (https, localhost) seit Chrome 47Streamen Sie Audio in Echtzeit, ohne auf das Ende der Aufnahme zu warten: https://github.com/noamtcohen/AudioStreamer
Dadurch werden PCM-Daten gestreamt, Sie können den Code jedoch so ändern, dass MP3 oder Speex gestreamt werden
quelle