微信小程序实现录制、试听、上传音频功能（带波形图）

2023-07-31 12:31:04 158

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：

xml文件








录制提示



00:00:{{currentTime}}









































































































































































































































































































































































































































































































































































































































































































































































































































开始
录好了


试听
上传
上传中

重新录制

js文件

letwindowHeight=wx.getSystemInfoSync().windowHeight//屏幕的高度
letscreenWidth=wx.getSystemInfoSync().screenWidth
letscreenHeight=wx.getSystemInfoSync().screenHeight
letcontentHeight=((windowHeight/screenWidth)*750-184-166)+"rpx";
constrecorderManager=wx.getRecorderManager()
constbackgroundAudioManager=wx.getBackgroundAudioManager()
Page({
/**
*页面的初始数据
*/
data:{
startClick:false,
contentHeight:contentHeight,
voiceState:false,
tempFilePath:'',
recordingTimeqwe:0,//录音计时
setInter:"",//录音名称
isplay:true,//播放状态true--播放中false--暂停播放
uploadState:false,
showhandle1:true,
showhandle2:false,
showWaveView:false,
currentLeft:10,
currentTime:'00'
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
this.initRecord()
},
/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
},
initRecord:function(){
recorderManager.onStart(()=>{
console.log('开始录音')
})
recorderManager.onPause(()=>{
console.log('暂停录音')
})
recorderManager.onStop((res)=>{
clearInterval(this.data.setInter);
this.setData({voiceState:true,currentLeft:10})
console.log('结束录音',res)
const{tempFilePath}=res
this.data.tempFilePath=tempFilePath
})
recorderManager.onFrameRecorded((res)=>{
const{frameBuffer}=res
console.log('frameBuffer.byteLength',frameBuffer.byteLength)
})
},
recordingTimer:function(){
varthat=this;
//将计时器赋值给setInter
this.data.setInter=setInterval(
function(){
lettime=that.data.recordingTimeqwe+1;
if(time>10){
wx.showToast({
title:'录音时长最多10s',
duration:1500,
mask:true
})
clearInterval(that.data.setInter);
that.shutRecord();
return;
}
//console.log(time);
letcurrentTime=time<10?'0'+time:time;
that.setData({
recordingTimeqwe:time,
currentTime:currentTime,
currentLeft:that.data.currentLeft+65
})
}
,1000);
},
startRecord:function(){
if(this.data.startClick){
return
}
this.data.startClick=true
constoptions={
duration:10000,
sampleRate:44100,
numberOfChannels:1,
encodeBitRate:192000,
format:'aac',
frameSize:50
}
//开始倒计时
this.recordingTimer()
//开始录音
recorderManager.start(options)
},
shutRecord:function(){
recorderManager.stop()
this.setData({showhandle1:false,showhandle2:true,currentTime:'00'})
},
listenRecord:function(e){
//试听
letisplay=e.currentTarget.dataset.isplay;
backgroundAudioManager.title='试听欢迎语'
backgroundAudioManager.src=this.data.tempFilePath
this.setData({
showWaveView:true,
currentLeft:10,
currentTime:'00'
})
backgroundAudioManager.onPlay(()=>{
console.log("音乐播放开始")
})
backgroundAudioManager.onEnded(()=>{
console.log("音乐播放结束")
clearInterval(this.data.setInter1)
this.setData({currentLeft:10,showWaveView:false,currentTime:'00'})
})
backgroundAudioManager.play()
this.data.setInter1=setInterval(()=>{
lettime=parseInt(this.data.currentTime)+1
letcurrentTime=time<10?'0'+time:time;
//console.log(currentTime)
this.setData({
currentLeft:this.data.currentLeft+65,
currentTime:currentTime
})
},1000);
},
reRecord:function(){
clearInterval(this.data.setInter1)
this.setData({
showhandle1:true,
showhandle2:false,
voiceState:false,
tempFilePath:'',
showWaveView:false,
startClick:false,
currentLeft:10,
recordingTimeqwe:0,
currentTime:'00'
})
},
uploadVoice:function(){
letthat=this
this.setData({uploadState:true})
wx.uploadFile({
url:'https://example.weixin.qq.com/upload',//仅为示例，非真实的接口地址
filePath:this.data.tempFilePath,
name:'file',
header:{
"Content-type":"multiply/form-data"
},
formData:{
'time':this.data.recordingTimeqwe
},
success(res){
console.log('上传成功')
},
fail(res){
console.log('上传失败')
that.setData({uploadState:false})
}
})
},
/**
*生命周期函数--监听页面显示
*/
onShow:function(){
},
/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){
},
/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){
},
/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){
},
/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){
},
/**
*用户点击右上角分享
*/
onShareAppMessage:function(){
}
})

css文件

