制作录音功能需要用到uniapp中API uni.getRecorderManager() 获取全局唯一的录音管理器recorderManager,然后就能够开始进行录音,播放。具体方法可以去uniapp官网上查看。
代码实现:
1、在html中添加按钮、点击弹出弹窗:
javascript
<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、事件:
javascript
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