微信小程序录音功能实现

于 2019-10-21 10:46:23 发布
阅读量3.2k 收藏 14
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 录音功能 音频播放进度条 微信小程序录音功能 自定义进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/undefined_ZF/article/details/102658993

首先我们要做的就是长按录音功能，顺带做了个播放录音带进度条功能，效果图及代码如下：

在这里插入图片描述
在这里插入图片描述
首先我们要做的效果图就是上图这样，下面就贴代码吧。

wxml:

  <view catch:longpress="handleRecordStart" catch:touchmove="handleTouchMove" catch:touchend="handleRecordStop" class="img-content" hoverClass="none" data-key="cover" data-size="1">
    <image class="icon-img" mode="aspectFill" src="###"></image>
  </view>

录音播放

<!-- 录音 -->
<view class="audio rel" wx:if="{{audiolist.length>0}}">
  <view class="play abs" catchtap='playAudio' data-src="{{audiolist}}">
    <!-- <image class="abs play-img" mode="aspectFill" src="https://retail.xiaochengxucms.com/images/12/2018/10/T8A1maB3boAB3A8Sb8yTYBs1b0BmaA.png"></image> -->
    <view wx:if="{{isPlayAudio}}">
        <image class="abs play-img" mode="aspectFill"  src='/longbing_card/resource/images/stop.png' />
      </view>
      <view wx:else>
        <image class="abs play-img" mode="aspectFill"  src='/longbing_card/resource/images/play.png' />
      </view>
  </view>
  <view class="name abs">{{userName}}</view>
  <view class="flex-time">
    <view style="font-size: 20rpx;color:#ccc">{{showTime1}}</view>
    <view class='slider'>
      <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' />
    </view>
    <view style="font-size: 20rpx;color:#ccc">{{showTime2}}</view>
  </view>
</view>

录音播放wxss：

.play-img {
width: 62rpx !important;
height: 62rpx !important;
top: 10rpx;
left: 10rpx;
}

.audio {
width: 100%;
height: 112rpx;
background: rgba(230, 67, 64, 0.49);
border-radius: 8rpx;
margin: 10rpx 0;
}

.play {
width: 63rpx;
height: 63rpx;
top: 20rpx;
left: 40rpx;
}

.name {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
line-height: 42rpx;
color: rgba(255, 255, 255, 1);
top: 14rpx;
left: 160rpx;
}

.flex-time {
width: 70%;
position: absolute;
display: flex;
align-items: center;
justify-content: flex-start;
left: 25%;
bottom: -10rpx;
}
.slider{
width: 60%;
height: 100%;
}
.slider slider{
width: 88%;
margin-left: 8%;
margin-right: 4%;
}

录音js：

// 录音
handleRecordStart: function(e) {
this.setData({
is_clock: true, //长按时应设置为true，为可发送状态
startPoint: e.touches[0], //记录触摸点的坐标信息
})
//设置录音参数
const options = {
duration: 600000,
sampleRate: 16000,
numberOfChannels: 1,
encodeBitRate: 48000,
format: ‘mp3’
}
//开始录音
recorderManager.start(options);
wx.showLoading({
icon: “none”,
title: ‘正在录音’,
})
},
handleRecordStop: function(e) {
console.log(e)
wx.hideLoading()
recorderManager.stop() //结束录音
//此时先判断是否需要发送录音
if (this.data.is_clock == true) {
var that = this
//对停止录音进行监控
recorderManager.onStop((res) => {
//对录音时长进行判断，少于2s的不进行发送，并做出提示
console.log(res)
console.log(_xx_util2.default.getUrl(“upload”, “longbing_card”))
if (res.duration < 2000) {
wx.showToast({
title: ‘录音时间太短，请长按录音’,
icon: ‘none’,
duration: 1000
})
} else {
//进行语音发送
const {
tempFilePath
} = res;
wx.showLoading({
title: ‘语音检索中’,
})
//上传录制的音频
wx.uploadFile({
url: _xx_util2.default.getUrl(“upload”, “longbing_card”),
filePath: tempFilePath,
name: ‘upfile’,
success: function(event) {
console.log(event)
var datas = JSON.parse(event.data);
console.log(datas)
if (datas.errno == 0) {
wx.hideLoading()
if (datas.data) {
console.log(that.data.audiolist)
that.setData({
audiolist: datas.data.path,
audioPath: datas.data.img,
time: res.duration
})
} else {
wx.showToast({
title: ‘上传格式错误’,
icon: ‘none’,
duration: 2000
})
}
} else {
wx.showToast({
title: datas.msg,
icon: ‘none’,
duration: 2000
})
}
}
})
}
})
}
},
handleTouchMove: function(e) {
//计算距离，当滑动的垂直距离大于25时，则取消发送语音
if (Math.abs(e.touches[e.touches.length - 1].clientY - this.data.startPoint.clientY) > 25) {
this.setData({
is_clock: false //设置为不发送语音
})
}
},

