172 lines
7.8 KiB
HTML
172 lines
7.8 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" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
|
<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">
|
|
<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>
|
|
<h3>Narrow style</h3>
|
|
<div id="player2" class="aplayer"></div>
|
|
</div>
|
|
<script src="../dist/APlayer.min.js"></script>
|
|
<script>
|
|
var ap1 = new APlayer({
|
|
element: document.getElementById('player1'),
|
|
narrow: false,
|
|
autoplay: false,
|
|
showlrc: 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,
|
|
showlrc: 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> |