Detailed explanation of the pitfalls encountered in HTML5 recording

This article mainly introduces the pitfall journey of explaining HTML5 recording in detail. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

To be honest, I have never been exposed to the HTML5 Audio API at the beginning, and we have to optimize it based on the code before we took over. Of course, there are also many pitfalls involved. This time I will also talk about my feelings around these pitfalls (the initialization and acquisition of some basic objects will be omitted because these contents are not the focus of this time. Interested students can search MDN by themselves. (document on):

1. Compatibility writing method for calling Audio API

2. Get the size of the recording sound (should be the frequency)

3. Compatibility writing method of pausing recording

4. Get the current recording time

Preparation before recording

Before starting recording, you must first obtain whether the current device supports Audio API. The earlier method navigator.getUserMedia has been replaced by navigator.mediaDevices.getUserMedia. Normally, most modern browsers now support the usage of navigator.mediaDevices.getUserMedia. Of course, MDN also provides compatibility instructions

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

Because this method is asynchronous, we can Friendly reminder for incompatible devices

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;
 }
);

If everything goes well, we can move to the next step.

(The method of obtaining the context is omitted here, because this is not the focus this time)

Start recording, pause recording

Here One special point is that an intermediate variable needs to be added to identify whether recording is currently taking place. Because on the Firefox browser, we found a problem. The recording process was normal, but when we clicked to pause, we found that it could not be paused. We used the disconnect method at that time. This method is not possible. This method requires disconnecting all connections. Later it was discovered that an intermediate variable this.isRecording should be added to determine whether recording is currently taking place. When start is clicked, it is set to true and when paused, it is set to false.

When we start recording, there will be a recording listening event onaudioprocess. If true is returned, the stream will be written. If false is returned, it will not be written. Therefore, judge this.isRecording. If it is false, directly return

// 一些初始化
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)); // 获取当前频道的数据，并写入数组
};

Of course there will be a pitfall here, that is, it can no longer be used. It comes with a method to obtain the current recording duration, because it is not actually a real pause. , but the stream is not written. So we also need to get the current recording duration, which needs to be obtained through a formula

const getDuration = () => {
    return (4096 * this.buffers.length) / this.audioContext.sampleRate // 4096为一个流的长度，sampleRate 为采样率
}

so that we can get the correct recording duration.

End recording

The way to end recording is to pause first, then perform listening or other operations first, and then store the array length of the stream. Set to 0.

Get frequency

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

Others

1. ##HTTPS: Under chrome, the entire site needs to have HTTPS before it is allowed to be used

2. WeChat: The built-in browser in WeChat needs to call JSSDK to use

3. Audio format conversion: There are many ways to format audio, which can be found Most of the information is basically copied from each other. Of course, there is also the issue of audio quality, which I won’t go into details here.

Conclusion

Most of the problems encountered this time were compatibility issues, so I encountered a lot of pitfalls, especially It's a problem on the mobile side. At the beginning, there was a problem with the wrong way to get the recording duration, which caused it to freeze directly. This experience has also made up for some gaps in the HTML5 API. Of course, the most important thing is to remind everyone that this kind of native API documentation is simply and crudely obtained by directly viewing MDN!

Related recommendations:

10 recommended articles about recording

Recording function developed by WeChat

Detailed explanation of HTML5 web page recording and compression sample code

The above is the detailed content of Detailed explanation of the pitfalls encountered in HTML5 recording. For more information, please follow other related articles on the PHP Chinese website!