Dieser Artikel stellt hauptsächlich die Fallstricke vor, die darin bestehen, die HTML5-Aufzeichnung im Detail zu erklären. Der Herausgeber findet ihn ziemlich gut, daher werde ich ihn jetzt mit Ihnen teilen und ihn als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Um ehrlich zu sein, war ich am Anfang noch nie mit der Audio-API von HTML5 vertraut und wir müssen sie vor der Übernahme anhand des Codes optimieren. Natürlich gibt es auch viele Fallstricke. Dieses Mal werde ich auch über meine Gefühle im Zusammenhang mit diesen Fallstricken sprechen (die Initialisierung und der Erwerb einiger grundlegender Objekte werden weggelassen, da diese Inhalte diesmal nicht im Mittelpunkt stehen. Interessierte Studenten können MDN durchsuchen selbst. (Dokument auf):
Kompatibilitätsschreibmethode zum Aufrufen der Audio-API
Ermitteln Sie die Größe des aufgenommenen Tons (sollte sein). Häufigkeit)
Kompatibilität Schreibmethode zum Anhalten der Aufnahme
Abrufen der aktuellen Aufnahmezeit
Vorbereitung vor der Aufnahme
Bevor Sie mit der Aufnahme beginnen, müssen Sie zunächst ermitteln, ob das aktuelle Gerät die Audio-API unterstützt. Die frühere Methode navigator.getUserMedia wurde durch navigator.mediaDevices.getUserMedia ersetzt. Normalerweise unterstützen die meisten modernen Browser jetzt die Verwendung von navigator.mediaDevices.getUserMedia. Natürlich bietet MDN auch Kompatibilitätsanweisungen
const promisifiedOldGUM = function(constraints) { // First get ahold of getUserMedia, if present const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; // Some browsers just don't implement it - return a rejected promise with an error // to keep a consistent interface if (!getUserMedia) { return Promise.reject( new Error('getUserMedia is not implemented in this browser') ); } // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise return new Promise(function(resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); }; // Older browsers might not implement mediaDevices at all, so we set an empty object first if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } // Some browsers partially implement mediaDevices. We can't just assign an object // with getUserMedia as it would overwrite existing properties. // Here, we will just add the getUserMedia property if it's missing. if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = promisifiedOldGUM; }
, da diese Methode asynchron ist, sodass wir benutzerfreundliche Eingabeaufforderungen für inkompatible Geräte bereitstellen können
navigator.mediaDevices.getUserMedia(constraints).then( function(mediaStream) { // 成功 }, function(error) { // 失败 const { name } = error; let errorMessage; switch (name) { // 用户拒绝 case 'NotAllowedError': case 'PermissionDeniedError': errorMessage = '用户已禁止网页调用录音设备'; break; // 没接入录音设备 case 'NotFoundError': case 'DevicesNotFoundError': errorMessage = '录音设备未找到'; break; // 其它错误 case 'NotSupportedError': errorMessage = '不支持录音功能'; break; default: errorMessage = '录音调用错误'; window.console.log(error); } return errorMessage; } );
Wenn alles gut geht, können wir mit dem nächsten Schritt fortfahren.
(Die Methode zum Erhalten des Kontexts wird hier weggelassen, da sie dieses Mal nicht im Mittelpunkt steht)
Aufnahme starten, Aufnahme anhalten
Hier ein besonderes Der Punkt ist, dass eine Zwischenvariable hinzugefügt werden muss, um zu erkennen, ob gerade eine Aufzeichnung stattfindet. Denn im Firefox-Browser haben wir ein Problem festgestellt, aber als wir auf „Pause“ geklickt haben, haben wir festgestellt, dass er zu diesem Zeitpunkt nicht angehalten werden konnte. Diese Methode ist nicht möglich. Bei dieser Methode müssen alle Verbindungen getrennt werden. Später wurde festgestellt, dass eine Zwischenvariable this.isRecording hinzugefügt werden sollte, um zu bestimmen, ob gerade eine Aufzeichnung stattfindet. Wenn auf „Start“ geklickt wird, wird sie auf „true“ gesetzt, und wenn sie angehalten wird, wird sie auf „false“ gesetzt.
Wenn wir mit der Aufnahme beginnen, gibt es ein Aufnahme-Hörereignis im Audioprozess. Wenn „true“ zurückgegeben wird, wird der Stream geschrieben. Wenn „false“ zurückgegeben wird, wird er nicht geschrieben. Beurteilen Sie daher this.isRecording. Wenn es falsch ist, gibt es hier natürlich eine Gefahr, das heißt, es kann nicht mehr verwendet werden Ermitteln Sie die aktuelle Aufnahmedauer, da es sich nicht um eine tatsächliche Pause handelt, sondern der Stream nicht geschrieben wird. Wir müssen also auch die aktuelle Aufnahmedauer ermitteln, die über eine Formel
// 一些初始化 const audioContext = new AudioContext(); const sourceNode = audioContext.createMediaStreamSource(mediaStream); const scriptNode = audioContext.createScriptProcessor( BUFFER_SIZE, INPUT_CHANNELS_NUM, OUPUT_CHANNELS_NUM ); sourceNode.connect(this.scriptNode); scriptNode.connect(this.audioContext.destination); // 监听录音的过程 scriptNode.onaudioprocess = event => { if (!this.isRecording) return; // 判断是否正则录音 this.buffers.push(event.inputBuffer.getChannelData(0)); // 获取当前频道的数据,并写入数组 };
ermittelt werden muss, damit wir die richtige Aufnahmedauer ermitteln können.
const getDuration = () => { return (4096 * this.buffers.length) / this.audioContext.sampleRate // 4096为一个流的长度,sampleRate 为采样率 }
Aufnahme beenden
Die Möglichkeit, die Aufnahme zu beenden, besteht darin, sie zuerst anzuhalten, dann zuerst Hörvorgänge oder andere Vorgänge auszuführen und dann die Array-Länge des Streams zu speichern 0.
Häufigkeit abrufen
Andere
getVoiceSize = analyser => { const dataArray = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(dataArray); const data = dataArray.slice(100, 1000); const sum = data.reduce((a, b) => a + b); return sum; };
Die meisten Probleme, die dieses Mal aufgetreten sind, waren Kompatibilitätsprobleme, daher bin ich auf viele Fallstricke gestoßen, insbesondere auf „Es ist ein Problem“. Auf der mobilen Seite gab es zu Beginn ein Problem mit der falschen Ermittlung der Aufnahmedauer, was dazu führte, dass die Aufnahme direkt einfrierte. Diese Erfahrung hat auch einige Lücken in der HTML5-API geschlossen. Das Wichtigste ist natürlich, alle daran zu erinnern, dass diese Art der nativen API-Dokumentation einfach und grob durch direktes Anzeigen von MDN erhalten wird!
Verwandte Empfehlungen:10 empfohlene Artikel zum Thema Aufzeichnen
Von WeChat entwickelte Aufnahmefunktion
Detaillierte Erläuterung des Beispielcodes für die Aufzeichnung und Komprimierung von HTML5-Webseiten
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Fallstricke bei der HTML5-Aufzeichnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!