微信小程序实现语音录音以及播放,以及播放时动态效果

效果展示

按下按钮开始录音:

松开按钮结束录音:

点击语音播放: 

 视频展示:https://live.csdn.net/v/349617

wxml代码:

 <van-cell title="语音" />
    <view class="voice_wrapper">
      <image class="voice_img" bindtouchstart='startHandel' bindtouchend='endHandle'  src="/assets/create_work/voice.png" mode=""/>
      <view class="vioce_content" bind:tap="handlePlay" wx:if="{{voiceTime}}">
        <view class="left">
          <view class="line"></view>
          <view class="line" style="opacity:{{line2Opcity}}" id="test2"></view>
          <view class="line" style="opacity:{{line3Opcity}}" id="test3"></view>
        </view>
        <view class="right">{{voiceTime}}"</view>
      </view>
    </view>
  <!-- 录音中 -->
  <view wx:if="{{isShowVoiceMask}}" class="voice_starting">录音中</view>

wxss代码: (有的用不上,自行删除)

  .item{
    width: 100%;
    .title{
      padding: 13px;
      box-sizing: border-box;
      color: #A3A3A5;
    }
    .upload_wrapper{
      width: 100%;
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
    }
    .voice_wrapper{
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
      .voice_img{
        width: 36px;
        height: 36px;
      }
      .vioce_content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 16px;
        padding: 0 6px;
        box-sizing: border-box;
        width: 76px;
        height: 34px;
        border-radius: 5px;
        background-color: #20706F;
        .left{
          display: flex;
          align-items: center;
          .line{
            width: 3px;
            background-color: #959898;
            margin-left: 4px;
            &:nth-child(1){
              height: 6px;
            }
            &:nth-child(2){
              height: 12px;
            }
            &:nth-child(3){
              height: 18px;
            }
          }
        }
        .right{
          font-size: 12px;
          color: #959898;
        }
      }
    }
  }
  .voice_starting{
    position: absolute;
    bottom: -300px;
    left: 150px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: #787879;
    color: #fff;
    text-align: center;
  }

js代码:

const audio = wx.createInnerAudioContext()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isShowVoiceMask:false, //是否显示录音中
    voiceTime:0, // 录音时长
    line2Opcity:1,
    line3Opcity:1
  },
    //按住按钮
    startHandel () {
      this.setData({
       isShowVoiceMask:true
      })
      console.log("开始录音")
      wx.getRecorderManager().start({
       duration: 0
      })
     },
     //松开按钮
     endHandle () {
      this.setData({
       isShowVoiceMask:false
      })
      console.log("结束")
      const recorderManager = wx.getRecorderManager()
      //录音停止函数
      var that = this;  
      wx.getRecorderManager().onStop((res) => {
        const voiceTime =  Math.floor(res.duration/1000)
        console.log('voiceTime',voiceTime);
        that.setData({
          voiceTime
        })
        console.log('res',res);
       const { tempFilePath } = res; //这里松开按钮 会返回录音本地路径
       audio.src = tempFilePath
       console.log(tempFilePath);
       //上传录制的音频到服务器
       // wx.uploadFile({
       //  url: '接口地址' + api.voice, //接口地址
       //  name: 'file', //上传文件名
       //  filePath: tempFilePath,
       //  success: function (res) { //后台返回给前端识别后的文字
       //   var model = res.data
       //   var modeljson = JSON.parse(model)
       //   if (modeljson.status_code == 500) {
       //    wx.showToast({
       //     title: '语音转换失败',
       //     image: '/assets/image/icon/fail@2x.png'
       //    })
       //    return false;
       //   }
       //   if (modeljson.meta.status_code === 200 && !modeljson.data.err_msg) {
       //    var saymessage = modeljson.data.message;
       //    wx.setStorageSync('sayinfo', saymessage)
       //    that.setData({
       //     inpvalue: saymessage
       //    })
       //    setTimeout(() =>{
       //     wx.navigateTo({
       //      url: '../loding/loding'
       //     })
           
       //    },2000)
       //    setTimeout(() => {
       //     wx.hideLoading();
       //    }, 100)
       //   } else if (modeljson.data.err_msg) {
       //    wx.showToast({
       //     title: '请大声说话',
       //     image: '/assets/image/icon/fail@2x.png'
       //    })
       //    return false;
       //   }
       //  }
       // })
      })
      //触发录音停止
      wx.getRecorderManager().stop()
     },
  // 播放
  handlePlay(e){
    // 倒计时
    let time = this.data.voiceTime
    audio.play()
    let timer1 = -1,timer2 = -1,timer3 = -1,timer4 = -1,timer5 = -1,timer6 = -1;
    // 第一次播放为0 第二次播放2秒钟
    timer6 = setInterval(()=>{
      console.log('时间',time);
      if(time <= 0){
        this.setData({
          line2Opcity: 1,
          line3Opcity: 1
        })
        clearInterval(timer6)
        clearTimeout(timer2)
        clearTimeout(timer3)
        clearTimeout(timer4)
        clearTimeout(timer5)
        return
      }
      timer2 = setTimeout(()=>{
        console.log('timer2');
        this.setData({
          line2Opcity: 0,
          line3Opcity: 0
        })
      },300)
      timer3 = setTimeout(()=>{
        console.log('timer3');
          this.setData({
            line2Opcity: 1,
            line3Opcity:0
          })
      },600)
      timer4 = setTimeout(()=>{
        console.log('timer4');
          this.setData({
            line2Opcity: 1,
            line3Opcity: 1
        })
      },900)
      timer5 = setTimeout(()=>{
        console.log('timer5');
          this.setData({
            line2Opcity: 0,
            line3Opcity: 0
          })
      },1200)    
    },1200)
    // 倒计时
    timer1 = setInterval(()=>{
      time--;
      if(time <= 0){
        clearInterval(timer1)
        return
      }
  },1000)
 
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     // 是否自动播放
     audio.autoplay = false;
  },

})