未分类

小程序-音乐播放器

微信小程序音乐播放器

主要功能

1.显示歌曲名称,作者,歌曲封面图,播放进度条,播放时间进度

2.控制音乐播放/暂停,音量大小,拖动指定位置播放,切换单曲/循环播放

效果图

image

歌曲数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
music_list: [{
name: '日落倾城',
author: '卡奇社',
src: 'http://image.onepeace.top/my_music_%E6%97%A5%E5%85%89%E5%80%BE%E5%9F%8E.mp3',
cover: '../image/another/music_bg_11.png'
},
{
name: '安河桥',
author: '宋东野',
src: 'http://image.onepeace.top/my_music_%E5%AE%89%E5%92%8C%E6%A1%A5.mp3',
cover: '../image/another/music_bg.jpg'
}]
}

布局

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
<view id="control-top">
<view id="head-box">
<image id="left-image" src="{{poster}}">
</image>
<view id="cover-image">
<image class="image-play {{!isPlay?'view_show':'view_hide'}}" bindtap="playMusic" src="../image/icon/music_play.png"></image>
<image class="image-play {{isPlay?'view_show':'view_hide'}}" bindtap="pauseMusic" src="../image/icon/music_pause.png"></image>
</view>
</view>
<view id="right-box">
<text id="music-name">{{name}}</text>
<view id="author-line">
<text style="font-size:24rpx;">{{author}}</text>
<image class="image-icon {{!singleCycle?'view_show':'view_hide'}}" bindtap="playWay" src="../image/icon/music_loop.png"></image>
<image class="image-icon {{singleCycle?'view_show':'view_hide'}}" bindtap="playWay" src="../image/icon/music_single.png"></image>
</view>
<slider id="progress-music" class="def-slider" max="{{slider_max}}" value="{{slider_value}}" bindchange="slider_change" activeColor="#d94240" block-size="12"></slider>
<view id="bottom">
<view>
<text>{{currentTime}}</text>
<text>/</text>
<text>{{duration}}</text>
</view>
<image class="image-icon {{!isSilence?'view_show':'view_hide'}}" src="../image/icon/music_voice.png" bindtap="setVoiceSilence"></image>
<image class="image-icon {{isSilence?'view_show':'view_hide'}}" src="../image/icon/music_silence.png" bindtap="setVoiceMax"></image>

<slider class="def-slider" max="10" value="{{voice_value}}" bindchange="voice_change" activeColor="#d94240 " block-size="12 " style="width:100rpx "></slider>
<image class="image-icon" bindtap="spreadList" src="../image/icon/music_list.png "></image>
</view>
</view>
</view>

样式调整

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
/* pages/music/music.wxss */

#control-top {
margin-top: 20rpx;
width: 700rpx;
height: 200rpx;
margin-left: 25rpx;
border-radius: 20rpx;
border: lightgrey;
border-style: solid;
border-width: 1px;
display: flex;
justify-content: space-between;
align-items: center;
}

#head-box {
display: flex;
align-items: center;
position: relative;
}

#cover-image {
position: absolute;
display: flex;
align-items: center;
}

.image-play {
opacity: 0.5;
width: 70rpx;
height: 70rpx;
margin: 0 60rpx;
}

#left-image {
width: 190rpx;
height: 190rpx;
}

#right-box {
width: 450rpx;
height: 180rpx;
flex-direction: column;
margin-right: 28rpx;
}

#music-name {
}

#author-line {
display: flex;
justify-content: space-between;
width: 100%;
height: 34rpx;
align-items: center;
}

.def-slider {
padding-top: 5rpx;
padding-bottom: 5rpx;
height: 28rpx;
margin: 0;
}

#progress-music {
margin-left: 10rpx;
width: 100%;
}

#bottom {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}

.image-icon {
width: 35rpx;
height: 35rpx;
}


.my_audio {
margin-top: 15rpx;
position: fixed;
top: 0;
}

.list-view {
margin-top: 20rpx;
height: 75vh;
}

.text-view {
width: 95%;
padding-left: 25rpx;
padding-right: 25rpx;
padding-top: 15rpx;
padding-bottom: 15rpx;
display: flex;
justify-content: space-between;
}

.music-name {
font-size: 30rpx;
color: #36282b;
}

.music-author {
font-size: 22rpx;
color: #7a7374;
}

.view_show {
display: block;
}

.view_hide {
display: none;
}

