小程序采集录音并上传到后台

当我们需要开发一款小程序，在其中加入录音的功能并同时上传到后台，需要完成以下几个步骤：

小程序界面设计和开发

首先需要在小程序中设计并开发一个录音的页面，添加按钮用于开始和停止录音，同时显示录音的进度条和录音时长等信息。可以使用小程序提供的组件和 API 实现该功能。

视频录音功能实现

在小程序中使用 wx.startRecord() 方法开始录音，使用 wx.stopRecord() 方法停止录音，并使用 wx.getRecorderManager() API 控制录音时长和录音文件的存储位置。

录音文件上传到后台

上传录音文件需要借助后台的接口，可使用 wx.uploadFile() API 将录音文件上传到后台服务器。接口需要提供上传文件的路径，服务器接口地址，用户 Token 等参数。

以下是两个示例说明：

示例一：小程序录音上传到七牛云

1.小程序前端代码

<button bindtap="startRecord">开始录音</button>
<button bindtap="stopRecord">停止录音</button>
<progress active wx:if="{{isRecording}}" bindactiveend="onRecordEnd" percent="{{recordPercent}}">
</progress>

在小程序页面中，添加两个按钮用于开始和停止录音，以及进度条。使用 wx.startRecord() 方法开始录音，使用 wx.stopRecord() 方法停止录音，控制录音时长和录音文件的存储位置。

startRecord() {
    const recorderManager = wx.getRecorderManager()
    recorderManager.start({
        format: 'mp3',
        duration: 60000
    })
    recorderManager.onStart(() => {
        console.log('start recording')
        this.setData({
            isRecording: true
        })
        this.drawCircleTimer()
    })
},
stopRecord() {
    this.clearCircleTimer()
    const recorderManager = wx.getRecorderManager()
    recorderManager.stop()
    recorderManager.onStop((res) => {
        console.log('stop recording', res)
        this.setData({
            isRecording: false,
            recordTime: res.duration / 1000,
            src: res.tempFilePath
        })
        this.uploadRecord(res.tempFilePath)
    })
},

在小程序页面中，定义两个方法 startRecord() 和 stopRecord()，并分别用于实现开始录音和停止录音的功能。在 startRecord() 方法中创建 recorderManager 实例，并使用 recorderManager.start() 方法启动录音，设置格式为 mp3，录音时长为60秒。启动成功后，记录当前正在录音，并用 drawCircleTimer() 方法开始绘制录音进度条。在录音停止时，停止绘制录音进度条；使用 recorderManager.stop() 方法停止录音，并在录音停止后回调 recorderManager.onStop() 方法，记录录音时长、录音文件路径及状态，将录音文件上传到服务器。

uploadRecord(filePath) {
    wx.uploadFile({
        url: 'https://upload-z1.qiniup.com/',
        filePath: filePath,
        name: 'file',
        formData: {
            key: "audio/record_" + (new Date()).getTime() + ".mp3",
            token: this.data.qiniuToken
        },
        success(res) {
            console.log('upload success', res)
        },
        fail(res) {
            console.log('upload fail', res)
        }
    })
}

在小程序页面中，定义了上传录音文件 uploadRecord() 方法，并使用 wx.uploadFile() API 将录音文件上传到七牛云服务器，配置上传参数，并设置回调方法，记录上传成功或失败后的状态和信息。

2.后台代码

后台代码需要实现生成七牛云 Token 和上传接口。第一步，后台代码需要生成一个七牛云Token，用于生成上传凭证。可使用七牛云提供的 SDK，或者通过网络API获取token。第二步，开发上传接口，接收从前端发送过来的录音文件，使用七牛云 SDK 对文件进行上传操作。

示例二：小程序录音上传到腾讯云

1.小程序前端代码

<button bindtap="startRecord">开始录音</button>
<button bindtap="stopRecord">停止录音</button>
<progress active wx:if="{{isRecording}}" bindactiveend="onRecordEnd" percent="{{recordPercent}}">
</progress>

startRecord() {
    const recorderManager = wx.getRecorderManager()
    recorderManager.start({
        format: 'mp3',
        duration: 60000
    })
    recorderManager.onStart(() => {
        console.log('start recording')
        this.setData({
            isRecording: true
        })
        this.drawCircleTimer()
    })
},
stopRecord() {
    this.clearCircleTimer()
    const recorderManager = wx.getRecorderManager()
    recorderManager.stop()
    recorderManager.onStop((res) => {
        console.log('stop recording', res)
        this.setData({
            isRecording: false,
            recordTime: res.duration / 1000,
            src: res.tempFilePath
        })
        this.uploadRecord(res.tempFilePath)
    })
},

uploadRecord(filePath) {
    var that=this;
    wx.uploadFile({
        url: 'http://api.exapmle.com/upload',
        filePath: filePath,
        name: 'file',
        formData: {
            business_code:that.data.business_code,
            uid: that.data.uid
        },
        success(res) {
            console.log('upload success', res)
        },
        fail(res) {
           console.log('upload fail', res)
        }
    })
}

在小程序页面中，定义了上传录音文件 uploadRecord() 方法，并使用 wx.uploadFile() API 将录音文件上传到腾讯云服务器，配置上传参数，并设置回调方法，记录上传成功或失败后的状态和信息。

2.后台代码

后台代码需要实现生成腾讯云 CosToken 和上传接口。第一步，后台代码需要生成一个腾讯云 COS Token，用于生成上传凭证。可使用腾讯云提供的 SDK，或者通过网络API获取 token 。第二步，开发上传接口，接收从前端发送过来的录音文件，使用腾讯云 SDK 对文件进行上传操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：小程序采集录音并上传到后台 - Python技术站

小程序采集录音并上传到后台

示例一：小程序录音上传到七牛云

示例二：小程序录音上传到腾讯云

相关文章