-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmusic2.html
132 lines (127 loc) · 3.9 KB
/
music2.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MPlayer音乐播放器</title>
<link rel="stylesheet" href="css/mplayer.css">
<style>
.info {
font-family: "Microsoft Yahei";
text-align: center;
}
.info h1 {
font-weight: 400;
}
</style>
</head>
<body style="background-image:url(images/www.png);background-repeat:initial;">
<div class="mp">
<div class="mp-box">
<img src="img/mplayer_error.png" alt="music cover" class="mp-cover">
<div class="mp-info">
<p class="mp-name">燕归巢</p>
<p class="mp-singer">许嵩</p>
<p><span class="mp-time-current">00:00</span>/<span class="mp-time-all">00:00</span></p>
</div>
<div class="mp-btn">
<button class="mp-prev" title="上一首"></button>
<button class="mp-pause" title="播放"></button>
<button class="mp-next" title="下一首"></button>
<button class="mp-mode" title="播放模式"></button>
<div class="mp-vol">
<button class="mp-vol-img" title="静音"></button>
<div class="mp-vol-range" data-range_min="0" data-range_max="100" data-cur_min="80">
<div class="mp-vol-current"></div>
<div class="mp-vol-circle"></div>
</div>
</div>
</div>
<div class="mp-pro">
<div class="mp-pro-current"></div>
</div>
<div class="mp-menu">
<button class="mp-list-toggle"></button>
<button class="mp-lrc-toggle"></button>
</div>
</div>
<button class="mp-toggle">
<span class="mp-toggle-img"></span>
</button>
<div class="mp-lrc-box">
<ul class="mp-lrc"></ul>
</div>
<button class="mp-lrc-close"></button>
<div class="mp-list-box">
<ul class="mp-list-title"></ul>
<table class="mp-list-table">
<thead>
<tr>
<th>歌名</th>
<th>歌手</th>
<th>时长</th>
</tr>
</thead>
<tbody class="mp-list"></tbody>
</table>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="js/mplayer.js"></script>
<script src="js/mplayer-list.js"></script>
<script src="js/mplayer-functions.js"></script>
<script src="http://cdn.bootcss.com/jquery-nstslider/1.0.13/jquery.nstSlider.min.js"></script>
<script>
var modeText = ['顺序播放','单曲循环','随机播放','列表循环'];
var player = new MPlayer({
// 容器选择器名称
containerSelector: '.mp',
// 播放列表
songList: mplayer_song,
// 专辑图片错误时显示的图片
defaultImg: 'img/mplayer_error.png',
// 自动播放
autoPlay: true,
// 播放模式(0->顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认))
playMode:0,
playList:0,
playSong:0,
// 当前歌词距离顶部的距离
lrcTopPos: 34,
// 列表模板，用${变量名}$插入模板变量
listFormat: '<tr><td>${name}$</td><td>${singer}$</td><td>${time}$</td></tr>',
// 音量滑块改变事件名称
volSlideEventName:'change',
// 初始音量
defaultVolume:80
}, function () {
// 绑定事件
this.on('afterInit', function () {
console.log('播放器初始化完成，正在准备播放');
}).on('beforePlay', function () {
var $this = this;
var song = $this.getCurrentSong(true);
var songName = song.name + ' - ' + song.singer;
console.log('即将播放'+songName+'，return false;可以取消播放');
}).on('timeUpdate', function () {
var $this = this;
console.log('当前歌词：' + $this.getLrc());
}).on('end', function () {
var $this = this;
var song = $this.getCurrentSong(true);
var songName = song.name + ' - ' + song.singer;
console.log(songName+'播放完毕，return false;可以取消播放下一曲');
}).on('mute', function () {
var status = this.getIsMuted() ? '已静音' : '未静音';
console.log('当前静音状态：' + status);
}).on('changeMode', function () {
var $this = this;
var mode = modeText[$this.getPlayMode()];
$this.dom.container.find('.mp-mode').attr('title',mode);
console.log('播放模式已切换为：' + mode);
});
});
$(document.body).append(player.audio); // 测试用
setEffects(player);
</script>
</body>
</html>