Ausführliche Erläuterung der Fallstricke bei der HTML5-Aufzeichnung

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):

1. Kompatibilitätsschreibmethode zum Aufrufen der Audio-API

2. Ermitteln Sie die Größe des aufgenommenen Tons (sollte sein). Häufigkeit)

3. Kompatibilität Schreibmethode zum Anhalten der Aufnahme

4. 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;
};

HTTPS: Unter Chrome muss die gesamte Website über HTTPS verfügen darf verwendet werden

1. WeChat: Der integrierte Browser in WeChat muss JSSDK aufrufen, um

2. Audioformatkonvertierung: Es gibt Viele Möglichkeiten, Audio zu formatieren, können Sie überprüfen. Die meisten Informationen, die wir erhalten haben, wurden im Grunde genommen voneinander kopiert. Natürlich gibt es auch das Problem der Audioqualität, auf das ich hier nicht näher eingehen werde.
Fazit

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!