录音播放js：
var innerAudioContext = wx.createInnerAudioContext()//很重要，写在page外面，作为全局变量

data: {
isPlayAudio: false,
audioSeek: 0,
audioDuration: 0,
showTime1: ‘00:00’,
showTime2: ‘00:00’,
audioTime: 0
},

onshow: function() { 
  console.log("onshow")
   this.Initialization();
   this.loadaudio();
},



//初始化播放器，获取duration
Initialization() {
  console.log("初始化播放器")
  var t = this;
  if (this.properties.audiolist.length != 0) {
    //设置src
    innerAudioContext.src = this.properties.audiolist;
    console.log(innerAudioContext.src)
    //运行一次
    innerAudioContext.play();
    innerAudioContext.pause();
    innerAudioContext.onCanplay(() => {
      //初始化duration
      innerAudioContext.duration
      setTimeout(function() {
        //延时获取音频真正的duration
        var duration = innerAudioContext.duration;
        var min = parseInt(duration / 60);
        var sec = parseInt(duration % 60);
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        t.setData({
          audioDuration: innerAudioContext.duration,
          showTime2: `${min}:${sec}`
        });
      }, 1000)
    })
  }
},
//拖动进度条事件
sliderChange(e) {
  var that = this;
  innerAudioContext.src = this.properties.audiolist;
  //获取进度条百分比
  var value = e.detail.value;
  this.setData({
    audioTime: value
  });
  var duration = this.data.audioDuration;
  //根据进度条百分比及歌曲总时间，计算拖动位置的时间
  value = parseInt(value * duration / 100);
  //更改状态
  this.setData({
    audioSeek: value,
    isPlayAudio: true
  });
  //调用seek方法跳转歌曲时间
  innerAudioContext.seek(value);
  //播放歌曲
  innerAudioContext.play();
},
//播放、暂停按钮
playAudio() {
  console.log("播放")
  //获取播放状态和当前播放时间
  var isPlayAudio = this.data.isPlayAudio;
  var seek = this.data.audioSeek;
  innerAudioContext.pause();
  //更改播放状态
  this.setData({
    isPlayAudio: !isPlayAudio
  })
  if (isPlayAudio) {
    //如果在播放则记录播放的时间seek，暂停
    this.setData({
      audioSeek: innerAudioContext.currentTime
    });
  } else {
    //如果在暂停，获取播放时间并继续播放
    innerAudioContext.src = this.properties.audiolist;
    console.log(innerAudioContext.src)
    if (innerAudioContext.duration != 0) {
      this.setData({
        audioDuration: innerAudioContext.duration
      });
    }
    //跳转到指定时间播放
    innerAudioContext.seek(seek);
    innerAudioContext.play();
  }
},
loadaudio() {
  var that = this;
  //设置一个计步器
  this.data.durationIntval = setInterval(function() {
    //当歌曲在播放时执行
    if (that.data.isPlayAudio == true) {
      //获取歌曲的播放时间，进度百分比
      var seek = that.data.audioSeek;
      var duration = innerAudioContext.duration;
      var time = that.data.audioTime;
      console.log(seek, duration, time)
      time = parseInt(100 * seek / duration);
      console.log(time)
      //当歌曲在播放时，每隔一秒歌曲播放时间+1，并计算分钟数与秒数
      var min = parseInt((seek) / 60);
      var sec = parseInt((seek) % 60);
      //填充字符串，使3:1这种呈现出 03：01 的样式
      if (min.toString().length == 1) {
        min = `0${min}`;
      }
      if (sec.toString().length == 1) {
        sec = `0${sec}`;
      }
      var min1 = parseInt(duration / 60);
      var sec1 = parseInt(duration % 60);
      if (min1.toString().length == 1) {
        min1 = `0${min1}`;
      }
      if (sec1.toString().length == 1) {
        sec1 = `0${sec1}`;
      }
      //当进度条完成，停止播放，并重设播放时间和进度条
      if (time >= 100) {
        innerAudioContext.stop();
        that.setData({
          audioSeek: 0,
          audioTime: 0,
          audioDuration: duration,
          isPlayAudio: false,
          showTime1: `00:00`
        });
        return false;
      }
      console.log(`${min}:${sec}`, `${min1}:${sec1}`)
      //正常播放，更改进度信息，更改播放时间信息
      that.setData({
        audioSeek: seek + 1,
        audioTime: time,
        audioDuration: duration,
        showTime1: `${min}:${sec}`,
        showTime2: `${min1}:${sec1}`
      });
    }
  }, 1000);
},
onUnload: function() {
  //卸载页面，清除计步器
  clearInterval(this.data.durationIntval);
}
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值