Skip to content

Commit 3c66d80

Browse files
DIYgodDIYgod
committed
Show LRC!!!
1 parent a1192ac commit 3c66d80

9 files changed

Lines changed: 304 additions & 52 deletions

File tree

‎README.md‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ npm install aplayer
2323

2424
## Usage
2525

26-
The following HTML structure is used for APlayer:
26+
### The following HTML structure is used for APlayer:
2727

2828
```
2929
<link rel="stylesheet" href="APlayer.css">
@@ -35,13 +35,14 @@ The following HTML structure is used for APlayer:
3535
<script src="APlayer.js"></script>
3636
```
3737

38-
And this is how the APlayer is initialized:
38+
### And this is how the APlayer is initialized:
3939

4040
```
4141
var ap = new APlayer({
4242
element: document.getElementById('player1'),
4343
narrow: false,
4444
autoplay: true,
45+
showlrc: false,
4546
music: {
4647
title: 'Preparation',
4748
author: 'Hans Zimmer/Richard Harvey',
@@ -52,12 +53,47 @@ var ap = new APlayer({
5253
ap.init();
5354
```
5455

55-
API
56+
### With lrc
57+
58+
Using [LRC format](https://en.wikipedia.org/wiki/LRC_(file_format))
59+
60+
HTML:
61+
62+
```
63+
<link rel="stylesheet" href="APlayer.css">
64+
<!-- ... -->
65+
<div id="player1" class="aplayer">
66+
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
67+
<pre class="aplayer-lrc-content">
68+
[ti:平凡之路]
69+
[ar:朴树]
70+
[al:《后会无期》主题歌]
71+
[by:周敏]
72+
73+
[00:00.00]平凡之路 - 朴树
74+
[00:04.01]作词：韩寒 朴树
75+
[00:08.02]作曲：朴树 编曲：朴树
76+
[00:12.02]徘徊着的 在路上的
77+
[00:17.37]你要走吗
78+
[00:23.20]易碎的 骄傲着
79+
[00:28.75]那也曾是我的模样
80+
<!-- ... -->
81+
</pre>
82+
</div>
83+
<!-- ... -->
84+
<script src="APlayer.js"></script>
85+
```
86+
87+
JS:
88+
89+
Init Option: `showlrc: false`
90+
91+
### API
5692

5793
+ `ap.play()`
5894
+ `ap.pause()`
5995

60-
Development
96+
### Development
6197

6298
```
6399
gulp

‎demo/index.html‎

Lines changed: 91 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,82 @@ <h1>APlayer</h1>
5151
<h2>Wow, such a beautiful html5 music player</h2>
5252
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/APlayer" target="_blank">GitHub</a>. Licensed MIT.</p>
5353
<hr>
54-
<h3>Wide style and autoplay</h3>
54+
<h3>With lyrics</h3>
55+
<div id="player3" class="aplayer">
56+
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
57+
<pre class="aplayer-lrc-content">
58+
[ti:平凡之路]
59+
[ar:朴树]
60+
[al:《后会无期》主题歌]
61+
[by:周敏]
62+
63+
[00:00.00]平凡之路 - 朴树
64+
[00:04.01]作词：韩寒 朴树
65+
[00:08.02]作曲：朴树 编曲：朴树
66+
[00:12.02]徘徊着的 在路上的
67+
[00:17.37]你要走吗
68+
[00:23.20]易碎的 骄傲着
69+
[00:28.75]那也曾是我的模样
70+
[00:34.55]沸腾着的 不安着的
71+
[00:40.26]你要去哪
72+
[00:46.00]谜一样的 沉默着的
73+
[00:51.75]故事你真的在听吗
74+
[00:56.25]我曾经跨过山和大海
75+
[00:59.55]也穿过人山人海
76+
[01:02.70]我曾经拥有着一切
77+
[01:05.00]转眼都飘散如烟
78+
[01:07.75]我曾经失落失望失掉所有方向
79+
[01:13.46]直到看见平凡才是唯一的答案
80+
[01:31.70]当你仍然
81+
[01:33.10]还在幻想
82+
[01:37.40]你的明天
83+
[01:43.00]她会好吗 还是更烂
84+
[01:49.78]对我而言是另一天
85+
[01:53.33]我曾经毁了我的一切
86+
[01:56.54]只想永远地离开
87+
[01:59.82]我曾经堕入无边黑暗
88+
[02:02.14]想挣扎无法自拔
89+
[02:04.79]我曾经像你像他像那野草野花
90+
[02:10.54]绝望着 渴望着
91+
[02:13.54]也哭也笑平凡着
92+
[03:03.38]向前走 就这么走
93+
[03:06.23]就算你被给过什么
94+
[03:09.08]向前走 就这么走
95+
[03:11.83]就算你被夺走什么
96+
[03:14.78]向前走 就这么走
97+
[03:17.58]就算你会错过什么
98+
[03:20.33]向前走 就这么走
99+
[03:23.13]就算你会
100+
[03:25.78]我曾经跨过山和大海
101+
[03:28.14]也穿过人山人海
102+
[03:30.44]我曾经拥有着一切
103+
[03:33.69]转眼都飘散如烟
104+
[03:36.24]我曾经失落失望失掉所有方向
105+
[03:42.04]直到看见平凡才是唯一的答案
106+
[03:47.69]我曾经毁了我的一切
107+
[03:50.84]只想永远地离开
108+
[03:53.39]我曾经堕入无边黑暗
109+
[03:56.29]想挣扎无法自拔
110+
[03:59.04]我曾经像你像他像那野草野花
111+
[04:04.79]绝望着 渴望着 也哭也笑平凡着
112+
[04:10.64]我曾经跨过山和大海
113+
[04:13.54]也穿过人山人海
114+
[04:16.14]我曾经问遍整个世界
115+
[04:19.49]从来没得到答案
116+
[04:22.88]我不过像你像他像那野草野花
117+
[04:27.64]冥冥中这是我 唯一要走的路啊
118+
[04:34.65]时间无言
119+
[04:36.15]如此这般
120+
[04:40.30]明天已在眼前
121+
[04:46.45]风吹过的 路依然远
122+
[04:51.55]你的故事讲到了哪
123+
</pre>
124+
</div>
125+
<h3>Wide style</h3>
55126
<div id="player1" class="aplayer">
56127
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
57128
</div>
58-
<h3>Narrow style and no autoplay</h3>
129+
<h3>Narrow style</h3>
59130
<div id="player2" class="aplayer">
60131
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
61132
</div>
@@ -65,12 +136,12 @@ <h3>Narrow style and no autoplay</h3>
65136
var ap1 = new APlayer({
66137
element: document.getElementById('player1'),
67138
narrow: false,
68-
autoplay: true,
139+
autoplay: false,
69140
music: {
70141
title: 'Preparation',
71142
author: 'Hans Zimmer/Richard Harvey',
72-
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
73-
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
143+
url: 'Preparation.mp3',
144+
pic: 'Preparation.jpg'
74145
}
75146
});
76147
ap1.init();
@@ -81,11 +152,24 @@ <h3>Narrow style and no autoplay</h3>
81152
music: {
82153
title: 'Preparation',
83154
author: 'Hans Zimmer/Richard Harvey',
84-
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
85-
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
155+
url: 'Preparation.mp3',
156+
pic: 'Preparation.jpg'
86157
}
87158
});
88159
ap2.init();
160+
var ap3 = new APlayer({
161+
element: document.getElementById('player3'),
162+
narrow: false,
163+
autoplay: true,
164+
showlrc: true,
165+
music: {
166+
title: '平凡之路',
167+
author: '朴树',
168+
url: '平凡之路.mp3',
169+
pic: '平凡之路.jpg'
170+
}
171+
});
172+
ap3.init();
89173
</script>
90174
</body>
91175
</html>

‎demo/平凡之路.jpg‎

60.7 KB
Loading

‎demo/平凡之路.mp3‎

12 MB
Binary file not shown.

‎dist/APlayer.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)