微信小程序怎么實現錄音

今天小編給大家分享一下微信小程序怎么實現錄音的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

為錄音

錄音中

wxml：

<!-- 開始錄音 -->
<image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="startRecord"></image>
 
<!-- 錄音中 -->
<block wx:if="{{record == 1}}">
<view class='audio'>
  <view class='laudio_btn' bindtap='remove'>
    <image src='/img/btn_close2.png' style='width:26rpx;height:25rpx;'></image>
  </view>
  <text class='laudio_text1'>|</text>
  <text class='laudio_text2'>{{formatedRecordTime}}</text>
  <view class='laudio_pro'>
    <image src='/img/btn_play2.png' style='width:100%;height:100%' catchtap='keep' wx:if="{{keep}}"></image>
    <image src='/img/btn_play3.png' style='width:100%;height:100%' catchtap='pause' wx:else></image>
  </view>
  <text class='audio_text' catchtap='stopRecord'>完成</text>
</view>
</block>

wxss：

.add-voice {
  width: 158rpx;
  height: 158rpx;
}
 
.audio {
  display: flex;
  position: relative;
  height: 140rpx;
  line-height: 140rpx;
  background: #f7f7f7;
  width: 96%;
}
 
/* 傳語音 */
.audio{
  display: flex;
  position: relative;
  height:140rpx;
  line-height: 140rpx;
  background: #f7f7f7;
  width: 96%;
}
/* 錄語音 */
.laudio_btn{
  /* width:26rpx;
  height:26rpx; */
  margin-left:42rpx
}
.audio_img{
  position: absolute;
  /* top:-15rpx; */
  /* right:-15rpx; */
  right: 0;
  width:30rpx;
  height:30rpx;
}
.audio_btn{
  width:88rpx;
  height:88rpx;
  margin-top:28rpx;
   margin-left:16rpx
}
.audio_pro{
  margin-top:36rpx;
  margin-left:20rpx;
  width:300rpx;
}
.audio_text{
  font-weight: bold;
  margin-left:50rpx;
  color:#90BED5;
  font-size: 10pt
}
.laudio_text1{
  font-size: 26rpx;
  margin-left:20rpx;
  color: #90BED5
}
.laudio_text2{
  font-weight: bold;
  font-size: 26rpx;
  margin-left:20rpx;
  color: #F8624E;
  width: 381rpx;
}
.laudio_pro{
  width:88rpx;
  height:88rpx;
  margin-top:28rpx;
}

js：

var util = require('../../utils/count.js') //計算時分秒函數
let radio = wx.getRecorderManager(); //創建錄音
const app = getApp()
 
var recordTimeInterval; //錄音 時分秒 '00：00'
 
Page({
  data: {
    record : 0, //未錄音
    formatedRecordTime: '00:00',
    keep: true,
    recordTime: 0
  },
  //開始錄音
  startRecord: function () {
    var that = this
    this.setData({ record: 1 })
    recordTimeInterval = setInterval(function () { //計算時分秒
      var recordTime = that.data.recordTime += 1
      that.setData({
        formatedRecordTime: util.formatTime(that.data.recordTime),
        recordTime: recordTime
      })
    }, 1000)
    const options = {
      duration: 30000, //錄音
      sampleRate: 44100,
      numberOfChannels: 1,
      encodeBitRate: 192000,
      format: 'mp3'
    }
    radio.start(options); //開始錄音
    radio.onStart((res => {
      console.log('監聽錄音', res)
    }));//監聽錄音事件
  },
  //暫停錄音
  keep() {
    radio.resume();
    this.setData({ keep: false })
    clearInterval(recordTimeInterval);
  },
  //繼續錄音
  pause() {
    var that = this
    this.setData({ keep: true, })
    recordTimeInterval = setInterval(function () { //計算時分秒
      var recordTime = that.data.recordTime += 1
      that.setData({
        formatedRecordTime: util.formatTime(that.data.recordTime),
        recordTime: recordTime
      })
    }, 1000)
  },
  //結束錄音
  stopRecord: function () {
    console.log('錄音結束了')
    var that = this;
    clearInterval(recordTimeInterval);
    radio.stop(); //錄音結束
    radio.onStop((res) => { //錄音結束
      // that.stopRecord
      console.log('錄音結束', res);
      this.setData({
        record: res.tempFilePath,
        musicUrl: res.tempFilePath, //錄音音頻
        duration: res.duration, //音頻時長時間戳
        record: true,
      })
    })
  },
  //取消錄音
  remove() {
    radio.stop(); //結束錄音
    this.setData({ record: 0, recordTime: 0, play: false })
    clearInterval(recordTimeInterval);
  },
})

utils/count.js

function formatTime(time) {
  if (typeof time !== 'number' || time < 0) {
    return time
  }
 
  var hour = parseInt(time / 3600)
  time = time % 3600
  var minute = parseInt(time / 60)
  time = time % 60
  var second = time
 
  return ([hour, minute, second]).map(function (n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  }).join(':')
}
 
function formatLocation(longitude, latitude) {
  if (typeof longitude === 'string' && typeof latitude === 'string') {
    longitude = parseFloat(longitude)
    latitude = parseFloat(latitude)
  }
 
  longitude = longitude.toFixed(2)
  latitude = latitude.toFixed(2)
 
  return {
    longitude: longitude.toString().split('.'),
    latitude: latitude.toString().split('.')
  }
}
 
module.exports = {
  formatTime: formatTime,
  formatLocation: formatLocation
}

以上就是“微信小程序怎么實現錄音”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。