.servicePage{
font-family:"PingFangSC-Regular";
}
.top{
font-size:34rpx;
font-family:"PingFangSC-Medium";
color:#fff;
padding-left:60rpx;
display:flex;
align-items:center;
height:150rpx;
}
.content{
border-radius:36rpx36rpx00;
background:#fff;
padding:16rpx30rpx;
overflow-y:scroll;
}
.allService.title{
text-align:center;
}
.serviceList{
margin-top:300rpx;
display:flex;
justify-content:space-between;
padding:016rpx;
}
.handleView{
margin-top:300rpx;
display:flex;
/*align-items:center;*/
justify-content:center;
/*justify-content:space-between;*/
padding:0100rpx;
}
.CircleBtn{
width:100rpx;
height:100rpx;
color:#fff;
text-align:center;
line-height:100rpx;
border-radius:50%;
font-size:28rpx;
}
.green{
background-color:#3ed3ca;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.voiceLine{
position:relative;
background:#eee;
height:40px;
padding:010rpx;
overflow:hidden;
}
.voicePointer{
width:2rpx;
height:100rpx;
background:cornflowerblue;
position:absolute;
top:0;
left:10rpx;
}
.voiceBox{
display:flex;
align-items:center;
height:40px;
}
.line1{
height:1px;
background:cornflowerblue;
width:100rpx;
}
.Wave2{
height:40px;
}
.Wave3{
height:40px;
}
.voiceWave{
display:flex;
align-items:flex-end;
height:20px;
}
.voiceWave1{
display:flex;
align-items:flex-start;
height:20px;
}
.auItem{
width:1px;
margin-right:4rpx;
background:cornflowerblue;
height:2px;
}
.au1{
height:8px;
animation:audio11slinear.1sinfinite;
}
.au2{
height:6px;
animation:audio21slinear.1sinfinite;
}
.au3{
height:4px;
animation:audio31slinear.1sinfinite;
}
.au4{
height:8px;
animation:audio4.5slinear.2sinfinite;
}
.au5{
height:6px;
animation:audio5.5slinear.5sinfinite;
}
.au6{
height:4px;
animation:audio6.5slinear.2sinfinite;
}
@keyframesaudio1{
from{height:8px;}
to{height:6px;}
}
@keyframesaudio2{
from{height:6px;}
to{height:4px;}
}
@keyframesaudio3{
from{height:4px;}
to{height:2px;}
}
@keyframesaudio4{
from{height:6px;}
to{height:8px;}
}
@keyframesaudio5{
from{height:4px;}
to{height:6px;}
}
@keyframesaudio6{
from{height:2px;}
to{height:4px;}
}
.serviceList.box{
width:200rpx;
height:220rpx;
background:#eee;
padding:4rpx;
border-radius:8rpx;
}
.serviceList.boxview.free{
position:absolute;
left:-10rpx;
top:0;
width:108rpx;
height:42rpx;
line-height:42rpx!important;
padding:0;
}
.serviceList.boxview.freetext{
display:inline-block;
color:#fff;
position:absolute;
font-size:24rpx;
text-align:center;
width:108rpx;
top:-4rpx;
}
.box.freeimage{
width:108rpx;
height:42rpx;
}
.serviceList.boxview:first-child{
height:80rpx;
line-height:80rpx;
font-size:30rpx;
text-align:center;
}
.serviceList.boxview:last-child{
font-family:"PingFangSC-Semibold";
border-radius:008rpx8rpx;
height:140rpx;
background:#fff;
font-size:72rpx;
text-align:center;
line-height:135rpx;
vertical-align:top;
position:relative;
}
.serviceList.boxview:last-childtext{
font-size:26rpx;
}
.box.active{
background:#ffd458;
}
.box.activeview:last-child{
background:#fffbea;
}
.bottom{
position:fixed;
width:100%;
height:184rpx;
background:#fff;
box-shadow:0-2px5px0rgba(0,0,0,0.10);
bottom:0;
left:0;
display:flex;
justify-content:space-between;
align-items:center;
box-sizing:border-box;
padding:030rpx60rpx30rpx;
}
.bottom.leftview.all{
font-size:34rpx;
font-family:"PingFangSC-Semibold";
line-height:48rpx;
display:flex;
align-items:center;
margin-bottom:10rpx;
}
.bottom.leftview.agree{
font-size:24rpx;
display:flex;
align-items:center;
}
.bottom.leftview.agreetext{
color:#bbb;
}
.bottom.leftviewtext.colorBlue{
color:#419bf9;
}
.bottom.right{
width:200rpx;
background:#3ed3ca;
border-radius:40rpx;
line-height:80rpx;
text-align:center;
font-size:30rpx;
color:#fff;
}
.rightsInfo{
margin-top:60rpx;
padding-right:16rpx;
}
.rightsInfo::before{
display:table;
content:'';
}
.rightsInfo.title{
font-size:32rpx;
display:flex;
align-items:center;
letter-spacing:0.26px;
}
.rightsInfo.titleimage{
width:40rpx;
height:40rpx;
margin-right:14rpx;
}
.rightsInfo.rightsList{
display:flex;
align-items:center;
margin-top:40rpx;
}
.rightsInfo.rightsList.left{
width:80rpx;
height:80rpx;
margin-right:20rpx;
}
.rightsInfo.rightsList.leftimage{
width:80rpx;
height:80rpx;
}
.rightsInfo.rightsList.right.rightTitle{
font-family:"PingFangSC-Medium";
font-size:30rpx;
color:#333;
letter-spacing:0.24px;
line-height:24px;
}
.rightsInfo.rightsList.right.rightDes{
font-size:24rpx;
color:#a5a5a5;
letter-spacing:0;
}

总结

到此这篇关于微信小程序实现录制、试听、上传音频功能（带波形图）的文章就介绍到这了,更多相关微信小程序实现录制试听上传音频内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实现录制、试听、上传音频功能（带波形图）

热门推荐

随机推荐