微信小程序录音实现功能并上传(使用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 相关文章推荐
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
详解JS函数防抖
Jun 05 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
JavaScript的Cookies
2008/01/16 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python 性能优化技巧总结
2016/11/01 Python
python实现Decorator模式实例代码
2018/02/09 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python3 flask实现文件上传功能
2020/03/20 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python的形参和实参使用方式
2019/12/24 Python
python实现逻辑回归的示例
2020/10/09 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
六一儿童节活动策划方案
2014/01/27 职场文书
英文演讲稿
2014/05/15 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs