前言
书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原始录音、标准录音以及评分信息进行存储,最终呈现给学生并用于复看以及复读。
微信端
index.wxml:
代码语言:txt复制<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:
代码语言:txt复制.btn{
margin-top: 10rpx;
}
index.js:
代码语言:txt复制//录音管理
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 () {
},
})
上传服务
代码语言:txt复制/**
* 口语测试
* 创建者 柒
* 创建时间 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";
}
}