Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve recording in HTML5". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to record in HTML5.

Preparation before recording

Before you start recording, you need to find out whether the current device supports Audio API. The early method navigator.getUserMedia has been replaced by navigator.mediaDevices.getUserMedia. Normally, most modern browsers already support the use of navigator.mediaDevices.getUserMedia. Of course, compatibility is also written on MDN.

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 firstif (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 give friendly prompts to incompatible devices

Navigator.mediaDevices.getUserMedia (constraints) .then (function (mediaStream) {/ / success}, function (error) {/ / failed const {name} = error; let errorMessage; switch (name) {/ / user rejects case 'NotAllowedError': case' PermissionDeniedError': errorMessage = 'user has prohibited web page from calling recording device'; break; / / not connected to recording device case 'NotFoundError': case' DevicesNotFoundError': errorMessage = 'recording device not found'; break / / other errors case 'NotSupportedError': errorMessage =' recording function is not supported'; break; default: errorMessage = 'recording call error'; window.console.log (error);} return errorMessage;})

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

(the method of getting the context is omitted here, because this is not the point this time.)

Start recording, pause recording

There is a special point here, that is, you need to add an intermediate variable to identify whether or not you are currently recording. Because we found a problem in Firefox, the recording process was normal, but when we clicked pause, we found that it could not be paused. We were using the disconnect method at that time. This method does not work, it is necessary to disconnect all connections. It turns out that you should add an intermediate variable, this.isRecording, to determine whether you are currently recording, set it to true when you click start, and set it to false when paused.

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

/ / some initialization 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); / / Monitoring the recording process scriptNode.onaudioprocess = event = > {if (! this.isRecording) return; / / to determine whether regular recording this.buffers.push (event.inputBuffer.getChannelData (0)) / / get the data of the current channel and write to the array}

Of course, there will also be a pit, which can no longer be used and has its own way to get the current recording length, because it is not really paused, but the stream is not written. So we also need to get the duration of the current recording, which needs to be obtained through a formula.

Const getDuration = () = > {return (4096 * this.buffers.length) / this.audioContext.sampleRate / / 4096 is the length of a stream, sampleRate is the sampling rate}

In this way, you can get the correct recording time.

End recording

To end the recording, I pause first, then audition or other operations are performed first, and then set the array length of the storage stream to 0.

Get frequency

GetVoiceSize = analyser = > {const dataArray = new Uint8Array (analyser.frequencyBinCount); analyser.getByteFrequencyData (dataArray); const data = dataArray.slice (100,100); const sum = data.reduce ((a, b) = > a + b); return sum;}

Other

HTTPS: HTTPS is required for the whole site under chrome before it is allowed

Wechat: the browser built into Wechat needs to call JSSDK to use it.

Audio format conversion: there are many ways of audio format, most of the information that can be found, we basically copy each other, of course, there is a problem of audio quality, which will not be discussed here.

Thank you for your reading, the above is the content of "how to achieve recording in HTML5", after the study of this article, I believe you have a deeper understanding of how to achieve recording in HTML5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.