效果图如下所示
.wxml
<image mode="widthFix" class="music-image" src="{{mush[number].coverImgUrl}}"></image>
<view class="music-title">{{mush[number].title}}</view>
<view class="music-name">{{mush[number].name}}</view>
<view class="music-button">
<view bindtap="song" data-song="last">上一首</view>
<view bindtap="music">{{play?'暂停':'播放'}}</view>
<view bindtap="song" data-song="next">下一首</view>
</view>
<view class="cu-progress">
<view class="cu-prucin" style="width:{{widthx}}%"></view>
<view class="cu-left">{{playback}}</view>
<view class="cu-right">{{duration}}</view>
</view>
.wxss
page{
background-image:linear-gradient(45deg, #FBE7E5, #65322F);
}
view,image{
box-sizing: border-box;
}
.music-image{
width: 88%;
margin:5% 6% 3% 6%;
border-radius: 30rpx;
}
.music-title{
width: 100%;
padding: 0 6% 3% 6%;
font-size: 42rpx;
font-weight: 700;
color: #fff;
}
.music-name{
width: 100%;
padding: 0 6% 5% 6%;
font-size: 24rpx;
color: rgba(240, 240, 240, 0.8);
}
.music-button{
width: 100%;
float: left;
overflow: hidden;
padding: 0 6% 0 3%;
}
.music-button>view{
width: 30.33%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #fff;
margin-left: 3%;
float: left;
overflow: hidden;
border-radius: 10rpx;
font-size: 24rpx;
}
.cu-progress{
height: 6rpx;
width: 90%;
float: left;
background-color: rgba(240, 240, 240, 0.2);
margin: 5% 5% 0 5%;
border-radius: 20rpx;
position: relative;
}
.cu-prucin{
height: 100%;
background-color: #fff;
float: left;
position: relative;
}
.cu-prucin::after{
border-radius: 50%;
background: white;
position: absolute;
right: 0rpx;
content: '';
display: block;
margin: calc((6rpx - 14rpx)/2);
width: 14rpx;
height: 14rpx;
}
.cu-left{
position: absolute;
left: 0;
margin-top: 16rpx;
color: rgba(240, 240, 240, 0.8);
font-size: 22rpx;
}
.cu-right{
position: absolute;
right: 0;
margin-top: 16rpx;
color: rgba(240, 240, 240, 0.4);
font-size: 22rpx;
}
.js
Page({
data: {
mush:[
{ dataUrl: 'https://sg-sycdn.kuwo.cn/0aa7401fc21b9471772053f52b7b114b/5ea69207/resource/n2/51/99/2920279725.mp3', title: '大眠（完整版）', coverImgUrl: 'http://img3.kuwo.cn/star/albumcover/300/27/41/2794992887.jpg', name:'王茗' },
{ dataUrl: 'https://win-web-ra01-sycdn.kuwo.cn/0e5e32d3df6ce1e6539dba4737a1fbb3/5ea6921a/resource/n1/128/59/23/92451869.mp3', title: '说谎', coverImgUrl: 'http://img4.kuwo.cn/star/albumcover/300/19/4/3819650566.jpg', name: '林宥嘉' },
{ dataUrl: 'https://nb01-sycdn.kuwo.cn/c17342605aaa3cca9cf57d8818e82dd2/5ea6922a/resource/n2/9/51/3345777648.mp3', title: '吻得太逼真', coverImgUrl:'http://img2.kuwo.cn/star/albumcover/300/53/99/3583178904.jpg',name:'张敬轩' }
],
number:'0',
interval:'',
widthx:'0',
duration:'',
playback:'',
play:false,
bgmusic:'',
},
onShow:function(e){
let that = this
setTimeout(function () {
that.data.bgmusic.pause();
},1000)
},
onLoad: function (options) {
let that = this
wx.playBackgroundAudio({
dataUrl: that.data.mush[that.data.number].dataUrl,
title: that.data.mush[that.data.number].title,
coverImgUrl: that.data.mush[that.data.number].coverImgUrl,
})
that.setData({
bgmusic: wx.getBackgroundAudioManager()
})
that.data.bgmusic.play();
setTimeout(function () {
if (getCurrentPages().length != 0) {
getCurrentPages()[getCurrentPages().length - 1].scheduled()
}
},300)
},
music:function(e){
let that = this
if(!that.data.play){
that.data.bgmusic.play();
if (getCurrentPages().length != 0) {
getCurrentPages()[getCurrentPages().length - 1].scheduled()
}
}else{
that.data.bgmusic.pause();
clearInterval(that.data.interval)
}
that.setData({
play: !that.data.play,
})
},
song:function(e){
let that = this
let song = e.currentTarget.dataset.song
if(song == 'next'){
if (that.data.number < (that.data.mush.length-1)){
that.data.number++
}else{
that.data.number = 0
}
} else if (song == 'last'){
if (0 < that.data.number) {
that.data.number--
} else {
that.data.number = (that.data.mush.length - 1)
}
}else{
wx.showToast({
title: '系统异常~',
icon: 'none',
duration: 3000
})
}
that.setData({
number: that.data.number,
play: true,
widthx: '0',
duration:'',
})
if (getCurrentPages().length != 0) {
getCurrentPages()[getCurrentPages().length - 1].onLoad()
}
},
scheduled: function (e) {
let that = this
that.data.interval = setInterval(function () {
let a = '00'
let b = '00'
wx.getBackgroundAudioPlayerState({
success(res) {
if (res.status == '2' && that.data.widthx == '100.00') {
if (that.data.number < (that.data.mush.length - 1)) {
that.data.number++
} else {
that.data.number = 0
}
that.setData({
number: that.data.number,
play: true,
widthx: '0',
duration: '',
})
if (getCurrentPages().length != 0) {
getCurrentPages()[getCurrentPages().length - 1].onLoad()
}
}
that.data.widthx = (res.currentPosition / (res.duration / 100)).toFixed(2)
if (res.currentPosition > 59) {
a = parseInt(res.currentPosition / 60) ? parseInt(res.currentPosition / 60) : '00'
b = res.currentPosition - (a * 60) ? res.currentPosition - (a * 60) : '00'
} else {
a = '00'
b = res.currentPosition ? res.currentPosition : '00'
}
a == undefined ? '00' : a
if (JSON.stringify(a).length < 2) {
a = '0' + JSON.stringify(a)
}
b == undefined ? '00' : b
if (JSON.stringify(b).length < 2) {
b = '0' + JSON.stringify(b)
}
that.data.play = res.status == 1 ? true : false
if (that.data.duration == '' || that.data.duration == '00:00') {
let c = parseInt(res.duration / 60) ? parseInt(res.duration / 60) : '00'
let d = res.duration - (c * 60) ? res.duration - (c * 60) : '00'
if (JSON.stringify(c).length < 2) {
c = '0' + JSON.stringify(c)
}
if (JSON.stringify(d).length < 2) {
d = '0' + JSON.stringify(d)
}
that.setData({
duration: c + ':' + d,
})
}
that.setData({
widthx: that.data.widthx,
playback: a + ':' + b,
play: that.data.play,
})
}
})
}, 300)
},
})
写的比较简单，完成了基本功能，对你有帮助的话记得点赞。
有什么问题欢迎评论留言，我会及时回复你的
原创文章 75
获赞 87
访问量 1万+