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

简介:

89830

前言

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

微信端

3691848038

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";
    }
}
目录
相关文章
|
5天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
1099 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
961 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
919 1
|
2月前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
115 3
|
3月前
|
监控 小程序 前端开发
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会,提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架,前后端分离架构,集成微信支付等服务,确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布,后期注重数据监控、用户反馈和运营推广,以持续优化用户体验。
|
3月前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统,为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化,确保稳定运行和良好体验。最后,通过提交审核、上线运营和推广策略,吸引更多用户和商家入驻。
|
4月前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
4月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
335 1
|
4月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
138 5
|
4月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
97 5

热门文章

最新文章