Vue+ElementUi實現錄音播放上傳及處理getUserMedia報錯問題

1.Vue安裝插件

npm install --registry=https://registry.npmmirror.com

2.Vue頁面使用

<template><div class="app-container"><!-- header --><el-header class="procedureHeader" style="height: 20px;"><el-divider content-position="left"><h3><el-link type="primary" style="background-color: rgba(255, 255, 255, 0.5);">語音識別</el-link></h3></el-divider></el-header><el-row><!-- 左側語音錄制區域--><el-col :span="12"><div class="asr-left"><el-input v-model="asrName" placeholder="請輸入內容" size="small"style="width: 192px;margin-left: 20px;margin-top: 20px;"></el-input><el-input type="textarea" :rows="34" placeholder="請開始錄音" v-model="asrData" size="small" :readonly="true" style="margin-left: 20px;margin-top: 20px;width: 94%;"></el-input><div style="display: -webkit-box;"><div style="margin-left: 18px;margin-top: 20px;margin-bottom: 10px;width: 82%;"><span style="color: #303133;">時長：</span><span style="color: #303133;">{{convertSecondsToHMS(recorder.duration.toFixed(4))}}</span><span title="開始錄音" class="asr-btn" style="margin-left: 67%;" v-if="startRecord" @click="handleStartRecord"><i class="el-icon-microphone"></i></span><span title="錄音中" class="asr-btn" style="color: #1890ff;margin-left: 67%;"  v-if="recordIng" @click="handleRecordIng"><i class="el-icon-mic"></i></span><span title="播放錄音" class="asr-btn" v-if="playRecord" @click="handlePlayRecord"><i class="el-icon-video-play"></i></span><span title="播放中" class="asr-btn" v-if="playRecordIng" @click="handlePlayRecordIng"><i class="el-icon-video-pause"></i></span><span title="結束錄音" class="asr-btn" style="color: red;" @click="handleStopRecord"><i class="el-icon-switch-button" style="font-weight: 600;"></i></span></div><el-button type="primary" size="mini" style="margin-top: 17px;" @click="handleRecord">開始識別</el-button></div></div></el-col><!-- 右側語音識別結果展示區域 --><el-col :span="12" class="asr-right"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" style="margin-top: 20px;"><el-form-item label="標題" prop="title"><el-inputv-model="queryParams.title"placeholder="請輸入標題"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-table v-loading="loading" :data="asrList" height="675"><el-table-column label="名稱" align="center" prop="title" width="340" /><el-table-column label="創建時間" align="center" prop="createTime" /><el-table-column label="狀態" align="center" width="100" prop="flag" :formatter="flagFormat"/><el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"v-if="scope.row.flag == 2"@click="handleOpen(scope.row)">查看</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 查看語音識別信息彈窗 --><el-dialog :title="title" :visible.sync="open" width="600px" append-to-body><el-input type="textarea" :rows="34" placeholder="" v-model="asrCallbackData" size="small" :readonly="true" ></el-input></el-dialog></el-col></el-row></div>
</template>
<script>
import { listAsr,upload,getAsr } from "@/api/mam/asr";
import Recorder from 'js-audio-recorder';
let recorder = new Recorder();export default {name: "asr",data() {return {recorder: new Recorder({sampleBits: 16, // 采樣位數，支持 8 或 16，默認是16sampleRate: 16000, // 采樣率，支持 11025、16000、22050、24000、44100、48000，根據瀏覽器默認值，我的chrome是48000numChannels: 1, // 聲道，支持 1 或 2， 默認是1compiling: false  //(0.x版本中生效,1.x增加中) 是否邊錄邊轉換，默認是false}),// 語音識別任務名稱asrName: "",// 語音識別結果asrData: "",// 錄音時長recordTime: "00:00:00",// 開始錄音startRecord: true,// 錄音中recordIng: false,// 播放錄音playRecord: true,// 播放中playRecordIng: false,// 倒計時播放countdownTimer: null,// 任務輪詢定時器taskTimer: null,// 總條數total: 0,// 語音識別表格數據asrList: [],// 遮罩層loading: true,// 查詢參數queryParams: {pageNum: 1,pageSize: 20,taskid: null,assetid: null,fileid: null,title: null,content: null,createtime: null,creator: null,flag: null},// 彈出層標題title: "",// 是否顯示彈出層open: false,// 彈出層數據asrCallbackData: ""}},created() {this.asrName= this.getNowTime();      this.getList();},methods: {/** 查詢語音識別列表 */getList() {this.loading = true;listAsr(this.queryParams).then(response => {this.asrList = response.rows;this.total = response.total;this.loading = false;});},// 表單重置reset() {this.form = {id: null,taskid: null,assetid: null,fileid: null,title: null,content: null,createtime: null,creator: null,flag: null};this.resetForm("form");},/** 搜索按鈕操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按鈕操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},//任務狀態格式化flagFormat(row, column){if(row.flag == 0){return "未開始";}else if(row.flag == 1){return "進行中";}else if(row.flag == 2){return "已完成";}else if(row.flag == 3){return "出錯";}else{return "未知狀態";}},// 打開彈出層handleOpen(row){this.title = row.title;this.open = true;this.asrCallbackData = row.content;},// 開始錄音 handleStartRecord(){Recorder.getPermission().then(() => {if(this.asrData == "正在轉寫中..."){this.$message.warning('正在轉寫中...');}else{//開始錄音時關閉錄音播放this.playRecordIng = false;this.playRecord = true;this.recorder.pausePlay();this.recorder.start();; // 開始錄音this.startRecord = false;this.recordIng = true;this.asrData = "信息采集中..."; }      },(error) => {this.$message({message: "請先允許該網頁使用麥克風",type: "info",});console.log(`${error.name} : ${error.message}`);});},// 錄音中handleRecordIng(){// this.recordIng = false;// this.startRecord = true;},// 播放錄音handlePlayRecord(){if(this.recordIng ){this.$message.warning('信息采集中，請先結束錄音后，再播放錄音！');}else{if(this.recorder.size > 0){this.playRecord = false;this.playRecordIng = true;this.recorder.play();this.asrData = "正在播放采集信息...";//倒計時播放自動關閉this.countdown(this.recorder.duration);}else{this.$message.warning('請先錄制音頻!');}}},// 播放中handlePlayRecordIng(){this.playRecordIng = false;this.playRecord = true;this.recorder.pausePlay();},// 結束錄音handleStopRecord(){if(this.asrData == "正在轉寫中..."){this.$message.warning('正在轉寫中...');}else{this.recordIng = false;this.startRecord = true;this.asrData = "信息采集結束...";this.recorder.stop();}},// 開始識別handleRecord(){//關閉錄音this.recordIng = false;this.startRecord = true;this.recorder.stop();//關閉錄音播放this.playRecordIng = false;this.playRecord = true;this.recorder.pausePlay();//識別console.log(this.recorder.size);if(this.recorder.size > 0){// 獲取 WAV 數據(Blob)let blob =this.recorder.getWAVBlob()console.log(blob);let formData = new FormData()formData.append('file', blob)formData.append("asrTitle",this.asrName)upload(formData).then(response => {if(response.code == 200){this.asrData = "正在轉寫中...";//銷毀實例this.recorder.destroy();this.msgSuccess('任務創建成功');this.asrName= this.getNowTime();this.taskPolling(response.msg);}});}else{this.$message.warning('請先錄制音頻!');}    },// 任務輪詢taskPolling(id){this.taskTimer = setInterval(() => {//任務列表listAsr(this.queryParams).then(response => {this.asrList = response.rows;this.total = response.total;});//列表詳情getAsr(id).then(response => {if(response.code == 200){if(response.data.flag == 2){this.asrData = response.data.content;clearInterval(this.taskTimer);this.msgSuccess('任務已完成');}}});}, 1000);},// 獲取當前時間getNowTime() {const now = new Date();const year = now.getFullYear();const month = this.padNumber(now.getMonth() + 1);const day = this.padNumber(now.getDate());const hours = this.padNumber(now.getHours());const minutes = this.padNumber(now.getMinutes());const seconds = this.padNumber(now.getSeconds());return "語音識別-"+`${year}${month}${day}${hours}${minutes}${seconds}`;},padNumber(num) {return num < 10 ? '0' + num : num;},//秒數轉為時分秒convertSecondsToHMS(seconds) {var date = new Date(null);date.setSeconds(seconds);var timeString = date.toISOString().substr(11, 8);return timeString;},//倒計時播放countdown(currentSeconds) {this.countdownTimer = setInterval(() => {currentSeconds--; // 每次間隔1秒，將秒數減少1if (currentSeconds < 0) {clearInterval(this.countdownTimer); // 當秒數小于等于0時清除定時器// console.log("倒計時結束");this.playRecordIng = false;this.playRecord = true;this.asrData = "采集信息播放結束...";} else {// console.log(`還有 ${seconds} 秒`);}}, 1000); // 設置定時器間隔為1秒（1000毫秒）}}
}
</script>
<style scoped lang="less">
/* 左側語音錄制區域 */
.asr-left {/*border: 1px solid #ebebeb;*/margin-left: 20px;
}/* header */
::v-deep .el-divider__text {background-color: unset;
}/* 右側語音識別結果展示區域 */
.asr-right {}
/* 按鈕 */
.asr-btn {cursor: pointer;margin-left: 15px;font-size: 20px;
}
</style>