制作录音功能需要用到uniapp中API uni.getRecorderManager() 获取全局唯一的录音管理器recorderManager,然后就能够开始进行录音,播放。具体方法可以去uniapp官网上查看。
代码实现:
1、在html中添加按钮、点击弹出弹窗:
<view class=""style="width: 50%;display: flex;justify-content: center;align-items: center;font-size: 20px;height:60px;"@click="showaPopup('bottom')">添加录音</view>
<!-- 录音弹窗弹窗 --><wd-popup ref="audioPopup" background-color="#fff" v-model="show" position="bottom"><view style="width: 100%;padding-top: 40rpx;display: flex;flex-wrap: wrap;justify-content: center;padding-bottom: 20px;"><audio :src="audioUrl" v-show="audioUrl != ''" controls name="病患说明"></audio><view class="audio_func" style="width: 100%;text-align: center;"><view class="" style="height: 80px;line-height: 80px;display: flex;justify-content: center;align-items: center;"><uv-icon name="pause-circle" color="#2979ff" size="56" @click="stopRecording"v-if="audioStatus"></uv-icon><uv-icon name="play-circle" color="#2979ff" size="56" @click="startRecording" v-else></uv-icon></view><text class="record_time"style="width: 50px;height: 30px;line-height: 30px;">{{formattedDuration}}</text><view class=""style="width: 80%;margin-left: 10%;display: flex;justify-content: space-between;height: 40px;align-items: center;"><!-- <view style="line-height: 3;color: #ff4242;width: 60px;" @click="resetRecording()">重置</view> --><uv-button type="error" text="重置" @click="resetRecording()"></uv-button><uv-button type="primary" text="上传" @click="onClosea()"></uv-button><!-- <view style="line-height: 3;color: #8f8f8f;width: 60px;" @click="onClosea()">上传</view> --></view></view></view></wd-popup>
这里用到的组件是Wot Design uni
2、事件:
const recorderManager = ref(null);const duration = ref(0);// 音频时间const timer = ref(null);// 状态const audioStatus = ref(false);// 音频地址const audioUrl = ref("");// 重置const reset = ref(false);// 打开录音弹窗const show = ref(false)const showaPopup = (type) => {show.value = true}// 上传录音弹窗const onClosea = () => {if (audioUrl.value == '') {uni.showToast({title: '请输传入录音',icon: 'none'});return}show.value = false}// 监听录音状态变化 const handleStart = () => {console.log('录音开始');audioStatus.value = true;duration.value = 0;if (timer.value) clearInterval(timer.value);timer.value = setInterval(() => {duration.value++;}, 1000);};// 监听录音停止 const handleStop = (res) => {console.log('录音停止', res.tempFilePath);if (!reset.value) {audioUrl.value = res.tempFilePath;} else {audioUrl.value = '';}audioStatus.value = false;if (timer.value) clearInterval(timer.value);};// 开始录音 const startRecording = () => {recorderManager.value = uni.getRecorderManager();recorderManager.value.start({format: 'mp3'});recorderManager.value.onStart(handleStart);recorderManager.value.onStop(handleStop);};// 停止录音 const stopRecording = () => {reset.value = false;duration.value = 0;if (recorderManager.value) recorderManager.value.stop();};// 重置录音 const resetRecording = () => {if (recorderManager.value) recorderManager.value.stop();reset.value = true;audioUrl.value = '';duration.value = 0;};// 格式化录音时长 const formattedDuration = computed(() => {let minutes = Math.floor(duration.value / 60);let seconds = duration.value % 60;return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;});
这里使用的语法主要是vue3的,主要流程为点击添加音频弹出弹窗,然后点击开始即可开始录音,点击重置将之前的录音地址删除,并清除路由实例。
拜拜ヾ(•ω•`)o