第微信小程序實現(xiàn)錄音本文實例為大家分享了微信小程序實現(xiàn)錄音的具體代碼，供大家參考，具體內容如下

為錄音

錄音中

wxml：

!--開始錄音--

imagesrc="/img/add_voice.png"wx:if="{{record==0}}"bindtap="startRecord"/image

!--錄音中--

blockwx:if="{{record==1}}"

view

viewbindtap='remove'

imagesrc='/img/btn_close2.png'/image

/view

text|/text

text{{formatedRecordTime}}/text

view

imagesrc='/img/btn_play2.png'catchtap='keep'wx:if="{{keep}}"/image

imagesrc='/img/btn_play3.png'catchtap='pause'wx:else/image

/view

textcatchtap='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：

varutil=require('../../utils/count.js')//計算時分秒函數(shù)

letradio=wx.getRecorderManager();//創(chuàng)建錄音

constapp=getApp()

varrecordTimeInterval;//錄音時分秒'00：00'

Page({

data:{

record:0,//未錄音

formatedRecordTime:'00:00',

keep:true,

recordTime:0

//開始錄音

startRecord:function(){

varthat=this

this.setData({record:1})

recordTimeInterval=setInterval(function(){//計算時分秒

varrecordTime=that.data.recordTime+=1

that.setData({

formatedRecordTime:util.formatTime(that.data.recordTime),

recordTime:recordTime

})

},1000)

constoptions={

duration:30000,//錄音

sampleRate:44100,

numberOfChannels:1,

encodeBitRate:192000,

format:'mp3'

}

radio.start(options);//開始錄音

radio.onStart((res={

console.log('監(jiān)聽錄音',res)

}));//監(jiān)聽錄音事件

//暫停錄音

keep(){

radio.resume();

this.setData({keep:false})

clearInterval(recordTimeInterval);

//繼續(xù)錄音

pause(){

varthat=this

this.setData({keep:true,})

recordTimeInterval=setInterval(function(){//計算時分秒

varrecordTime=that.data.recordTime+=1

that.setData({

formatedRecordTime:util.formatTime(that.data.recordTime),

recordTime:recordTime

})

},1000)

//結束錄音

stopRecord:function(){

console.log('錄音結束了')

varthat=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

functionformatTime(time){

if(typeoftime!=='number'||time0){

returntime

varhour=parseInt(time/3600)

time=time%3600

varminute=parseInt(time/60)

time=time%60

varsecond=time

return([hour,minute,second]).map(function(n){

n=n.toString()

returnn[1]n:'0'+n

}).join(':')

functionformatLocation(longitude,latitude){

if(typeoflongitude==='string'typeoflatitude==='string'){

longitude=parseFloat(longitude)

latitude=parseFloat(latitude)

longitude=longitude.toFixed(2)

latitude=latitude.toFixed(2)

return{

longitude: