SpringBoot开发案例之微信小程序录音上传

前言

书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原始录音、标准录音以及评分信息进行存储,最终呈现给学生并用于复看以及复读。

微信端

wechat.png

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";
    }
}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏应兆康的专栏

关于病毒Wanna Cry的预防和解决方案(开发者投稿)

Wanna Cry 蠕虫病毒肆虐,你有没有被勒索?本文作者与你分享了几招临时性的应对方案,不妨试一试。

8.3K5
来自专栏码匠的流水账

解决jd-gui在Sierra下闪退问题

在升级了mac操作系统到Sierra版本之后,之前的jd-gui就闪退了,本文就讲述一下如何解决这个问题。

2511
来自专栏杨建荣的学习笔记

11g备库无法开启ADG的原因分析 (r7笔记第62天)

今天碰到一个有些奇怪的问题,但是奇怪的现象背后都是有本质的因果。 下午在做一个环境的检查时,发现备库是在mount阶段,这可是一个11gR2的库,没有ADG实在...

3844
来自专栏iOSDevLog

提交 BookReader Framework 到 CocoaPodsBookReaderCocoaPods

https://github.com/kishikawakatsumi/BookReader

1382
来自专栏移动端周边技术扩展

iOS打开系统功能对应的URL

1843
来自专栏杨建荣的学习笔记

ASM无法启动的问题分析(二)(r7笔记第88天)

第一篇的内容可以参考。ASM无法启动的问题分析(一),有不少的朋友给了一些建议,我也糅合了进来。一并感谢。 当然重启服务发现CSSD服务是Online,但是AS...

39910
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理

前言 本节主要是关注者(即用户)和用户组的管理,微信公众号提供了用户和用户组的管理,我们可以在微信公众号官方里面进行操作,添加备注和标签,以及移动用户组别,同...

5556
来自专栏杨建荣的学习笔记

一条细小的报警短信的处理(r6笔记第96天)

最近偶尔会收到一封报警短信,提示内容大体如下, xxxx,trc_directory (TNS-1190),log_directory(TNS-1190),Pl...

3698
来自专栏逆向与安全

360 so动态脱壳

目前so加壳有很多家,我己知的有 爱加密,梆梆,360, 娜迦等 各有所长。今天把学习360的脱壳笔记记录下来与小菜共同学习,没有其它目的,大神请绕道!

3320
来自专栏Java学习网

Java 语言版本整理,先到1.8版本,不全请补充

Java 语言版本 JDK 1.1.4 Sparkler 宝石 1997-09-12 JDK 1.1.5 Pumpkin 南瓜 1997-12-13 JDK 1...

2735

扫码关注云+社区

领取腾讯云代金券