最近有写一个自定义的语音输入界面,大概流程与正常微信发语音的流程相仿.效果截图如下:
实现效果截图
下面贴代码了:(代码很长,可直接复制运行,效果会比较直观)
wxml:
<view class='voice-mask' wx:if="{{showVoiceMask}}" bindtap='hideVoiceMask'></view>
<view class='voice-enter-note' wx:if = "{{showVoiceMask && !startRecording}}"></view>
<image class='voice-enter-note-image' src='/pages/interaction/tempImage/voiceAnimation/appstore_ic_interaction_addMedia_voiceStart.png' wx:if = "{{showVoiceMask && !startRecording}}"></image>
<image src='/pages/interaction/tempImage/appstore_ic_interaction_addMedia_voiceMask_voiceButton.png' class='voice-button' wx:if="{{showVoiceMask}}" bindtouchstart="startRecording" bindtouchend="stopRecording" bindtouchmove="moveToCancle"></image>
<view class='voice-note' wx:if="{{showVoiceMask && startRecording}}">
</view>
<view class='record-voice-animations' wx:if="{{showVoiceMask && startRecording && !cancleRecording}}">
<image src='/pages/interaction/tempImage/voiceAnimation/appstore_ic_interaction_addMedia_voiceAnimation_1.png' wx:if="{{recordAnimationNum===1}}"></image>
<image src='/pages/interaction/tempImage/voiceAnimation/appstore_ic_interaction_addMedia_voiceAnimation_2.png' wx:if="{{recordAnimationNum===2}}"></image>
<image src='/pages/interaction/tempImage/voiceAnimation/appstore_ic_interaction_addMedia_voiceAnimation_3.png' wx:if="{{recordAnimationNum===3}}"></image>
<image src='/pages/interaction/tempImage/voiceAnimation/appstore_ic_interaction_addMedia_voiceAnimation_4.png' wx:if="{{recordAnimationNum===4}}"></image>
<image src='/pages/interaction/tempImage/voiceAnimation/appstore_ic_interaction_addMedia_voiceAnimation_5.png' wx:if="{{recordAnimationNum===0}}"></image>
</view>
<view class='cancle-record-voice' wx:if="{{showVoiceMask && startRecording && cancleRecording}}">
<image src='/pages/interaction/tempImage/voiceAnimation/appstore_ic_interaction_addMedia_voiceAnimation_cancleVoice.png'></image>
wxss:
.voice-mask {
position: fixed;
top: 0rpx;
left: 0rpx;
width: 750rpx;
height: 1230rpx;
background-color: #000000;
opacity: 0.6;
display: flex;
flex-direction: column;
align-items: center;
z-index: 10;
}
.voice-enter-note {
position: absolute;
width: 320rpx;
height: 320rpx;
left: 215rpx;
top: 380rpx;
z-index: 30;
background-color: #000000;
opacity: 0.5;
border-radius: 15rpx;
}
.voice-enter-note-image {
position: absolute;
width: 292rpx;
height: 207rpx;
left: 229rpx;
top: 436.5rpx;
z-index: 40;
}
.voice-button {
position: absolute;
width: 160rpx;
height: 160rpx;
bottom: 90rpx;
left: 295rpx;
z-index: 20;
}
.voice-note {
position: absolute;
width: 320rpx;
height: 320rpx;
left: 215rpx;
top: 380rpx;
z-index: 30;
background-color: #000000;
opacity: 0.5;
border-radius: 15rpx;
}
.record-voice-animations {
position: absolute;
width: 292rpx;
height: 207rpx;
left: 229rpx;
top: 436.5rpx;
z-index: 40;
}
.record-voice-animations image {
width: 292rpx;
height: 207rpx;
}
.cancle-record-voice {
position: absolute;
width: 292rpx;
height: 207rpx;
left: 229rpx;
top: 436.5rpx;
z-index: 40;
}
.cancle-record-voice image {
width: 292rpx;
height: 207rpx;
}
js:
// 开始录音
startRecording:function (e) {
console.log('开始录音');
this.setData({
selectType: 'voice',
startRecording:true
})
this.startVoiceRecordAnimation();
var that = this;
const recorderManager = wx.getRecorderManager();
recorderManager.start({
format: 'mp3',
});
recorderManager.onStart(() => {
console.log('recorder start')
})
},
// 结束录音
stopRecording: function (e) {
console.log('结束录音');
var that = this;
const recorderManager = wx.getRecorderManager();
recorderManager.stop();
recorderManager.onStop((res) => {
console.log('recorder stop', res)
const { tempFilePath } = res;
if (res.duration < 1000) {
wx.showToast({
title: '说话时间太短!',
icon:'none'
})
this.stopVoiceRecordAnimation();
that.setData({
startRecording: false
})
return;
}
if (this.data.cancleRecording === false) {
if (tempFilePath.length !== 0) {
var recordLength = 0;
if (res.duration / 1000 < 22) {
recordLength = 160;
} else {
recordLength = (res.duration / 1000) / 60 * 440;
}
var recordTime = (res.duration / 1000).toFixed(0);
console.log('recordLength' + recordLength);
that.setData({
recordingLength: recordLength,
recordingTime: recordTime,
voiceTempFilePath: tempFilePath,
selectResource: true,
showVoiceMask: false,
startRecording: false
})
that.stopVoiceRecordAnimation();
}
} else {
that.setData({
selectResource: false,
showVoiceMask: false,
startRecording: false,
cancleRecording:false
})
that.stopVoiceRecordAnimation();
}
})
},
//向上滑动取消录音
moveToCancle: function (event) {
let currentY = event.touches[0].pageY;
if (this.data.lastVoiceYPostion !== 0) {
if (currentY - this.data.lastVoiceYPostion < 0 && currentY < 470) {
this.setData({
cancleRecording:true
})
}
}
this.setData({
lastVoiceYPostion: currentY
})
},
//麦克风帧动画
startVoiceRecordAnimation:function () {
var that = this;
//话筒帧动画
var i = 1;
that.data.recordAnimationSetInter = setInterval(function () {
i++;
i = i % 5;
that.setData({
recordAnimationNum: i
})
}, 300);
},
// 停止麦克风动画计时器
stopVoiceRecordAnimation:function () {
var that = this;
clearInterval(that.data.recordAnimationSetInter);
},
以上就是关于这个界面的实现代码啦,写的不好还请多多指教.
还有关于录音之后播放音频的相关问题,请查看我的上一篇帖子:微信小程序-InnerAudioContext()播放音频
谢谢大家~~
网友评论