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";
}
}
- 浅谈Orabbix监控指标(r6笔记第27天)
- Orabbix定制监控Oracle的简单配置(r6笔记第26天)
- 【java基础】 线程实例
- 记一次数据库的分析和优化建议(r6笔记第24天)
- linux (ubantu)安装最新版python3.6,以及直接安装anaconda
- 【java基础】匿名类
- 朴素贝叶斯法 2016年11月11日
- 11g中关于控制文件自动备份的改进(r6笔记第22天)
- Java基础(02)-15总结对象数组,集合Collection,集合List
- alert日志中的两种ORA错误分析(r6笔记第21天)
- 通过定制orabbix监控分析潜在的Oracle问题 (r6笔记第32天)
- 【C语言练手】C语言画太极图
- 关于奇怪的并行进程分析(一) (r6笔记第41天)
- 关于ora-02391问题的总结(r6笔记第40天)
- 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 文档注释
- 【- Flutter 桌面篇 -】 FlutterUnit win版闪亮登场
- Android实现视频弹幕功能
- flutter 中监听滑动事件
- 如何通过Cloudera Manager页面自定义图表
- 【-Flutter组件篇- 】1.20新增组件InteractiveViewer
- Android使用SoundPool实现播放音效
- 【- FlutterUnit重大更新 -】Flutter要点集录.md
- Android实现美团外卖底部导航栏动画
- Kudu遇到的问题
- 【 -Flutter自定义组件- 】Wrapper组件,包裹装饰你的一切
- Android Shape属性创建环形进度条
- Ranger同步ldap组问题
- Android系统添加自定义鼠标样式通过按键切换实例详解
- Impala MetaData问题
- 聚焦 Android 11: UI 与 Compose