微信小程序音乐播放器开发

2023-08-08 12:50:05 478

前言

这篇文章上一版本是用audio组件开发的播放器，随后反应音频加载速度慢的问题

又用小程序内置的背景音乐播放的方法写了一遍，逻辑是一样的逻辑，希望对大家有所帮助！











{{starttime}}

{{duration}}

js部分注意了：bugios播放时必须加title不然会报错导致音乐不播放

//index.js
//获取应用实例
constbgMusic=wx.getBackgroundAudioManager()
constapp=getApp()

Page({
data:{
isOpen:false,//播放开关
starttime:'00:00',//正在播放时长
duration:'06:41',//总时长
src:"http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
},
//播放
listenerButtonPlay:function(){
varthat=this
//bugios播放时必须加title不然会报错导致音乐不播放
bgMusic.title='此时此刻'
bgMusic.epname='此时此刻'
bgMusic.src=that.data.src;
bgMusic.onTimeUpdate(()=>{
//bgMusic.duration总时长bgMusic.currentTime当前进度
console.log(bgMusic.currentTime)
varduration=bgMusic.duration;
varoffset=bgMusic.currentTime;
varcurrentTime=parseInt(bgMusic.currentTime);
varmin="0"+parseInt(currentTime/60);
varmax=parseInt(bgMusic.duration);
varsec=currentTime%60;
if(sec<10){
sec="0"+sec;
};
varstarttime=min+':'+sec;/*00:00*/
that.setData({
offset:currentTime,
starttime:starttime,
max:max,
changePlay:true
})
})
//播放结束
bgMusic.onEnded(()=>{
that.setData({
starttime:'00:00',
isOpen:false,
offset:0
})
console.log("音乐播放结束");
})
bgMusic.play();
that.setData({
isOpen:true,
})
},
//暂停播放
listenerButtonPause(){
varthat=this
bgMusic.pause()
that.setData({
isOpen:false,
})
},
listenerButtonStop(){
varthat=this
bgMusic.stop()
},
//进度条拖拽
sliderChange(e){
varthat=this
varoffset=parseInt(e.detail.value);
bgMusic.play();
bgMusic.seek(offset);
that.setData({
isOpen:true,
})
},
//页面卸载时停止播放
onUnload(){
varthat=this
that.listenerButtonStop()//停止播放
console.log("离开")
},
})

css部分

/**index.wxss**/
.audiosBox{
width:92%;
margin:auto;
height:130rpx;
display:flex;
justify-content:space-between;
align-items:center;
background:#f6f7f7;
border-radius:10rpx;
}
/*按钮大小*/
.audioOpen{
width:70rpx;
height:70rpx;
border:2rpxsolid#4c9dee;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-left:20rpx;
}

image{
width:30rpx;
height:40rpx;
}
.image2{
margin-left:10%;
}
/*进度条长度*/
.slid{
flex:1;
position:relative;
}
.slidview{
display:flex;
justify-content:space-between;
}
.slidview>text:nth-child(1){
color:#4c9dee;
margin-left:6rpx;
}
.slidview>text:nth-child(2){
margin-right:6rpx;
}
slider{
width:520rpx;
margin:0;
margin-left:35rpx;
}
/*横向布局*/
.times{
width:100rpx;
text-align:center;
display:inline-block;
font-size:24rpx;
color:#999999;
margin-top:5rpx;
}
.titleview{
text-indent:2em;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

微信小程序音乐播放器开发

热门推荐

随机推荐