一、思路
首选录音功能，这个功能可以使用uniapp中的API uni.getRecorderManager() 获取全局唯一的录音管理器recorderManager。这样就可以进行开始录音、暂停录音等功能，具体方法可以进入官网查看；之后在停止录音的监听事件中，可以获取到当前录音结束后，音频的临时地址，此时可以在页面中添加啊一个audio标签，把临时路径放入src中，即可播放。
二、具体实现
1.页面中添加按钮，弹出录音弹出窗
<template> <view class="container"> <view @click="showaPopup('bottom')"> 添加录音 </view> <!-- 录音弹窗弹窗 --> <uni-popup ref="audioPopup" background-color="#fff"> <view style="width: 100%;padding-top: 40rpx;display: flex;flex-wrap: wrap;justify-content: center;"> <audio :src="audioUrl" v-show="audioUrl != ''" controls name="病患说明" :author="now.nickname"></audio> <view class="audio_func"> <text style="line-height: 3;color: #ff4242;" @click="resetRecording()">重置</text> <image class="audio_img" src="/static/停止.png" mode="" @click="stopRecording" v-if="audioStatus"> </image> <image class="audio_img" src="/static/开始.png" mode="" @click="startRecording" v-else></image> <text style="line-height: 3;color: #8f8f8f;" @click="onClosea()">上传</text> </view> <text class="record_time">{{formattedDuration}}</text> </view> </uni-popup> </view> </template>
2.事件
<script> export default { data() { return { recorderManager: null, duration: 0, timer: null, audioStatus: false, audioUrl: '', reset: false, } }, methods: { startRecording() { // 获取 RecorderManager 实例 this.recorderManager = uni.getRecorderManager(); // 开始录音 this.recorderManager.start({ format: 'mp3' // 录音格式 }); // 监听录音状态变化 this.recorderManager.onStart(() => { console.log('录音开始'); this.audioStatus = true this.duration = 0; clearInterval(this.timer); this.timer = setInterval(() => { this.duration++; }, 1000); }); this.recorderManager.onStop(res => { console.log('录音停止', res.tempFilePath); if (this.reset == false) { this.audioUrl = res.tempFilePath } else { this.audioUrl = '' } this.audioStatus = false clearInterval(this.timer); }); }, // 停止 stopRecording() { this.reset = false this.duration = 0 this.recorderManager.stop(); }, // 重置 resetRecording() { this.recorderManager.stop(); this.reset = true this.audioUrl = '' this.duration = 0 }, // 打开录音弹窗 showaPopup(type) { this.type = type // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性 this.$refs.audioPopup.open(type) }, // 上传录音弹窗 onClosea() { if (this.audioUrl == '') { uni.showToast({ title: '请输传入录音', icon: 'none' }); return } this.$refs.audioPopup.close() }, }, computed: { formattedDuration() { let minutes = Math.floor(this.duration / 60); let seconds = this.duration % 60; return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; } } } </script>
这是完整的一套流程了，点击录音图标，开始录音，并计时，停止后，显示audio元素，src则为停止录音后的音频临时路径，可播放，点击重置，清除录音实例，以及临时路径，隐藏audio元素。
其中样式按需调整，大致功能就是如此，如需其他录音的方法，可前往官方文档查看，录音管理 ，希望可以帮助到大家
