前端 vue 或者麥克風，智能語音識別和播放功能

1. 終端安裝

npm install recordrtc

2.引入

import RecordRTC from 'recordrtc'

3.html（根據自己業務更改）

<div class="Page"><el-form ref="mainFormRef" class="mainForm" :model="main_form" label-width="100px" label-position="top"><el-form-item :label="'熱詞設置:\n(一行一個關鍵字，空格隔開權重,如將1號屏和3號屏調換 20)'"><el-input type="textarea" v-model="main_form.hotWords" placeholder="請輸入熱詞":autosize="{ minRows: 5, maxRows: 15 }"></el-input></el-form-item><el-form-item label="語音識別結果顯示:"><div :class="resultDetails && resultDetails.status <= 0 ? 'result_content r_h_input_red' : 'result_content'">{{main_form.result }}</div></el-form-item><el-form-item label="聲紋采集:" prop="file"><div class="voiceGather_btn"><el-select :disabled="voiceStatus" style="width: 100%" v-model="main_form.chooseMicDeviceId"placeholder="請選擇麥克風"><el-option v-for="item in Mic" :key="item.deviceId" :label="item.label" :value="item.deviceId"></el-option></el-select><div class="voiceGather" v-if="main_form.chooseMicDeviceId != ''"><el-button style="margin-left: 20px" @click="voiceInput" :loading="startLoading">{{ voiceStatus ? "取消錄音" :"開始錄音" }}</el-button></div></div><div class="voiceGather_btn"><audio controls v-if="recordedBlob" :src="recordedBlob"></audio></div></el-form-item></el-form></div>

4.data初始化數據

data() {return {recorder: '',voiceStatus: false, // 是否正在錄音main_form: {chooseMicDeviceId: '', // 選擇的麥克風idhotWords: '', // 熱詞result: '', // 語音識別結果},Mic: [], // 可選擇的麥克風RMSList: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0,],audioURL: null,file: null,resultDetails: {},//語音識別結果startLoading: false,recordedBlob: null, // Blob對象存儲錄制內容};},

5.mounted獲取getMic

mounted() {this.getMic()
}

6.methods中開始錄音和結束之后上傳到后臺服務器

methods() {getMic() {let that = this;if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {// 彈框獲取麥克風navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {navigator.mediaDevices.enumerateDevices().then(function (devices) {devices.forEach(function (device) {if (device.kind === 'audioinput') { // 麥克風if (device.deviceId != 'default' && device.deviceId != 'communications') {that.Mic.push(device)}}that.main_form.chooseMicDeviceId = that.Mic[0] ? that.Mic[0].deviceId : ''});})stream.getTracks().forEach(track => track.stop());})}},// 語音輸入點擊按鈕事件voiceInput() {// 正在語音輸入if (this.voiceStatus) {this.stopRecord() // 停止輸入} else { // 開啟語音輸入this.resultDetails ={}this.main_form.result = ''this.recordedBlob = nullthis.startRecord()}},// 開始錄音startRecord() {console.log('startRecord:鼠標摁下------------------------------')var that = thisthis.voiceStatus = true// mediaDevices可提供對相機和麥克風等媒體輸入設備的連接訪問window.navigator.mediaDevices.getUserMedia({ audio: { deviceId: this.main_form.chooseMicDeviceId } }).then((stream) => {this.stream = stream;this.getVoice()this.recorder = RecordRTC(stream, {type: 'audio',// 音頻 或者videomimeType: 'audio/wav',recorderType: RecordRTC.StereoAudioRecorder,desiredSampRate: 16000,numberOfAudioChannels: 1, // 單聲道timeSlice: 1000,// bufferSize: 4096, // 緩存大小ondataavailable: this.sendData,});this.recorder.startRecording();}).catch(function (err) {alert('當前瀏覽器不支持開啟麥克風!');that.voiceStatus = false});},// 獲取到文件流（沒用到這個函數內容，可以忽略）sendData(blob) {return//var BB = new Blob([blob], { 'type': 'audio/wav; codecs=opus' })// var audioURL = window.URL.createObjectURL(BB)// 播放// const audio = document.createElement('audio')// audio.controls = true // 音頻是否顯示控件// audio.src = audioURL// audio.play()// 下載// let a = document.createElement("a");// a.href = audioURL;// a.download = '測試';// a.click();// // 釋放這個臨時的對象url// window.URL.revokeObjectURL(audioURL);// let file = new window.File([BB], '測試.wav')// this.file = file// console.log('錄音已停止，文件已保存---------------------', this.file);},// 結束錄音stopRecord() {console.log('stopRecord:鼠標放開------------------------------')if (this.recorder != null) {this.startLoading = truelet recorder = this.recorder// 處理停止事件recorder.stopRecording(() => {const blob = this.recorder.getBlob(); // 獲取Blob對象this.recordedBlob = URL.createObjectURL(blob);// 創建URL對象，用于<audio>標簽播放// console.log('錄音已停止，文件已保存---------------------', this.recordedBlob);var BB = new Blob([blob], { 'type': 'audio/wav; codecs=opus' })let file = new window.File([BB], '測試.wav')this.file = fileconsole.log('獲取到文件流上傳到后臺---------------------', this.file);this.uploadSubmit();});let stream = this.stream;clearInterval(this.timer1);stream.getAudioTracks().forEach(track => track.stop());}},// 上傳到后臺服務器uploadSubmit() {uploadAudio(this.file, this.main_form.hotWords).then(res => {this.resultDetails = res.data.data || {}this.main_form.result = res.data.data.result || ''this.voiceStatus = falsethis.startLoading = false}).catch(err => {this.voiceStatus = falsethis.startLoading = false})},// 獲取音量值大小getVoice() {const audioContext = new (window.AudioContext || window.webkitAudioContext)()// 將麥克風的聲音輸入這個對象const mediaStreamSource = audioContext.createMediaStreamSource(this.stream)// 創建分析節點const analyserNode = audioContext.createAnalyser()// 連接節點mediaStreamSource.connect(analyserNode)// 可以實時聽到麥克風采集的聲音// analyserNode.connect(audioContext.destination)// 獲取音量數據const dataArray = new Uint8Array(analyserNode.frequencyBinCount);function getVolume() {analyserNode.getByteFrequencyData(dataArray);let sum = 0;for (let i = 0; i < dataArray.length; i++) {sum += dataArray[i];}// 計算平均音量const averageVolume = sum / dataArray.length;return averageVolume;}// 每隔一段時間獲取一次音量this.timer1 = setInterval(() => {const volume = getVolume();console.log('音量:', Math.round(volume));// this.RMSList.value.unshift(Math.round(volume));// this.RMSList.value.pop();// 在這里可以根據需要進行相應的處理}, 1000);},
}