首先我們要做的就是長按錄音功能，順帶做了個播放錄音帶進度條功能，效果圖及代碼如下：

首先我們要做的效果圖就是上圖這樣，下面就貼代碼吧。

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) {//設置srcinnerAudioContext.src = this.properties.audiolist;console.log(innerAudioContext.src)//運行一次innerAudioContext.play();innerAudioContext.pause();innerAudioContext.onCanplay(() => {//初始化durationinnerAudioContext.durationsetTimeout(function() {//延時獲取音頻真正的durationvar 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);
}

總結

以上是生活随笔為你收集整理的微信小程序录音功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。