微信小程序播放音乐(仿QQ音乐)_仿qq音乐微信小程序

.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>
1
2
3
4
5
6
7
8
9
10
11
12
13

.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

.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)
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

写的比较简单，完成了基本功能，对你有帮助的话记得点赞。


有什么问题欢迎评论留言，我会及时回复你的