-
Notifications
You must be signed in to change notification settings - Fork 0
/
list4.html
98 lines (92 loc) · 4.73 KB
/
list4.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nhạc trẻ</title>
<meta content="width=device-width, initial-scale=0.6" name="viewport">
<style>
body { color: #666; font-family: sans-serif; line-height: 1.4; }
h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }
h1 em { font-style: normal; color: #999; }
a { color: #888; text-decoration: none; }
#wrapper { width: 400px; margin: 40px auto; }
ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
li.playing a { color: #000; }
li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }
#shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
#shortcuts div { width: 460px; margin: 0px auto; }
#shortcuts h1 { margin: 0px 0px 6px; }
#shortcuts p { margin: 0px 0px 18px; }
#shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
@media screen and (max-device-width: 480px) {
#wrapper { position: relative; left: -3%; }
#shortcuts { display: none; }
}
</style>
<script src="./audiojs/jquery.js"></script>
<script src="./audiojs/audio.min.js"></script>
<script>
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Nhạc đám cưới<em>(2017)</em></h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="https://raw.githubusercontent.com/luyentm/music/master/mp3/nhaccuoi/BeautifulInWhite.mp3">Beautiful In White</a></li>
<li><a href="#" data-src="https://raw.githubusercontent.com/luyentm/music/master/mp3/nhaccuoi/BucThuTinhDauTien.mp3">Bức thư tình đầu tiên</a></li>
<li><a href="#" data-src="https://raw.githubusercontent.com/luyentm/music/master/mp3/nhaccuoi/CoDau.mp3">Cô dâu</a></li>
<li><a href="#" data-src="https://raw.githubusercontent.com/luyentm/music/master/mp3/nhaccuoi/Despacito.mp3">Despacito</a></li>
<li><a href="#" data-src="https://raw.githubusercontent.com/luyentm/music/master/mp3/nhaccuoi/QuaDemNay.mp3">Qua đêm nay</a></li>
<li><a href="#" data-src="https://raw.githubusercontent.com/luyentm/music/master/mp3/nhaccuoi/UntilYou.mp3">Until You</a></li>
</ol>
</div>
</body>
</html>