微信小程序调用wx.getRecorderManager实现实时录音

2021-06-29 09:57 微信小程序 101 梁俊威

在开发微信小程序的过程中,一般情况下,功能型的小程序使用录音的几率会很高,微信小程序调用wx.getRecorderManager实现实时录音,废话不多说,直接上码!

JS文件

const app = getApp();
// 将录音器设置为常量
const record = wx.getRecorderManager();
Page({
    data: {
        recording: 0, // 是否正在录音
        recordPath: null, //录音后的存储地址
    },
    // 开始录音
    startRecord: function () {
        var that = this;
        // 判断当前是否有录音,如有录音将直接覆盖
        if (this.data.recordPath) {
            wx.showModal({
                title: "系统提示",
                content: "您将再次录制语音,录制完成后将会覆盖之前的语音",
                success: function (res) {
                    if (res.confirm) {
                        // 开始录音
                        that.recording();
                        return;
                    }
                }
            })
        } else {
            // 开始录音
            that.recording();
        }
    },
    recording: function () {
        record.start();
        var that = this;
        // 设置时间,当录音停止时(标记1)
        record.onStop(function (res){
            wx.showLoading();
            // 获取到录音路径
            var tempFilePath = res.tempFilePath;
            
            // 我一般做小程序时,录音会直接上传至服务器,当然你可以执行你自己的逻辑代码
            wx.uploadFile({
                url: '你的上传接口',// 服务端的接口我就不过多讲解了,大同小异
                filePath: tempFilePath,
                name: 'record',
                formData: {
                    'openid': app.globalData.openid
                },
                dataType: "json",
                header: {
                    "Content-Type": "application/json"
                },
                success(result) {
                    var resultData = JSON.parse(result.data);
                    // 上传成功
                    if (resultData.code) {
                        // 执行你的逻辑操作
                        
                        that.setData({
                            recordPath: resultData.data.path
                        })
                    } else {
                        wx.showModal({
                            title: "系统提示",
                            content: resultData.msg,
                            confirmText: "确认",
                            showCancel: false
                        });
                        return;
                    }
                    wx.hideLoading();
                }
            })
        });
        this.setData({
            recording: 1
        })
    },
    // 停止录音
    stopRecord: function () {
        record.stop();
        this.setData({
            recording: 0
        })
    },
})

我们可以看到“标注1”的地方,我对其使用了一个监听执行事件,而一般使用wx.getRecorderManager进行录音时,有多个监听事件可以使用,例如:

具体可以参考:https://developers.weixin.qq.com/miniprogram/dev/api/media/recorder/RecorderManager.html

若无特殊说明,本站点所有内容均为原创,转载请说明出处!

原文链接:https://www.ljwei.com.cn/read/309.html

QQ客服

QQ客服

微信客服

微信客服

微信客服二维码
意见反馈

意见反馈

一键置顶