首先我们先看一下微信小程序的API

1 <view class=\'progress_box\' bindtap=\'openRecording\' style="display:{{openRecordingdis}}">
2         <view class="progress_bgs">
3           <view class="progress_bg">
4             <image class="progress_img" src=\'../../../images/SubjectInformation/luyin.png\'></image>
5           </view>
6         </view>
7 </view>

 1 .topicRecording {
 2   float: left;
 3   width: 40%;
 4   height: 100%;
 5   position: relative;
 6 }
 7  
 8  
 9 .progress_box {
10   width: 130rpx;
11   height: 130rpx;
12   margin-left: -65rpx;
13   position: absolute;
14   bottom: 0;
15   left: 50%;
16   display: flex;
17   align-items: center;
18   justify-content: center;
19   background: #ccc;
20   border-radius: 50%;
21 }
22  
23 .progress_bgs {
24   width: 114rpx;
25   height: 114rpx;
26   background: #fff;
27   border-radius: 50%;
28   margin: 9rpx;
29 }
30  
31 .progress_bg {
32   width: 106rpx;
33   height: 106rpx;
34   margin: 5rpx;
35   position: absolute;
36   background: #444;
37   border-radius: 50%;
38 }
39 
40 .progress_img {
41   width: 82rpx;
42   height: 82rpx;
43   border-radius: 50%;
44   margin: 12rpx;
45 }

  1 Page({
  2   data: {
  3     openRecordingdis: "block",//录音图片的不同
  4     shutRecordingdis: "none",//录音图片的不同
  5     recordingTimeqwe:0,//录音计时
  6     setInter:""//录音名称
  7   },
  8  
  9    //录音计时器
 10   recordingTimer:function(){
 11     var that = this;
 12     //将计时器赋值给setInter
 13     that.data.setInter = setInterval(
 14       function () {
 15         var time = that.data.recordingTimeqwe + 1;
 16         that.setData({
 17           recordingTimeqwe: time
 18         })
 19       }
 20       , 1000); 
 21   },
 22  
 23  
 24   //开始录音
 25   openRecording: function() {
 26     var that = this;
 27     wx.getSystemInfo({
 28       success: function(res) {
 29         that.setData({
 30           shutRecordingdis: "block",
 31           openRecordingdis: "none"
 32         })
 33       }
 34     })
 35     const options = {
 36       duration: 60000, //指定录音的时长，单位 ms，最大为10分钟（600000），默认为1分钟（60000）
 37       sampleRate: 16000, //采样率
 38       numberOfChannels: 1, //录音通道数
 39       encodeBitRate: 96000, //编码码率
 40       format: \'mp3\', //音频格式，有效值 aac/mp3
 41       frameSize: 50, //指定帧大小，单位 KB
 42     }
 43     //开始录音计时   
 44     that.recordingTimer();
 45     //开始录音
 46     recorderManager.start(options);
 47     recorderManager.onStart(() => {
 48       console.log(\'。。。开始录音。。。\')
 49     });
 50     //错误回调
 51     recorderManager.onError((res) => {
 52       console.log(res);
 53     })
 54   },
 55  
 56   //结束录音
 57   shutRecording: function() {
 58     var that = this;
 59     wx.getSystemInfo({
 60       success: function(res) {
 61         that.setData({
 62           shutRecordingdis: "none",
 63           openRecordingdis: "block"
 64         })
 65       }
 66     })
 67     recorderManager.stop();
 68     recorderManager.onStop((res) => {
 69       console.log(\'。。停止录音。。\', res.tempFilePath)
 70       const {tempFilePath} = res;
 71       //结束录音计时  
 72       clearInterval(that.data.setInter);
 73       //上传录音
 74       wx.uploadFile({
 75         url: appURL + \'/wx_SubjectInformation/wx_SubjectRecordKeeping.do\',//这是你自己后台的连接
 76         filePath: tempFilePath,
 77         name:"file",//后台要绑定的名称
 78         header: {
 79           "Content-Type": "multipart/form-data"
 80         },
 81         //参数绑定
 82         formData:{
 83           recordingtime: that.data.recordingTimeqwe,
 84           topicid: that.data.topicid,
 85           userid:1,
 86           praisepoints:0
 87         },
 88         success:function(ress){
 89           console.log(res);
 90           wx.showToast({
 91             title: \'保存完成\',
 92             icon:\'success\',
 93             duration:2000
 94           })
 95         },
 96         fail: function(ress){
 97           console.log("。。录音保存失败。。");
 98         }
 99       })
100     })
101   },
102  
103   //录音播放
104   recordingAndPlaying: function(eve) {
105     wx.playBackgroundAudio({
106       //播放地址
107       dataUrl: \'\' + eve.currentTarget.dataset.gid + \'\'
108     })
109   },
110  
111 })

 1 @RequestMapping(value = "/wx_SubjectRecordKeeping", produces = "application/json")
 2     @ResponseBody
 3     public Object wx_SubjectRecordKeeping(HttpServletRequest request,
 4             @RequestParam("file") MultipartFile files, String recordingtime,
 5             int topicid,int userid,int praisepoints) {
 6         // 构建上传目录路径
 7         // request.getServletContext().getRealPath("/upload");
 8         String uploadPath = 你自己保存音频的URL;
 9         // 如果目录不存在就创建
10         File uploadDir = new File(uploadPath);
11         if (!uploadDir.exists()) {
12             uploadDir.mkdir();
13         }
14         // 获取文件的 名称.扩展名
15         String oldName = files.getOriginalFilename();
16         String extensionName = "";
17         // 获取原来的扩展名
18         if ((oldName != null) && (oldName.length() > 0)) {
19             int dot = oldName.lastIndexOf(\'.\');
20             if ((dot > -1) && (dot < (oldName.length() - 1))) {
21                 extensionName = oldName.substring(dot);
22             }
23         }
24         // 构建文件名称
25         String fileName = System.currentTimeMillis() + "_" + System.nanoTime()
26                 + extensionName;
27         // 获取
28         String[] fileType = { ".CD", ".WAVE", ".AIFF", ".AU", ".MPEG", ".MP3",
29                 ".MPEG-4", ".MIDI", ".WMA", ".RealAudio", ".VQF", ".OggVorbis",
30                 ".AMR" };
31         List<String> fileTyepLists = Arrays.asList(fileType);
32         int fileTypeOnCount = 0;
33         for (String fileTyepListss : fileTyepLists) {
34             if (fileTyepListss.equalsIgnoreCase(extensionName)) {
35                 // -----如果是音频文件的话
36                 // 构建文件路径
37                 String filePath = uploadPath + File.separator + fileName;
38                 // 保存文件
39                 try {
40                     FileUtils.writeByteArrayToFile(new File(filePath),
41                             files.getBytes());
42                 } catch (Exception e) {
43                     e.printStackTrace();
44                 }
45             } else {
46                 fileTypeOnCount++;
47             }
48         }
49         if (fileTypeOnCount == fileTyepLists.size()) {
50             // 不是音频文件
51             return false;
52         }
53         return false;
54             }