How to send Voice message by html5

Today, the editor will share with you the relevant knowledge points about how html5 can send voice messages. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Realization idea

1. When using getUserMedia, you need to consider the differences of each browser.

2. Use WebWorker to handle recording and audio conversion.

3. WAV converted to Base64 format for browser playback (note here, you can convert Blob to direct playback. Here, in order to explain the interface for converting audio, it is converted to Baes64).

Concrete realization

1. Start recording: RongRecorder.record ()

Call this method to start recording.

2. Stop recording: RongRecorder.stop ()

Call this method to stop recording.

3. Stop and export: RongRecorder.stopAndExport (type,callback)

Call this method to stop and export the audio to the specified type type

4. Export: RongRecorder.exportRecord (type)

Exports an audio stream of the specified type type.

5. Clear the local audio stream: RongRecorder.clear ()

Demo

1. Compatible with getUserMedia code snippets

Navigator.getUserMedia = navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia; 2, WebWorker code snippet

This.onmessage = function (e) {switch (e.data.command) {case 'init': init (e.data.config); break; case' record': record (e.data.buffer); break; case 'exportRecord': exportRecord (e.data.type); break; case' clearRecord': clearRecord (); break;}}; function init (config) {sampleRate = config.sampleRate } function clearRecord () {recBuffersL.length = 0; recLength = 0;} function record (inputBuffer) {recBuffersL.push (inputBuffer [0]); / / recBuffersR.push (inputBuffer [1]); recLength + = inputBuffer [0] .length;} function exportRecord (type) {var bufferL = mergeBuffers (recBuffersL, recLength); var interleaved = interleave (bufferL); var dataview = encodeWAV (interleaved); var audioBlob = new Blob ([dataview], {type: type}); this.postMessage (audioBlob) } these are all the contents of the article "how to send voice messages in html5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.