<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery歌词同步的音乐播放器插件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>
<div class="container">
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<h1>APlayer</h1>
<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: 'Sugar',
author: 'Maroon 5',
url: 'music/Sugar.mp3',
pic: 'music/Maroon5.jpg'
}
});
ap1.init();
var ap2 = new APlayer({
element: document.getElementById('player2'),
narrow: true,
autoplay: false,
showlrc: false,
music: {
title: 'Sugar',
author: 'Maroon 5',
url: 'music/Sugar.mp3',
pic: 'music/Maroon5.jpg'
}
});
ap2.init();
var ap3 = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: false,
showlrc: true,
music: {
title: '平凡之路',
author: '朴树',
url: 'music/Sugar.mp3',
pic: 'music/pf.jpg'
}
});
ap3.init();
</script>
<div style="text-align:center;clear:both;margin-top:50px">
<script src="/gg_bd_ad_720x90-2.js" type="text/javascript"></script>
</div>
</body>
</html>
jQuery歌词同步的音乐播放器插件 精巧实用
需积分: 10 126 浏览量
2016-01-03
19:19:55
上传
评论
收藏 565KB RAR 举报
jquery-audio-player-lyrics.rar （15个子文件） 
jquery-audio-player-lyrics 
index.html 5KB src 
APlayer.js 13KB font aplayer-fontello.ttf 6KB aplayer-fontello.eot 6KB aplayer-fontello.woff 4KB
aplayer-fontello.svg 4KB music Sugar.mp3 461KB
pf.jpg 61KB Maroon5.jpg 17KB dist APlayer.min.css 7KB font aplayer-fontello.ttf 6KB aplayer-fontello.eot 6KB aplayer-fontello.woff 4KB aplayer-fontello.svg 4KB APlayer.min.js 8KB资源评论
