Aufnahme von JS-Ton über ein Mikrofon oder Sprachkommentare
Vor nicht allzu langer Zeit wollte der Kunde bei der Entwicklung einer einzigen Unternehmens-Webanwendung Sprachkommentare hinterlassen können. Bisher bin ich nicht auf die Erstellung von Medieninhalten gestoßen und habe mich intensiv mit diesem Thema beschäftigt.
Das Netzwerk lieferte genügend Hintergrundinformationen zum Thema Erstellen und Verarbeiten von Inhalten dieser Art, aber ich fand kein einfaches, voll funktionsfähiges Beispiel. Nach der Implementierung der Aufgabe durch den Kunden habe ich beschlossen, das einfachste Beispiel für das Aufzeichnen und Speichern von Sprachkommentaren zu veröffentlichen und einen Artikel zu schreiben. Vielleicht ist dieses Material für jemanden nützlich und hilft bei der Studie.
Erklärung des Problems
Wir haben es uns zur Aufgabe gemacht, eine Mini-Anwendung zu entwickeln, die in einem Browser ausgeführt wird, mit der Sie einen Sprachkommentar aufzeichnen und eine Aufzeichnung an den Server senden können. Der Server speichert die Aufzeichnung, gibt bei Erfolg eine Antwort mit dem Namen der erstellten Datei zurück und zeigt das Objekt auf der Seite an, damit die Aufzeichnung abgehört werden kann.
Ton im Browser aufnehmen
Die Audioaufzeichnung wurde mit der MediaStream Recording-Web-API implementiert. Für die Aufnahme verwenden wir die Schnittstelle MediaRecorder (). Erstellen Sie jedoch zunächst eine Schnittstelle. Lassen Sie uns index.html haben, das nur die grundlegendsten Tags enthält, und im Hauptteil des Tags werden wir eine Datei mit unserer zukünftigen JavaScript-Datei voice.js einfügen:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Voice comments</title> </head> <body> <script src="voice.js"></script> </body> </html>
Erstellen Sie eine voice.js-Datei, und definieren Sie darin eine URL-Konstante, die einen Link zu einem Skript enthält, das aufgezeichneten Sound empfängt. Erstellen Sie als Nächstes die Schaltflächen Start und Stop, um die Tonaufnahme zu starten und zu stoppen, sowie den Div-Block, in dem die gespeicherten Aufzeichnungen angezeigt werden. Hiermit ist unser Interface fertig, Sie können direkt zur Tonaufnahme übergehen.
Wie bereits für die Aufnahme erwähnt, verwenden wir die Schnittstelle MediaRecorder () (weitere Informationen zur Schnittstelle finden Sie in der Dokumentation). Für den Betrieb ist es erforderlich, den Medienstrom zu bestimmen, von dem der Ton aufgenommen wird. Initialisieren Sie nur, dass Sie nur eine Audiospur benötigen.
navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream)});
Jetzt haben wir die Konstante mediaRecorder, die eine Instanz der Schnittstelle enthält, und wir werden weiterhin damit arbeiten.
Um die Aufzeichnung zu starten, müssen wir die MediaRecorder.start () -Methode aufrufen, um die Aufzeichnung zu beenden, die MediaRecorder.stop () -Methode. In diesem Fall generiert MediaRecorder.stop () ein datenverfügbares Ereignis, über das wir Zugriff auf die digitalisierte Tonaufnahme in Form eines binären Arrays erhalten.
Und so werden wir die obigen Ereignisse beschreiben, das voice [] -Array deklarieren und die empfangenen Daten hineinschreiben:
navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream); let voice = []; document.querySelector('#start').addEventListener('click', function(){ mediaRecorder.start(); }); mediaRecorder.addEventListener("dataavailable",function(event) { voice.push(event.data); }); document.querySelector('#stop').addEventListener('click', function(){ mediaRecorder.stop(); }); });
Nun bereiten wir die empfangenen Daten für den Versand vor. Erstellen Sie dazu bis zum Stop-Ereignis eine BLOB-Instanz, speichern Sie die empfangenen Daten darin und geben Sie den MIME-Datentyp an. In unserem Fall handelt es sich um Audio / WAV.
mediaRecorder.addEventListener("stop", function() { const voiceBlob = new Blob(voice, { type: 'audio/wav' });
Als Ergebnis haben wir die voiceBlob-Konstante, in der sich der Inhalt unserer zukünftigen WAV-Datei mit der Aufzeichnung einer Sprachnachricht befindet.
Senden eines Datensatzes an den Server
Um einen Datensatz an den Server zu senden, habe ich mich für die Methode fetch () entschieden. Da diese Methode die modernste ist und eine verbesserte Schnittstelle für Anfragen an den Server bietet. Als Teil unserer Aufgabe müssen wir eine POST-Anforderung initiieren, in deren Hauptteil der Inhalt unserer zukünftigen Datei zum Speichern auf dem Server gesendet wird (wie die Methode fetch () funktioniert und welche Funktionen in der Dokumentation im Detail enthalten sind). Erstellen Sie ein neues Formular mit dem Sprachfeld und fügen Sie den Inhalt unserer Aufzeichnung ein.
let fd = new FormData(); fd.append('voice', voiceBlob);
Wir erstellen eine asynchrone Funktion zum Senden einer Nachricht an den Server, um eine Antwort zu erhalten und ein Audioobjekt anzuzeigen, um eine bereits gespeicherte Datei abzuspielen. Als Argument nimmt die Funktion die oben erstellte Form an.
Wir initiieren eine Serveranfrage:
let promise = await fetch(URL, { method: 'POST', body: form});
Wenn die HTTP-Antwort vom Server keinen Fehlercode enthält (der Antwortcode liegt im Bereich von 200-299), müssen wir die Antwort decodieren, ein neues Audioobjekt auf der Seite erstellen, ihre Eigenschaften bestimmen und anzeigen. Wie die Antwort gebildet wird, wird unten diskutiert.
Eine Datei auf dem Server speichern
Erstellen wir ein Skript auf dem Server, das unsere POST-Anfrage mit einer Sprachnachricht empfängt. Da es sich bei der von uns gesendeten Tonaufnahme im Wesentlichen bereits um eine Datei im Formular handelt, erhalten wir diese auf dem Server entsprechend:
$uploadDir = 'voice/'; $typeFile = explode('/', $_FILES['voice']['type']); $uploadFile = $uploadDir . basename(md5($_FILES['voice']['tmp_name'].time()).'.'.$typeFile[1]); if (move_uploaded_file($_FILES['voice']['tmp_name'], $uploadFile)) { $response = ['result'=>'OK', 'data'=>'../'.$uploadFile]; } else { $response = ['result'=>'ERROR', 'data'=>'']; } echo json_encode($response);
Sie finden viele ähnliche Beispiele für PHP-Code, der empfangene Dateien im Netzwerk verarbeitet. Initialisieren Sie zunächst die Variablen $ uploadDir - das Verzeichnis, in dem die empfangene Datei gespeichert wird. In unserem Fall ist der Dateityp & typeFile gleich wav und der vollständige Name der Datei, einschließlich des Verzeichnisses. Der Dateiname wird in diesem Fall durch Kombination des "temporären" Dateinamens und des Zeichenfolgenwerts der aktuellen Uhrzeit gebildet, die mit der md5-Methode verschlüsselt wurden. Wenn Sie die Datei erfolgreich mit einer Sprachnachricht im angegebenen Verzeichnis speichern, bilden wir eine Antwort in Form eines Arrays mit dem Ergebnisfeld „OK“ oder „ERROR“, je nach Ergebnis und dem Feld „Daten“, das bei erfolgreicher Verarbeitung einen Link zur gespeicherten Datei enthält.
Der Einfachheit halber wandeln wir das Array in ein JSON-Objekt um und senden es als Antwort.
Der vollständige Beispielcode ist auf
GitHub verfügbar.
PS Mit dem Browser können Sie Medieninhalte nur mit einer sicheren HTTPS-Verbindung aufzeichnen.