首先我们先看一下微信小程序的API
https://developers.weixin.qq.com/miniprogram/dev/api/getRecorderManager.html?search-key=%E5%BD%95%E9%9F%B3
这里有关于小程序录音的一些基本配置，
index.wxml:
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>
index.wxss:
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 }
index.js:
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 }
效果图
点击开始录音、录完后点击结束录音
录音成功后的返回
录制的音频文件
请发表评论