小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收)
发布时间:2020-09-04 11:59:06
来源:脚本之家
阅读:97
作者:weixin_43188227
背景
我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器。小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景。
小程序端
html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音。第二个按钮只是一个播放录音的功能,用于确定录音是否成功
播放录音
长按开始录音,松手停止录音
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解析接收)的文章就介绍到这了,更多相关微信小程序录音上传内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云!
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)相关推荐
- 微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
- 小程序开发工具绑定服务器,微信小程序绑定到第三方平台流程
微信小程序授权绑定到第三方开放平台的过程,官方文档 写的不太清晰,在这里梳理罗列一下. 1 服务器准备,开通开放平台 消息校验token:htqa**************** 消息加密Key:NC ...
- 小程序用别人的服务器,微信小程序可以用自己的服务器么
可以. 操作步骤如下: 1.首先用小程序账号登陆微信公众平台.然后点击左下角的"设置",之后点击右侧上部 的"开发设置",进入开发设置页面. 2.在开发设置页面 ...
- 小程序如何访问ssm服务器,微信小程序和ssm交互
后端用的是ssm,具体就不讲怎么配置了. 前端用小程序,第一次做这个. 在user.js中 const USER_URL = 'http://localhost:81/showAllUser'; le ...
- 微信小程序表单数据提交服务器,微信小程序防走弯路之:提交表单获取表单数据...
1.简历一个简单的表单,点击'提交'按钮时,提交表单内容 2. 以姓名框为例 .wxml #调用formSubmit函数 提交 class为 ...
- 微信小程序传递数组给服务器,微信小程序页面间的数组如何传递
// A页面 // 数组.对象都需要stringify var listData = JSON.stringify(that.data.listData) var taskArray = JSON.s ...
- 微信小程序表单数据提交服务器,微信小程序-form表单提交
效果 image html代码 是否公开信息 手机号 密码 性别 男 女 提交 重置 {{warn ? warn : "是否公开信息:"+isPub+",手机号:&quo ...
- 微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器 微信小程序中实现上传视频的开发代码 易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
- 制作esp32-cam拍照上传,微信小程序照片显示的监控小车
前期配件准备 ESP32-CAM开发环境配置 程序下载 连接小车 控制台查看图片 微信小程序的开发 1.前期配件准备 小车套件(网上购买即可,较为方便的选择) ESP32-CAM (推荐安信可,外加T ...
最新文章
- “移花接木”偷换广告:HTTPS劫匪木马每天打劫200万次网络访问
- Linux系统管理员修炼三层次
- 操作系统及编程语言历史以及shell命令
- LabVIEW设计模式系列——移位寄存器
- mysql tableveiw与表格,javafx将数据库内容输出到tableview表格
- 【JavaScript】百度地图API快速上手
- 用Map构造选择题题库(洛谷P5601题题解,Java语言描述)
- 获取进程或线程的ID以及句柄信息
- ceph docker mysql_使用Docker部署单机版Ceph
- 吴恩达深度学习 —— 3.2 神经网络表示
- git中clone出来项目,导入到eclipse并运行web项目
- classcastexception异常_Java程序员必备:异常的十个关键知识点
- Java 序列化漏洞多到修不完
- mysql富文本_mysql模糊查询富文本的文本内容
- GameCenter首次登录很慢的解决方案
- h264和aac 封装成flv
- bam文件读取_SAM/BAM 格式文件内容解析
- Dockerfile镜像创建
- drop 很慢 物化视图_clickhouse 物化视图的踩坑记录
- 人力资源管理案例选读【3】