小程序按住录音和录音预览播放

<view>
<view wx:if="{{voice}}">
<view class='yy_box'>
<view class='yy_box_bg' bindtap='play'>
<view class="yy_box_icon {{onPlay?'audio-animation':''}}"></view>
</view>
<text>{{playDuration}}"</text>
</view>
</view>
<view class='recorder'>
<button bindtouchstart='recorderS' bindtouchend='recorderE'>按住说话</button>
</view>
</view>
</view>

.yy_box {
display: flex;
align-items: center;
}
.yy_box_bg {
width: 130px;
height: 30px;
background-color: #9eea6a;
margin: 0 10px;
border-radius: 5px;
}
.yy_box_bg::before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid #9eea6a;
border-bottom: 5px solid transparent;
position: relative;
left: -10px;
top: 10px;
}
.yy_box_icon {
width: 11.5px;
height: 14.5px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAABXCAYAAADvct7MAAAEWElEQVRYhe2Zz0sjZxjH37/iGWLe6QRHl7A4RBoliFGEtLCXRZQqrIoQ8VAICKIe0kPIQqJx/TGCxDgzeecNe1loD0tvhW6PLWwPpXR7KT0slBbEslQpsixZNj00b5h9fScz68xpNw/Mxdf388w87/M879dHhHrWsw/EAEBiT6hgRVEilNJzwzBalNJzjHE0NCe2bT83DKPlfNLpdCIUBwcHB1/ycMMwWmNjY1pgOABIuq4/5uG2bZ+F8vYAIFFKz3gHiUTiVmA4QgjlcrkcD19fX18PBT49Pf0JD9/a2voiMBgApJ2dHcLDl5eXPwsMTyQSt0QZoyhKJBBYluU+QkiTB+/t7T0KnC2Li4szgjR8HloaGobxEwMfHx9/F2qPAQAplUrdDq3se9aznvXMxQBASqfTCU3T+kNvZKenp09Zp9R1/evQHCwsLEzzPZ4Q0gxFjWGMo6LbyTCMlqZp/e8EAwCVPexnAwMDmGlI/gt8360Y40FK6WVbiF7GYrE4c9IWqS94B77PgBByTWmNj49PMAfxeDwmCk88Ho95wvf3978RbZ6amppqh0wqFosP+PVSqVT1hAOAenR09ESgAK6c4eHXKaXnnnDmwLbtCx4wPDw8yt6ej71pmi3fabm2tpbn4RsbG2W2blnWM37dN3x2dvaaOMrn87oD/uuN4ACgViqVr/jNKysrnzvC8lbY6vX6Gz/wjzRNS4oyBmM8iND/FSs40D893xpjPFiv19/wmw8PD5+0q1aqVCqUXy8Wiw884UtLS1lBiZ+xNEylUrdFXyXLcp8nHABU0zR/Y5uq1eqPDIwxjlJKX/Lg3d3dh74zBQDUZDKZmpycnGRgVVVlSumVINYXgdtuuVyuCcBXgf/aQAihoaEhlUu930O7jQBAUhQlUiqVqqurq8s93f6eGQBI7aI6o5S+ymQyo6FmT6BKfVc4KyxZlvsCOQEAaW5u7o5pmtcc+FYDTphIiGqa1i/qOYSQpt9O2VWIYoyjjUbjX96BrxbhR4hqmtZvWda1SyaXy+W6wv0K0ZmZmU8Fb//23SqaiLoJUdu2X7O2CwDSycnJ9/zvFAqFCkKo+0TUjxDlWzNLTwCQPCeiXkIUACSRYBoZGRlynYhOTEx8zDZ7CdFsNntPqA7cJqKU0n+c4RGsd4SoqHpN0/ylsyiaiCaTybhj3VWIAoBECHnNOX/RyRjRRHRzc3OLrXsJ0UajccnBX3bgooloPp+/74B3FaJ8S+jA3Sai2Wz2niMsrkK0HZYmB79ACHlPRL2EqOhALct65joR1XX9MataLyE6Pz9/l1/f3t42PSeiXkK03UF/ENZJt4moHyEqChkhpNk5bNFE1I8QdSvAcrlcQ93MjxDNZDKj3ULmal5CtB2yVzy4UChUPG+jbkIUACTbtv8QfFmw/9AoihKxbfsvQaNqYYyjNwYjhJBhGD/fKM5+rNFo/C065FCUl6IokVqt9rRdE992g/4H+ecsUNqAjLcAAAAASUVORK5CYII=) no-repeat;
background-size: 11.5px 43.5px;
background-position: 0 -29px; /* 默认第三张 */
position: relative;
left: 15px;
top: -2px;
}
.audio-animation {
animation: voiceplay 2s infinite step-start;
}
@keyframes voiceplay{
0%, 100%{
background-position: 0 -29px;
}
33.333%{
background-position: 0 0;
}
66.666%{
background-position: 0 -14.5px;
}
}
.yy_box text {
color: #999;
}

data: {
recorderTempFilePath:'', // 录音地址
playDuration: '', // 播放时间
onPlay:false, // 播放状态样式判断
voice: false, // 预览语音显示
},
// 按住录音
recorderS:function(){
const options = {
duration: 600000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50
}
// 开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
// console.log('recorder start')
wx.showLoading({
title: '录音中...',
})
})
//错误回调
recorderManager.onError((res) => {
console.log(res);
wx.hideLoading();
wx.showToast({
title: res,
icon: 'success',
duration: 1000
})
})
},
// 录音结束
recorderE:function(){
let that = this;
// 结束录音
recorderManager.stop();
recorderManager.onStop((res) => {
wx.hideLoading();
wx.showToast({
title: '录音结束',
icon: 'success',
duration: 1000
})
// console.log('recorder stop', res)
const { tempFilePath, duration } = res
let recorderTempFilePath = tempFilePath;
let playDuration = Math.ceil(duration / 1000);
that.setData({
recorderTempFilePath: recorderTempFilePath,
playDuration: playDuration,
voice: true
})
})
},
// 播放录音
play:function(){
let that = this;
let recorderTempFilePath = that.data.recorderTempFilePath;
innerAudioContext.autoplay = true
innerAudioContext.src = recorderTempFilePath
innerAudioContext.onPlay(() => {
// console.log('开始播放')
that.setData({
onPlay:true
})
})
innerAudioContext.onError((res) => {
// console.log(res.errMsg)
// console.log(res.errCode)
wx.showToast({
title: res.errMsg,
icon: 'success',
duration: 2000
})
})
// 播放结束
innerAudioContext.onEnded((res)=>{
that.setData({
onPlay: false
})
})
},

发送评论 编辑评论

推荐文章

发送评论编辑评论