uni-app小程序录音上传的解决方案

相关学习推荐：微信小程序开发
能力依赖
recordermanager 全局唯一的录音管理器
录音功能的要求与限制与当前页面其他音频播放/录音功能互斥是否在录音中状态显示结束/不需要录音时，回收recordermanager对象材料
可以/结束 录音
录音中
codeing（结果代码直接看最后）构造一个简单的dom结构
<image @click="recordaction" :src="recordimg" class="record"/>复制代码先实现小程序的录音功能
import iconrecord from '../../static/images/icon_record.png'import iconrecording from '../../static/images/icon_recording.png'// ...data() { recordimg: iconrecord, // 录音按钮的图标 rm: null, // 录音管理器},// ...mounted() { if (this.rm === null) { // 录音管理器如果没有初始化就先初始化 this.rm = uni.getrecordermanager() } // 绑定回调方法 this.rm.onstart((e) => this.onstart(e)) this.rm.onpause((e) => this.onpause(e)) this.rm.onresume((e) => this.onresume(e)) this.rm.oninterruptionbegin((e) => this.oninterruptionbegin(e)) this.rm.oninterruptionend((e) => this.oninterruptionend(e)) this.rm.onerror((e) => this.onerror(e))},// ...methods: { // ... recordaction() { if (this.recordimg === iconrecord) { // 设置格式为mp3，最长60s，采样率22050 this.rm.start({ duration: 600000, format: 'mp3', samplerate: 22050, }) // 开始录音后绑定停止录音的回调方法 this.rm.onstop((e) => this.onstop(e)) } else if (this.recordimg === iconrecording) { this.rm.stop() }, }, onstart(e) { console.log('开始录音', this.question, this.subquesindex) this.recordimg = iconrecording console.log(e) }, onpause(e) { console.log(e) afteraudiorecord() }, onresume(e) { console.log(e) }, onstop(e) { console.log(e) this.recordimg = iconrecord // 结束录音之后上传录音 this.uploadmp3action(e) }, oninterruptionbegin(e) { console.log(e) }, oninterruptionend(e) { console.log(e) }, onerror(e) { console.log(e) }, uploadmp3action(e) { // todo uploadmp3 },},复制代码只能同时有一个录音，与音频播放互斥globaldata中增加两个属性audioplaying，audiorecording
// src/app.vueexport default { globaldata: { // 保证全局只有一个音频处于播放状态且录音与播放操作互斥 audioplaying: false, audiorecording: false, }, // ...}, 复制代码util中增加判断方法
// src/lib/util.js// 结束录音之后释放录音能力export function afteraudiorecord() { getapp().globaldata.audiorecording = false}// 结束音频播放之后释放音频播放能力export function afteraudioplay() { getapp().globaldata.audioplaying = false}/ * 判断是否可以录音或者播放 * @param {string} type play | record */export function beforeaudiorecordorplay(type) { const audioplaying = getapp().globaldata.audioplaying const audiorecording = getapp().globaldata.audiorecording if (audioplaying ||audiorecording) { uni.showtoast({ title: audioplaying ? '请先暂停其他音频播放' : '请先结束其他录音', icon: 'none' }) return false } else { if (type === 'play') { getapp().globaldata.audioplaying = true } else if (type === 'record') { getapp().globaldata.audiorecording = true } else { throw new error('type error', type) } return true }}复制代码改造原有recordaction方法
import { beforeaudiorecordorplay, afteraudiorecord} from '../../lib/utils';// ...recordaction() {- if (this.recordimg === iconrecord) { if (this.recordimg === iconrecord && beforeaudiorecordorplay('record')) { // 设置格式为mp3，最长60s，采样率22050 this.rm.start({ duration: 600000, format: 'mp3', samplerate: 22050, }) // 开始录音后绑定停止录音的回调方法 this.rm.onstop((e) => this.onstop(e)) } else if (this.recordimg === iconrecording) { this.rm.stop() afteraudiorecord() },},复制代码这样就避免了多次录音
小程序录音上传
补全我们的uploadmp3action方法，我们使用uni-app的uni.uploadfile()方法来上传录音文件
uploadmp3action(e) { const filepath = e.tempfilepath const option = { url: 'xxx', filepath, header, formdata: { filepath }, name: 'audio', } uni.showloading({ title: '录音上传中...' }) await uni.uploadfile(option) uni.hideloading()}复制代码最后在页面卸载的时候回收recordermanager对象
beforedestroy() { this.rm = null}复制代码打完收工~
了解更多其他精品文章，敬请关注uni-app

需要技术配置一下解析扩展名现在出现错误祥见附件
电脑没插U盘却显示U盘图标怎么回事
电信云服务器备案
微商 做到底还是难逃洗牌的命运
怎么用邮件营销
这网站都没在西部数码为什么会误报非法信息
ITU-T、MPEG-4到H.264 视频会议系统三大标准发展史
css3中过渡的用法是什么