微信小程序录音实现功能并上传(使用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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
微信小程序实现底部导航
Nov 05 Javascript
js动态获取时间的方法分析
Aug 02 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扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
python多线程http下载实现示例
2013/12/30 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python之array赋值技巧分享
2019/11/28 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python celery原理及运行流程解析
2020/06/13 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
局域网标准
2016/09/10 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
新闻传播专业求职信
2014/07/22 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
详解Python flask的前后端交互
2022/03/31 Python