播放控制

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
// pages/music/music.js
var util = require('./util.js'); //引用外部的js文件
const my_audio = wx.createInnerAudioContext();
var second = 0; //时间参考
var currentMusicId = 0;
Page({
/**
* 页面的初始数据
*/
data: {
isPlay: false,
poster: '../image/another/music_bg_11.png',
name: '日光倾城',
author: '卡奇社',
src: 'http://image.onepeace.top/my_music_%E6%97%A5%E5%85%89%E5%80%BE%E5%9F%8E.mp3',
currentTime: '00:00', //当前播放时间(00:03)
duration: '00:00', //音乐时长(05:25)
slider_max: 100, //音乐进度条时长(秒)
slider_value: 0, //音乐进度条进度(秒)
voice_value: 10, //音量控制(0-10)
music_list: util.music_list,
isSilence: false, //是否静音
singleCycle: false, //是否单曲循环
spread:true
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
my_audio.onPlay(() => {
console.log('开始播放');
this.setData({
"isPlay": true
});
var dura = this.secondToTime(my_audio.duration);
setTimeout(function() {
that.setData({
"duration": dura,
"slider_max": parseInt(my_audio.duration)
});
}, 1000);

});
my_audio.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
});

my_audio.onPause(() => {
console.log('暂停播放');
this.setData({
"isPlay": false
});
});
my_audio.onStop((res) => {
console.log('音频停止');
this.setData({
"isPlay": false,
"slider_max": 100
});
});
my_audio.onEnded((res) => {
console.log('自然播放至结束位置');
var dura = this.secondToTime(my_audio.duration);
console.log("时长:" + dura);
this.setData({
"currentTime": dura,
"slider_max": 100
});
this.switchMusic();
});
my_audio.onCanplay((res) => {
console.log("监听音频进入可以播放状态的事件");

});
my_audio.onTimeUpdate((res) => {
var time = my_audio.currentTime;
//刷新音频时长
if (this.data.slider_max < 150) {
var dura = this.secondToTime(my_audio.duration);
// console.log("时长:" + dura);
this.setData({
"duration": dura,
"slider_max": parseInt(my_audio.duration)
});
}

if (time - second >= 1) {
// console.log(second);
second = parseInt(time);
// console.log("当前时长:" + second);
var cuTime = this.secondToTime(second);
this.setData({
"currentTime": cuTime,
"slider_value": second
});
}
});

},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
my_audio.autoplay = false;
my_audio.src = this.data.src;
// my_audio.loop = true;//循环播放
my_audio.play();
my_audio.pause();
},

/**
* 生命周期函数--监听页面显示
*/
onShow: function() {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {

},
/**切换歌曲 */
select_music: function(e) {
second = 0;
// my_audio.stop();
// my_audio.offTimeUpdate();
var name = e.currentTarget.dataset['name'];
var author = e.currentTarget.dataset['author'];
var src = e.currentTarget.dataset['src'];
var cover = e.currentTarget.dataset['cover'];
var index = e.currentTarget.dataset['index'];
currentMusicId = index;
console.log(name);
this.setData({
"poster": cover,
"name": name,
"author": author,
"src": src,
"slider_max": 100
});
my_audio.src = this.data.src;
my_audio.play();

},
playMusic: function() {
my_audio.play();
},
pauseMusic: function() {
my_audio.pause();
},
/**秒==> '00:00' */
secondToTime: function(result) {
var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
return result = m + ":" + s;
},
/**进度条拖动 */
slider_change: function(result) {
var step = result.detail.value;
second = step;
// var dura = this.secondToTime(my_audio.duration);
// console.log("时长:" + dura);
// this.setData({
// "slider_max": parseInt(my_audio.duration),
// "duration": dura
// });
my_audio.pause();
my_audio.seek(step);
setTimeout(function() {
my_audio.play();
}, 1000);
},
/**调整音量 */
voice_change: function(result) {
var step = result.detail.value;
// console.log("拖动:" + step);
var curVoice = parseFloat(step / 10);
// console.log(curVoice);
my_audio.volume = curVoice;
if (step > 0) {
this.setData({
"isSilence": false,
})
} else if (step == 0) {
this.setData({
"isSilence": true,
})
}
},
/**设置静音 */
setVoiceSilence: function() {
my_audio.volume = 0;
this.setData({
"isSilence": true,
"voice_value": 0
})
},
setVoiceMax: function() {
my_audio.volume = 1;
this.setData({
"isSilence": false,
"voice_value": 10
})
},
/**自动播放下一首 */
switchMusic: function() {
var musicSize = util.music_list.length;
console.log("数量:" + musicSize);
second = 0;
if (this.data.singleCycle) {
var itemMusic = util.music_list[currentMusicId];
console.log(itemMusic.name);
this.setData({
"poster": itemMusic.cover,
"name": itemMusic.name,
"author": itemMusic.author,
"src": itemMusic.src,
"slider_value": 0
});
my_audio.src = this.data.src;
my_audio.play();

} else {
if (currentMusicId >= (musicSize - 1)) {
//列表最后一首,播放第一首
var itemMusic = util.music_list[0];
console.log(itemMusic.name);
currentMusicId = 0;
this.setData({
"poster": itemMusic.cover,
"name": itemMusic.name,
"author": itemMusic.author,
"src": itemMusic.src,
"slider_value": 0
});
my_audio.src = this.data.src;
my_audio.play();
} else {
//播放下一首
var itemMusic = util.music_list[currentMusicId + 1];
console.log(itemMusic.name);
currentMusicId++;
this.setData({
"poster": itemMusic.cover,
"name": itemMusic.name,
"author": itemMusic.author,
"src": itemMusic.src,
"slider_value": 0
});
my_audio.src = this.data.src;
my_audio.play();
}
}
},
playWay: function() {
if (this.data.singleCycle == true) {
this.setData({
"singleCycle": false
});
} else {
this.setData({
"singleCycle": true
});
}
}, spreadList:function(){
if (this.data.spread == true) {
this.setData({
"spread": false
});
} else {
this.setData({
"spread": true
});
}
},
})

代码链接https://github.com/zccguagua/Leap-Orange

分享到