SpringBoot开发案例之微信小程序录音上传
时间:2022-05-06
本文章向大家介绍SpringBoot开发案例之微信小程序录音上传,主要内容包括前言、微信端、上传服务、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前言
书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原始录音、标准录音以及评分信息进行存储,最终呈现给学生并用于复看以及复读。
微信端
index.wxml:
<button bindtap="start" class='btn'>开始录音</button>
<button bindtap="pause" class='btn'>暂停录音</button>
<button bindtap="stop" class='btn'>停止录音</button>
<button bindtap="play" class='btn'>播放录音</button>
<button bindtap="upload" class='btn'>上传录音</button>
index.wxss:
.btn{
margin-top: 10rpx;
}
index.js:
//录音管理
const recorderManager = wx.getRecorderManager()
//音频组件控制
const innerAudioContext = wx.createInnerAudioContext()
var tempFilePath;
Page({
data: {
},
//开始录音的时候
start: function () {
const options = {
duration: 10000,//指定录音的时长,单位 ms
sampleRate: 16000,//采样率
numberOfChannels: 1,//录音通道数
encodeBitRate: 96000,//编码码率
format: 'mp3',//音频格式,有效值 aac/mp3
frameSize: 50,//指定帧大小,单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start')
});
//错误回调
recorderManager.onError((res) => {
console.log(res);
})
},
//暂停录音
pause: function () {
recorderManager.onPause();
console.log('暂停录音')
},
//停止录音
stop: function () {
recorderManager.stop();
recorderManager.onStop((res) => {
this.tempFilePath = res.tempFilePath;
console.log('停止录音', res.tempFilePath)
const { tempFilePath } = res
})
},
//播放声音
play: function () {
innerAudioContext.autoplay = true
innerAudioContext.src = this.tempFilePath,
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
},
//上传录音
upload:function(){
wx.uploadFile({
url: "https://xxx.com/fileUpload",//演示域名、自行配置
filePath: this.tempFilePath,
name: 'file',
header: {
"Content-Type": "multipart/form-data"
},
formData:
{
userId: 12345678 //附加信息为用户ID
},
success: function (res) {
console.log(res);
wx.showToast({
title: '上传成功',
icon: 'success',
duration: 2000
})
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
}
})
},
onLoad: function () {
},
})
上传服务
/**
* 口语测试
* 创建者 柒
* 创建时间 2018年3月13日
*/
@Api(tags ="口语测试接口")
@RestController
@RequestMapping("/test")
public class TestController {
private final static Logger LOGGER = LoggerFactory.getLogger(WechatController.class);
@Value("${web.upload.path}")
private String uploadPath;
@ApiOperation(value="上传文件(小程序)")
@PostMapping("/fileUpload")
public String upload(HttpServletRequest request, @RequestParam("file")MultipartFile[] files){
LOGGER.info("上传测试");
//多文件上传
if(files!=null && files.length>=1) {
BufferedOutputStream bw = null;
try {
String fileName = files[0].getOriginalFilename();
//判断是否有文件(实际生产中要判断是否是音频文件)
if(StringUtils.isNoneBlank(fileName)) {
//创建输出文件对象
File outFile = new File(uploadPath + UUID.randomUUID().toString()+ FileUtil.getFileType(fileName));
//拷贝文件到输出文件对象
FileUtils.copyInputStreamToFile(files[0].getInputStream(), outFile);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if(bw!=null) {bw.close();}
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "success";
}
}
- js获取url中?后的参数,修复移动版无法切换到电脑版的BUG
- nginx配置文件参数详解
- LVS中Windows作为真实主机(RealServer)时的设置方法
- 菜鸟教程:Ngnix安装详解
- 教你如何去掉友荐和无觅的隐藏外链和版权链接
- 重置多说配置后的问题,这是不让我从良的节奏啊(附禁用谷歌在线字体的方法)!
- 10个超有趣的Linux命令
- 张戈博客惊现WordPress恶意代码,各位WP博主要注意下了!
- 分享一个多说头像的动态酷炫CSS样式
- 在Linux中发现IP地址冲突的方法
- 教你如何查看Linux的CPU负载
- 想打造一个神经网络,自动给黑白照片上色?这儿有一份超详细教程
- WP_Widget_PostViews has a deprecated constructor 报错解决
- 详解Linux系统的CPU负载均值
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Java面试高频知识点汇总 网络协议专题
- 「Mysql优化大师一」mysql服务性能剖析工具
- FPGA设计心得(12)如何正确使用 in_system_ibert ?
- Java面试高频知识点汇总 垃圾回收(GC)机制专题
- Celery-分布式任务队列学习笔记
- Java面试高频知识点汇总 数据库专题
- Java面试高频知识点总结 Redis
- Java面试高频知识点总结 Spring
- 杂谈小程序
- pytest封神之路第四步 内置和自定义marker
- (译)SDL编程入门(3)事件驱动编程
- 一个简单的Angular search UI实现
- (译)SDL编程入门(2)在屏幕上显示图像
- 【Vue进阶】手把手教你在 Vue 中使用 JSX
- (译)SDL编程入门(1)Hello SDL