微信小程序录音实现功能并上传(使用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 string 扩展库代码
Apr 09 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
纯javascript版日历控件
Nov 24 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
linux iconv方法的使用
2011/10/01 PHP
如何在php中正确的使用json
2013/08/06 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php生成图片验证码的方法
2016/04/15 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python list多级排序知识点总结
2019/10/23 Python
python datetime处理时间小结
2020/04/16 Python
python怎么对数字进行过滤
2020/07/05 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
博士生求职信
2014/07/06 职场文书
平安工地汇报材料
2014/08/19 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
六一儿童节标语
2014/10/08 职场文书
幼儿园小班班务总结
2015/08/03 职场文书