手機實現錄音功能，安卓和蘋果都可。功能，點擊開始錄制錄音后，隨時可以停止錄音，如果不點擊停止最多錄制15秒。
頁面結構
<!--音頻-->
<div class="audio-box"><audio id="audioPlayer"controlscontrolslist="noplaybackrate nodownload"preload="auto"></audio><i @click="deleteAudio" class="el-icon-delete"></i>
</div><!--錄制按鈕-->
<div class="out-ring"><!--未錄制狀態--><div @click="startRecording" v-show="!isRecording" class="in-ring"><img src="@/assets/img/audio.png" alt="" style="height:48px;"></div><!--錄制中--><div v-show="isRecording" @click="stopClick" class="in-ring"><div class="red-square"></div></div>
</div>
<!--錄制提示-->
<div v-show="!isRecording" class="tip">點擊錄制音頻</div>
函數
/*** 開始錄音*/
async startRecording() {let that = thistry {const stream = await navigator.mediaDevices.getUserMedia({audio: true});that.mediaRecorder = new MediaRecorder(stream);that.mediaRecorder.ondataavailable = e => {that.audioChunks.push(e.data);};that.mediaRecorder.start();that.isRecording = true;that.timer = setTimeout(that.stopRecording, 15000);} catch (err) {that.$toast('錄音失敗')}
},/*** 結束錄音*/
stopRecording() {this.mediaRecorder.stop();this.mediaRecorder.onstop = () => {let audioBlob = new Blob(this.audioChunks, {'type': 'audio/mp3; codecs=opus'});let soundUrl = URL.createObjectURL(audioBlob);//生成file對象let file = new File([audioBlob], 'yinpin.mp3', {type: 'application/json',lastModified: Date.now()})//頁面播放錄音this.showAudio(soundUrl)this.$store.commit('SET_AUDIO_FILE', file)this.$store.commit('SET_AUDIO_URL', soundUrl)// 重置音頻塊數組以備下次錄音this.audioChunks = [];};this.isRecording = false;this.$toast('錄音結束')
},/*** 停止錄音點擊事件*/
stopClick() {clearTimeout(this.timer);this.timer = nullthis.stopRecording()
},/*** 展示音頻*/
showAudio(Url) {let audio = document.getElementById('audioPlayer');audio.src = Url;audio.load();
},/*** 刪除音頻*/
deleteAudio() {this.showAudio('');this.audioChunks = [];this.$store.commit('SET_AUDIO_FILE', null)this.$store.commit('SET_AUDIO_URL', null)
}
注意，在項目尚未發布時，也就是前端在手機上測試錄音功能時，會出現navigator.mediaDevices未定義的情況，可以百度搜索，有三種解決辦法。我的解決辦法是：使用內網穿透，生成一個公網ip，就可以解決這個問題。具體教程可以參考這邊文章：https://blog.csdn.net/qq_42978230/article/details/113618902。使用時，注意將本地地址改為localhost,文章中未提及這個。
