-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (87 loc) · 6.49 KB
/
index.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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Concept Album</title>
<link rel="stylesheet" href="main.min.css">
</head>
<body>
<div class="container">
<div class="cover left">
<div id="lyricer"></div>
</div>
<div class="cover right"></div>
<div class="controls">
<span id="lyric-id" class="fontawesome-music"></span>
<span id="start-id" class="fontawesome-play"></span>
<span class="fontawesome-random"></span>
</div>
<audio id="audio-id" src="https://dev.tencent.com/api/share/download/3f03e8c9-2187-454c-ba65-66e7d003a660" preload="metadata"></audio>
</div>
<script type="text/javascript" src="lyricer.min.js"></script>
<script type="text/javascript">
var text = "[00:00.000] 我们\n[00:01.000] 作词 : 葛大为\n[00:16.10]编曲:陈建骐 George Chen\n[00:17.17]\n[00:24.44]该说的 别说了\n[00:30.22]你懂得 就够了\n[00:35.86]真的有 某一种悲哀\n[00:40.98]连泪也不能流\n[00:44.06]只能 目送\n[02:30.19][00:48.82]我最大的遗憾\n[02:36.13][00:55.29]是你的遗憾 与我有关\n[02:42.54][01:01.51]没有句点 已经很完美了\n[02:47.27][01:06.10]何必误会 故事\n[02:50.67][01:08.91]没说完\n[02:55.20][01:13.87]还能做什么呢\n[03:01.41][01:20.36]我连 伤感 都是\n[03:05.48][01:24.43]奢侈的\n[03:08.13][01:27.11]我一想念 你就那么近\n[03:12.34][01:31.17]但终究 你都不能\n[03:15.39][01:34.23]陪我到 回不去的 远方\n[03:20.95][01:39.81]原来我很快乐\n[03:26.68][01:45.92]只是不愿承认\n[03:33.19][01:51.84]在我怀疑 世界时\n[03:39.45][01:58.31]你给过我 答案\n[03:45.73]我感觉到幸福\n[03:52.43]是看见你幸福\n[03:58.29]曾经亲手把时间变慢\n[04:03.18]可惜我们 没有等 我们\n[04:10.89]\n[04:11.47]吉他:董运昌 Dong Yun-Chang\n[04:12.14]弦乐编写:刘涵 Liu Hang\n[04:12.77]小一:卢思蒨 Lu Szu Chien\n[04:13.33]小二:曲静家 Chu ching chia\n[04:13.89]中提:牟启东 Wayne Mau\n[04:14.47]大提:刘涵(隐分子乐团)Liu Hang\n[04:14.99]录音室:Avon Studio ,皮老板录音室 Master P’s Studio\n[04:15.59]录音师:tsamchan , 林铂坚Johnny Lin\n[04:16.14]混音师:Simon Li@nOiz\n[04:16.62]制作企划统筹:葛大为David Ke\n";
var lrc = new Lyricer({"showLines": 1, "clickable": false});
var audio = document.getElementById("audio-id");
lrc.setLrc(text);
audio.addEventListener( "timeupdate", function() {
lrc.move(audio.currentTime);
});
</script>
<script type="text/javascript">
var Unfolding = (function(window) {
'use-strict';
function handle() {
var cover = document.querySelectorAll('.cover'),
els = document.getElementById("start-id"),
ela = document.getElementById("audio-id");
ell = document.getElementById("lyric-id"),
els.addEventListener("click", function t() {
if (els.classList.contains('fontawesome-play')){audio_play();}
else {
audio_pause();
};
});
ell.addEventListener("click", function t() {
if (ell.classList.contains('lyric-show')){ ell.classList.remove('lyric-show');lyricer.style.display = "none";}
else {
ell.classList.add('lyric-show');lyricer.style.display = "block";
};
});
// Unfold once it's ready
document.querySelector('.cover.right').classList.add('unfold');
function audio_play() {
ela.play();
els.classList.remove('fontawesome-play');
els.classList.add('fontawesome-pause');
}
function audio_pause() {
ela.pause();
els.classList.remove('fontawesome-pause');
els.classList.add('fontawesome-play');
}
[].slice.call(document.querySelectorAll('.cover')).forEach(function(cover, index) {
cover.addEventListener('click', function(event) {
event.preventDefault();
var right = document.querySelector('.cover.right');
// Fold
if(!right.classList.contains('fold')) {
document.querySelector('.cover.right').classList.add('fold');
document.querySelector('.cover.right').classList.remove('unfold');
}
// Unfold
else {
document.querySelector('.cover.right').classList.add('unfold');
document.querySelector('.cover.right').classList.remove('fold');
}
}, false);
});
}
// Public API
return {
cover: handle
}
})(window);
window.addEventListener ? window.addEventListener('load', Unfolding.cover, false) : window.onload = Unfolding.cover();
</script>
</body>
</html>