175 lines
7.1 KiB
HTML
175 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>APlayer Demo</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="../dist/APlayer.min.css">
|
||
<style>
|
||
body {
|
||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
}
|
||
.container {
|
||
max-width: 32rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
h1 {
|
||
font-size: 54px;
|
||
color: #333;
|
||
margin: 30px 0 10px;
|
||
}
|
||
h2 {
|
||
font-size: 22px;
|
||
color: #555;
|
||
}
|
||
h3 {
|
||
font-size: 24px;
|
||
color: #555;
|
||
}
|
||
hr {
|
||
display: block;
|
||
width: 7rem;
|
||
height: 1px;
|
||
margin: 2.5rem 0;
|
||
background-color: #eee;
|
||
border: 0;
|
||
}
|
||
a {
|
||
color: #08c;
|
||
text-decoration: none;
|
||
}
|
||
p {
|
||
font-size: 18px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a href="https://github.com/DIYgod/APlayer" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
|
||
<div class="container">
|
||
<h1>APlayer</h1>
|
||
<h2>Wow, such a beautiful html5 music player</h2>
|
||
<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>
|
||
<hr>
|
||
<h3>With lyrics</h3>
|
||
<div id="player3" class="aplayer">
|
||
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
|
||
<pre class="aplayer-lrc-content">
|
||
[ti:平凡之路]
|
||
[ar:朴树]
|
||
[al:《后会无期》主题歌]
|
||
[by:周敏]
|
||
|
||
[00:00.00]平凡之路 - 朴树
|
||
[00:04.01]作词：韩寒 朴树
|
||
[00:08.02]作曲：朴树 编曲：朴树
|
||
[00:12.02]徘徊着的 在路上的
|
||
[00:17.37]你要走吗
|
||
[00:23.20]易碎的 骄傲着
|
||
[00:28.75]那也曾是我的模样
|
||
[00:34.55]沸腾着的 不安着的
|
||
[00:40.26]你要去哪
|
||
[00:46.00]谜一样的 沉默着的
|
||
[00:51.75]故事你真的在听吗
|
||
[00:56.25]我曾经跨过山和大海
|
||
[00:59.55]也穿过人山人海
|
||
[01:02.70]我曾经拥有着一切
|
||
[01:05.00]转眼都飘散如烟
|
||
[01:07.75]我曾经失落失望失掉所有方向
|
||
[01:13.46]直到看见平凡才是唯一的答案
|
||
[01:31.70]当你仍然
|
||
[01:33.10]还在幻想
|
||
[01:37.40]你的明天
|
||
[01:43.00]她会好吗 还是更烂
|
||
[01:49.78]对我而言是另一天
|
||
[01:53.33]我曾经毁了我的一切
|
||
[01:56.54]只想永远地离开
|
||
[01:59.82]我曾经堕入无边黑暗
|
||
[02:02.14]想挣扎无法自拔
|
||
[02:04.79]我曾经像你像他像那野草野花
|
||
[02:10.54]绝望着 渴望着
|
||
[02:13.54]也哭也笑平凡着
|
||
[03:03.38]向前走 就这么走
|
||
[03:06.23]就算你被给过什么
|
||
[03:09.08]向前走 就这么走
|
||
[03:11.83]就算你被夺走什么
|
||
[03:14.78]向前走 就这么走
|
||
[03:17.58]就算你会错过什么
|
||
[03:20.33]向前走 就这么走
|
||
[03:23.13]就算你会
|
||
[03:25.78]我曾经跨过山和大海
|
||
[03:28.14]也穿过人山人海
|
||
[03:30.44]我曾经拥有着一切
|
||
[03:33.69]转眼都飘散如烟
|
||
[03:36.24]我曾经失落失望失掉所有方向
|
||
[03:42.04]直到看见平凡才是唯一的答案
|
||
[03:47.69]我曾经毁了我的一切
|
||
[03:50.84]只想永远地离开
|
||
[03:53.39]我曾经堕入无边黑暗
|
||
[03:56.29]想挣扎无法自拔
|
||
[03:59.04]我曾经像你像他像那野草野花
|
||
[04:04.79]绝望着 渴望着 也哭也笑平凡着
|
||
[04:10.64]我曾经跨过山和大海
|
||
[04:13.54]也穿过人山人海
|
||
[04:16.14]我曾经问遍整个世界
|
||
[04:19.49]从来没得到答案
|
||
[04:22.88]我不过像你像他像那野草野花
|
||
[04:27.64]冥冥中这是我 唯一要走的路啊
|
||
[04:34.65]时间无言
|
||
[04:36.15]如此这般
|
||
[04:40.30]明天已在眼前
|
||
[04:46.45]风吹过的 路依然远
|
||
[04:51.55]你的故事讲到了哪
|
||
</pre>
|
||
</div>
|
||
<h3>Wide style</h3>
|
||
<div id="player1" class="aplayer">
|
||
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
|
||
</div>
|
||
<h3>Narrow style</h3>
|
||
<div id="player2" class="aplayer">
|
||
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
|
||
</div>
|
||
</div>
|
||
<script src="../dist/APlayer.min.js"></script>
|
||
<script>
|
||
var ap1 = new APlayer({
|
||
element: document.getElementById('player1'),
|
||
narrow: false,
|
||
autoplay: false,
|
||
music: {
|
||
title: 'Preparation',
|
||
author: 'Hans Zimmer/Richard Harvey',
|
||
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
|
||
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
|
||
}
|
||
});
|
||
ap1.init();
|
||
var ap2 = new APlayer({
|
||
element: document.getElementById('player2'),
|
||
narrow: true,
|
||
autoplay: false,
|
||
music: {
|
||
title: 'Preparation',
|
||
author: 'Hans Zimmer/Richard Harvey',
|
||
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
|
||
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
|
||
}
|
||
});
|
||
ap2.init();
|
||
var ap3 = new APlayer({
|
||
element: document.getElementById('player3'),
|
||
narrow: false,
|
||
autoplay: true,
|
||
showlrc: true,
|
||
music: {
|
||
title: '平凡之路',
|
||
author: '朴树',
|
||
url: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.mp3',
|
||
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.jpg'
|
||
}
|
||
});
|
||
ap3.init();
|
||
</script>
|
||
</body>
|
||
</html> |