小程序录音|语音 示例2 -j9九游会真人游戏第一品牌

wxml

 
  
    
    
   
 按住 录音 
 播放 
   

/**index.wxss**/  
.speak-style{  
    position: fixed;  
    z-index: 999;
    left: 250rpx;
    height: 240rpx;  
    width: 240rpx;  
    border-radius: 20rpx;  
    margin: 50% auto;  
    background: #26a5ff;  
}  
.item-style{  
    margin-top: 30rpx;  
    margin-bottom: 30rpx;  
}  
.text-style{  
    text-align: center;    
}  
.record-style{  
    position: fixed;  
    bottom: 100rpx;  
    left: 0;  
    height: 120rpx;  
    width: 100%;  
}  
.btn-style{  
  margin-left: 30rpx;  
  margin-right: 30rpx;  
}  
.sound-style{  
  position: absolute;  
  width: 150rpx;  
  height:150rpx;  
  margin-top: 45rpx;  
  margin-left: 45rpx;  
}  

//index.js
//获取应用实例
const app = getapp()
const recordermanager = wx.getrecordermanager()
const inneraudiocontext = wx.createinneraudiocontext()
var tempfilepath;
page({
  data: {
  },
  //手指按下  
  touchdown: function () {
    console.log("手指按下了...")
    var _this = this;
    this.setdata({
      isspeaking: true
    })
    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);
    })
  },
  //手指抬起  
  touchup: function () {
    console.log("手指抬起了...")
    this.setdata({
      isspeaking: false
    })
    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.onended   ((res) => {
          wx.showtoast({
            title: '播放结束',
            icon: 'success',
            duration: 1000
          })
        })
      })
    inneraudiocontext.onerror((res) => {
      console.log(res.errmsg)
      console.log(res.errcode)
    })
  },
  onload: function () {
  },
})