Regarding the use of Vue recording function, for your reference, the specific content is as follows
**
1. Introduce external js files
import { HZRecorder} from ‘…/…/utils/';
js file content
export function HZRecorder(stream, config) { config = config || {}; = || 16; //Sampling digits 8, 16 = || 16000; //Sampling rate 16khz var context = new ( || )(); var audioInput = (stream); var createScript = || ; var recorder = (context, [4096, 1, 1]); var audioData = { size: 0 //Recording file length , buffer: [] //Recording cache , inputSampleRate: //Input the sampling rate , inputSampleBits: 16 //Input sampling digits 8, 16 , outputSampleRate: //Output sampling rate , oututSampleBits: //Output sampling digits 8, 16 , input: function (data) { (new Float32Array(data)); += ; } , compress: function () { //Merge compression //merge var data = new Float32Array(); var offset = 0; for (var i = 0; i < ; i++) { ([i], offset); offset += [i].length; } //compression var compression = parseInt( / ); var length = / compression; var result = new Float32Array(length); var index = 0, j = 0; while (index < length) { result[index] = data[j]; j += compression; index++; } return result; } , encodeWAV: function () { var sampleRate = (, ); var sampleBits = (, ); var bytes = (); var dataLength = * (sampleBits / 8); var buffer = new ArrayBuffer(44 + dataLength); var data = new DataView(buffer); var channelCount = 1;//Mono var offset = 0; var writeString = function (str) { for (var i = 0; i < ; i++) { data.setUint8(offset + i, (i)); } } // Resource exchange file identifier writeString('RIFF'); offset += 4; // The total number of bytes from the next address to the end of the file, that is, the file size -8 data.setUint32(offset, 36 + dataLength, true); offset += 4; // WAV file logo writeString('WAVE'); offset += 4; // Waveform format logo writeString('fmt '); offset += 4; // Filter bytes, generally 0x10 = 16 data.setUint32(offset, 16, true); offset += 4; // Format category (PCM format sampling data) data.setUint16(offset, 1, true); offset += 2; // Number of channels data.setUint16(offset, channelCount, true); offset += 2; // Sampling rate, the number of samples per second, indicating the playback speed of each channel data.setUint32(offset, sampleRate, true); offset += 4; // Waveform data transmission rate (average number of bytes per second) Mono × Number of data bits per second × Data bits per sample/8 data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4; // Fast data adjustment number The number of bytes taken at one sampling Mono × Number of data bits per sample/8 data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2; // Number of data bits per sample data.setUint16(offset, sampleBits, true); offset += 2; // Data identifier writeString('data'); offset += 4; // Total number of sampled data, that is, total data size -44 data.setUint32(offset, dataLength, true); offset += 4; // Write sampled data if (sampleBits === 8) { for (var i = 0; i < ; i++, offset++) { var s = (-1, (1, bytes[i])); var val = s < 0 ? s * 0x8000 : s * 0x7FFF; val = parseInt(255 / (65535 / (val + 32768))); data.setInt8(offset, val, true); } } else { for (var i = 0; i < ; i++, offset += 2) { var s = (-1, (1, bytes[i])); data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true); } } return new Blob([data], { type: 'audio/wav' }); } }; //Start recording = function () { (recorder); (); } //stop = function () { (); } //Get audio file = function () { (); return (); } //Replay = function (audio) { var blob=(); // saveAs(blob, "F:/"); = (()); } //Upload = function () { return () } //Audio collection = function (e) { ((0)); //record((0)); } }
2. Initialize the microphone tool in the mount of the vue component
mounted() { this.$nextTick(() => { try { <!-- Check if the microphone can be called --> = || ; = || ; = || ; audio_context = new AudioContext; (' ' + ( ? 'available.' : 'not present!')); } catch (e) { alert('No web audio support in this browser!'); } ({audio: true}, function (stream) { recorder = new HZRecorder(stream) ('Initialization is completed'); }, function(e) { ('No live audio input: ' + e); }); }) },
3. Methods call
readyOriginal () { if (!) { <!-- Turn on recording --> recorder && (); = true } else { = false <!-- End recording --> recorder && (); setTimeout(()=> { <!-- Recording Upload --> var mp3Blob = (); var fd = new FormData(); ('audio', mp3Blob); this.$http({ header: ({ 'Content-Type': 'application/x-www-form-urlencodeed' }), method: 'POST', url: 'url', data: fd, withCredentials: true, }).then((res) => { // Login interception here if ( === false) { ('/login'); } else { if ( === 200) { ('Save successfully') } else { = 'Upload failed' } } }) },1000) } },
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.