微信小程序录音实现功能并上传(使用node解析接收)


Posted in Javascript onFebruary 26, 2020

背景

我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器。小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景。

小程序端

html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音。第二个按钮只是一个播放录音的功能,用于确定录音是否成功

<!--pages/record/record.wxml-->
<button bindtap="playVoice" type="primary" disabled="{{tempFilePath === ''}}">播放录音</button>
<button type="warn" bindtouchstart="beginRecord" bindtouchend="endRecord">长按开始录音,松手停止录音</button>

js部分主要就是两个事件

// pages/record/record.js
// 两个实例声明在Page之外,方便访问
const recorderManager = wx.getRecorderManager() //这是录音功能的实例,必须的
const innerAudioContext = wx.createInnerAudioContext(); //这是播放录音功能需要的实例
Page({
 data: {
 tempFilePath: '' //存放录音文件的临时路径
 },
 // 播放录音
 playVoice: function(e) {
 innerAudioContext.onPlay(() => {
 console.log('开始播放')
 })
 innerAudioContext.onError((res) => {
 console.log(res.errMsg)
 console.log(res.errCode)
 })
 innerAudioContext.play();
 },
 // 录音
 beginRecord:function(e) {
 // 监听录音开始事件
 recorderManager.onStart(() => {
 console.log('recorder start')
 })
 // 监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。
 recorderManager.onFrameRecorded((res) => {
 const { frameBuffer } = res
 console.log('frameBuffer.byteLength', frameBuffer.byteLength)
 })
 //录音的参数
 const options = {
 duration: 60000, //录音时间,默认是60s,提前松手会触发button的bindtouchend事件,执行停止函数并上传录音文件。超过60s不松手会如何并未测试过
 sampleRate: 44100,
 numberOfChannels: 1,
 encodeBitRate: 192000,
 format: 'mp3', //录音格式,这里是mp3
 frameSize: 50 //指定帧大小,单位 KB。传入 frameSize 后,每录制指定帧大小的内容后,会回调录制的文件内容,不指定则不会回调。暂仅支持 mp3 格式。
 }
 //开始录音
 recorderManager.start(options); 
 },
 //停止录音并上传数据
 endRecord:function(e) {
 const self = this;
 //停止录音
 recorderManager.stop();
 //监听录音停止事件,执行上传录音文件函数
 recorderManager.onStop((res) => {
 console.log('recorder stop', res)
 //返回值res.tempFilePath是录音文件的临时路径 (本地路径) 
 self.setData({
 tempFilePath: res.tempFilePath
 })
 innerAudioContext.src = res.tempFilePath
 //上传录音文件
 var uploadTask = wx.uploadFile({
 //没有method,自动为POST请求
 filePath: res.tempFilePath,
 name: 'recordFile',  //这个随便填
 url: 'http://localhost:3000/record', //填写自己服务器的地址。
 header: {
 "Content-Type": "multipart/form-data" //必须是这个格式
 },
 success:(e) => {
 console.log('succeed!');
 console.log(e); 
 },
 fail: (e) => {
 console.log('failed!');
 console.log(e); 
 }
 });
 uploadTask.onProgressUpdate((e) => {
 console.log(e);
 console.log('期望上传的总字节数:' + e.totalBytesExpectedToSend);
 console.log('已经上传的字节数' + e.totalBytesSent); 
 })
 })
 }
})

到这里,小程序部分的代码就已经完成了。

node服务器端

前提:

node服务器我是用的是 express 框架,如果有不会的朋友,可以先简单了解一下express。
要后端能解析用户上传的文件,需要合适的中间件。可以参考文章末尾的讲解nodejs使用connect-multiparty实现文件上传(文件接收)后端
首先项目需要安装 express 和 connect-multiparty

npm install express

npm install connnect-multiyparty

大家学node的,上面两句不应该看不懂。我不加 --save 是因为新版的node和npm不需要加就会给你保存在package.json文件内。

//这是我的路由文件的代码片段,监听端口号3000等设置在我的另一个文件内。
//这只是代码片段,大概率跑不起来,只起一个demo的作用。如果需要完整的代码,可以留言给我。

const express = require('express');
const multiparty = require('connect-multiparty');

var router = express.Router();
var multipartMiddleware = multiparty();
router.use(multiparty({uploadDir:'./temp'})); //将接收文件的地址更改为当前目录下的temp文件夹。如果没有,则需要新建该文件夹。

// 处理录音文件
//只需要这样处理,上传的MP3文件就会保存在指定的目录下了。
router.post('/record', multipartMiddleware, (request, response) => {
 console.log('received a request');
 console.log(request.files);
 request.on('end', () => {
 response.send('通信完成');
 })
 
})

郑重提示:保存下来的是临时文件,短时间内就会自动删除,所以大家需要及时处理文件,比如写入到新文件中

这个框架已经两年没更新了,所以这个框架这不一定是好的,但是是可行的

下面看下nodejs使用connect-multiparty实现文件上传(文件接收)后端

文件上传

文件上传是服务器经常会用到的一项功能。做了几次文件上传功能,发现文件接收后端还是没那么容易。尝试过不同的中间件,折腾来折腾去,发现connect-multiparty用起来比较简单,适配nodejs版本v0.12.11。

用法

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
app.post('/upload', multipartMiddleware, function(req, resp) {
 console.log(req.body, req.files);
 // don't forget to delete all req.files when done
});

前端用multipart/form-data的形式上传数据,后端通过中间件connect-multipary接收。
注意,接收结果req.files是一个对象,包含POST上传的参数和一个临时文件,文件一般在/tmp目录下,可以将文件移动到指定位置。

var fs = require('fs');
var source = fs.createReadStream(path);
var dest = fs.createWriteStream(output);
source.pipe(dest);
source.on('end', function() { fs.unlinkSync(path);}); //delete
source.on('error', function(err) { });

参考

connect-multiparty

总结

到此这篇关于微信小程序录音实现功能并上传(使用node解析接收)的文章就介绍到这了,更多相关微信小程序录音上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue实现树形菜单效果
Mar 19 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
深入了解query和params的使用区别
Jun 24 Javascript
BootStrap前端框架使用方法详解
Feb 26 #Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 #Javascript
javascript 数组精简技巧小结
Feb 26 #Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 #Javascript
jquery实现直播视频弹幕效果
Feb 25 #jQuery
JavaScript实现打砖块游戏
Feb 25 #Javascript
深入理解Antd-Select组件的用法
Feb 25 #Javascript
You might like
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP7新增函数
2021/03/09 PHP
js数组的操作详解
2013/03/27 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
深入理解vue Render函数
2017/07/19 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
简单实现python进度条脚本
2017/12/18 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python如何求100以内的素数
2020/05/27 Python
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
《老王》教学反思
2014/02/23 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