小程序采集录音并上传到后台

前端之家收集整理的这篇文章主要介绍了小程序采集录音并上传到后台前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享小程序录音上传的具体代码,供大家参考,具体内容如下

demo.wxml

  1. <view>
  2. <button bindtap='startRecordMp3' type='primary'>录音开始(mp3)</button>
  3. </view>
  4. <view>
  5. <button bindtap='stopRecord' type='primary'>录音结束</button>
  6. </view>
  7. <view>
  8. <button bindtap='playRecord' type='primary'>播放录音</button>
  9. </view>
  10. <view>
  11. <button bindtap='sendRecord' type='primary'>播放录音</button>
  12. </view>

demo.wxss

  1. view{
  2. padding: 15px;
  3. }

demo.js

  1. // pages/newMusic/index.js
  2. const recorderManager = wx.getRecorderManager();
  3. Page({
  4.  
  5. data: {
  6.  
  7. },/**
  8. * 提示
  9. */
  10. tip: function (msg) {
  11. wx.showModal({
  12. title: '提示',content: msg,showCancel: false
  13. })
  14. }
  15.  
  16. /**
  17. * 录制mp3音频
  18. */,startRecordMp3: function () {
  19. recorderManager.start({
  20. format: 'mp3'
  21. });
  22. }
  23.  
  24. /**
  25. * 停止录音
  26. */,stopRecord: function () {
  27. recorderManager.stop()
  28. }
  29.  
  30. /**
  31. * 播放录音
  32. */,playRecord: function () {
  33. var that = this;
  34. var src = this.data.src;
  35. if (src == '') {
  36. this.tip("请先录音!")
  37. return;
  38. }
  39. this.innerAudioContext.src = this.data.src;
  40. this.innerAudioContext.play()
  41. },onLoad: function (options) {
  42. var that = this;
  43. recorderManager.onError(function () {
  44. that.tip("录音失败!")
  45. });
  46. recorderManager.onStop(function (res) {
  47. that.setData({
  48. src: res.tempFilePath
  49. })
  50. console.log(res.tempFilePath)
  51. that.tip("录音完成!")
  52. });
  53.  
  54. this.innerAudioContext = wx.createInnerAudioContext();
  55. this.innerAudioContext.onError((res) => {
  56. that.tip("播放录音失败!")
  57. })
  58.  
  59. }
  60.  
  61. })

java后台接收

  1. package com.azor.controller;
  2.  
  3. import java.text.SimpleDateFormat;
  4. import java.util.Date;
  5. import java.util.HashMap;
  6. import java.util.Map;
  7.  
  8. import javax.servlet.http.HttpServletRequest;
  9.  
  10. import org.apache.commons.codec.binary.Base64;
  11. import org.apache.commons.lang.StringUtils;
  12. import org.slf4j.LoggerFactory;
  13. import org.springframework.beans.factory.annotation.Autowired;
  14. import org.springframework.core.env.Environment;
  15. import org.springframework.web.bind.annotation.RequestMapping;
  16. import org.springframework.web.multipart.MultipartFile;
  17. import org.springframework.web.multipart.MultipartHttpServletRequest;
  18.  
  19. import com.azor.utils.HttpAPIService;
  20.  
  21. import ch.qos.logback.classic.Logger;
  22. import net.sf.json.JSONObject;
  23.  
  24. @RestController
  25. @RequestMapping("/base_voice")
  26. public class BaseController {
  27.  
  28. private static final Logger logger = (Logger) LoggerFactory.getLogger(BaseController.class);
  29. private static String lineSeparator = System.getProperty("line.separator");
  30.  
  31. @Autowired
  32. protected Environment env;
  33.  
  34. @Autowired
  35. protected HttpAPIService httpAPIService;
  36.  
  37. /** 上传文件保存路径 */
  38. private final String FILE_SAVE_PATH = "D:/photo/jac_hr_miniprogram_file/";
  39.  
  40. /** 主业务数据Map */
  41. protected Map<String,Object> dataMap = new HashMap<>();
  42.  
  43. /** HTTP POST 请求Map */
  44. protected Map<String,Object> postMap = new HashMap<>();
  45.  
  46. @RequestMapping("/file_upload")
  47. public void saveFile(HttpServletRequest request,String url) throws Exception {
  48. logger.info("文件上传开始" + lineSeparator);
  49. // 1.获取前台传过来得图片
  50. MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
  51. MultipartFile multipartFile = req.getFile("file");
  52.  
  53. // 2.获得文件扩展名
  54. String extOfFile = getExtOfFile(multipartFile);
  55. // 3.保存到本地
  56. BufferedOutputStream bos = null;
  57. String filename = null;
  58. try {
  59. File dir = new File(file_save_path);
  60. if (!dir.exists()) {// 判断文件目录是否存在
  61. dir.mkdirs();
  62. }
  63. filename = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + (int) (Math.random() * 1000) + "."
  64. + extOfFile;
  65. bos = new BufferedOutputStream(new FileOutputStream(file_save_path + filename));
  66. bos.write(multipartFile.getBytes());
  67.  
  68. } catch (Exception e) {
  69. e.printStackTrace();
  70. } finally {
  71. if (bos != null) {
  72. try {
  73. bos.close();
  74. } catch (IOException e) {
  75. e.printStackTrace();
  76. }
  77. }
  78.  
  79. }
  80.  
  81. }
  82.  
  83. public String getExtOfFile(MultipartFile multipartFile) {
  84. // 获取文件名称.扩展名
  85. String oldName = multipartFile.getOriginalFilename();
  86. String extensionName = "";
  87. // 获取原来的扩展名
  88. if ((oldName != null) && (oldName.length() > 0)) {
  89. int dot = oldName.lastIndexOf('.');
  90. if ((dot > -1) && (dot < (oldName.length() - 1))) {
  91. extensionName = oldName.substring(dot+1);
  92. }
  93. }
  94. return extensionName;
  95. }
  96. }

效果

小程序采集录音并上传到后台


小程序采集录音并上传到后台


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的JavaScript相关文章