小程序语音调用

录音wxml代码片段

 <button type="default"   bindtouchstart="audiostart"  bindtouchend="audioend" class="btn"> 按住说话 </button>

录音 js代码片段

//定义一个全局变量，调用微信官方定义语音管理对象
const recorderManager = wx.getRecorderManager();

 //语音开始
  audiostart:function(){
    wx.showToast({
      title: '正在录音...',
      icon: 'loading',
      duration: 10000
   });
   recorderManager.start({
    format: 'mp3'
  });

  },

  //语音结束
  audioend:function(){
    //弹窗消失
    wx.hideToast({
      title: '正在录音...',
      icon: 'loading'
    });
    var path = "";
    var that = this;
    console.log("结束1")
    recorderManager.stop();
    recorderManager.onStop(function(res){
      path = res.tempFilePath;
      console.log("结束")
      console.log(res.tempFilePath )
      if(res.tempFilePath!=""){
      	//将语音文件保存至后台
      	that.saveVoiceInfo(res.tempFilePath);
      }else{
      	
      }
    });
  },
  //保存至后台
saveVoiceInfo:function(path){
    var that = this;
    wx.uploadFile({
      url:'127.0.0.1:8080/saveVoiceInfo',//后台地址 
      filePath: path,
      name: 'file',
      header: {
         'content-type': 'multipart/form-data'
      }, // 设置请求的 header
      formData: { 
        'type' : 'mp3',
      },
      success: function (res) {
      	//成功后事件
      },
    })

  }

录音保存java后台代码

	@ApiOperation(value = "语音保存", response = Map.class)
    @PostMapping("saveVoiceInfo")
    @IgnoreAuth
    @ResponseBody
    public Object updatefileimageinfos(HttpServletResponse response, HttpServletRequest request,
                                       @RequestParam(value = "file", required = false) MultipartFile imagefile) throws IOException {
        Map<String,Object> result = new HashMap<>();
        String filetype = "";
        String[] filetypearr = request.getParameterMap().get("type");
        if (filetypearr.length>0){
            filetype = filetypearr[0];
        }
        Map<String, Object>  entity= new HashMap<>();
        String dateFormat = new java.text.SimpleDateFormat("yyyyMMddhhmmss").format(new Date());
        String type = "";
        try {
            type = dateFormat+Tools.getFourUUID()+imagefile.getOriginalFilename().substring(imagefile.getOriginalFilename().lastIndexOf(".")).toLowerCase();
            File targetFile = new File("D:/voice", type);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            imagefile.transferTo(targetFile);
            //将图片路径存到表中
        } catch (Exception e) {
            e.printStackTrace();
        }
        return resultid;
    }

保存图片到本地

读取录音

读取录音wxml代码片段

<view class="speak_me audio-player" wx:if="{{ item.path != '' }}" bindtap="play" data-play="{{item.say}}"  data-path="{{item.path}}">
     <text class="time">{{item.time}}</text>
     <view
         class="controls play-btn" bindtap="audioPlay">
         <image style="margin-left{{item.timelength}}px"src="../../../static/images/voicemsg.png"></image>
      </view>
</view>

读取录音js代码片段

	//点击录音
  play:function(e){
    debugger
    wx.showLoading({
      title: '音频下载中',
    })
    
     var path=e.currentTarget.dataset.path;
     var pathAll = "127.0.0.1:8080/voice/"+path;//可以用tomcat配置将本地语音变成网页版语音
     //从服务器中，把音频下载到本地
    wx.downloadFile({
      url: pathAll, // 服务器资源地址
      success: res => {
        //下载完成，播放音频
        console.log('开始播放')
        console.log(res.tempFilePath);
        this.innerAudioContext.src = res.tempFilePath
        this.innerAudioContext.play()
        wx.hideLoading()
      },
      fail: res => {
        wx.hideLoading()
        wx.showToast({
          title: '出错了',
        })
      }
    })
  },

效果图