以下是 jQuery歌词同步MP3播放器代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery歌词同步MP3播放器代码</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">
<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/covers/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/covers/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>
</body>
</html>
JS代码(APlayer.min.js):
function APlayer(e){
if(!("music"in e&&"title"in e.music&&"author"in e.music&&"url"in e.music&&"pic"in e.music))throw"APlayer Error:Music,music.title,music.author,music.url,music.pic are required in options";
if(null===e.element)throw"APlayer Error:element option null";
this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);
var a={
element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1}
;
for(var t in a)a.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&(e[t]=a[t]);
this.option=e}
APlayer.prototype.init=function(){
function e(e){
var a=e||window.event,i=(a.clientX-t(p.bar))/y;
i=i>0?i:0,i=1>i?i:1,p.updateBar.call(p,"played",i,"width"),p.option.showlrc&&p.updateLrc.call(p,parseFloat(p.playedBar.style.width)/100*p.audio.duration),p.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=p.secondToTime(i*p.audio.duration)}
function a(){
document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),p.audio.currentTime=parseFloat(p.playedBar.style.width)/100*p.audio.duration,p.play()}
function t(e){
for(var a,t=e.offsetLeft,i=e.offsetParent;
null!==i;
)t+=i.offsetLeft,i=i.offsetParent;
return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}
function i(e){
for(var a,t=e.offsetTop,i=e.offsetParent;
null!==i;
)t+=i.offsetTop,i=i.offsetParent;
return a=document.body.scrollTop+document.documentElement.scrollTop,t-a}
if(this.element=this.option.element,this.music=this.option.music,this.option.showlrc){
this.lrcTime=[],this.lrcLine=[];
for(var l=this.element.getElementsByClassName("aplayer-lrc-content")[0].innerHTML,s=l.split(/\n/),r=/\[(\d{
2}
):(\d{
2}
)\.(\d{
2}
)]/,n=/](.*)$/,o=/\[[A-Za-z]+:/,d=0;
d<s.length;
d++){
s[d]=s[d].replace(/^\s+|\s+$/g,"");
var c=r.exec(s[d]),u=n.exec(s[d]);
if(c&&u&&!n.exec(u[1]))this.lrcTime.push(60*parseInt(c[1])+parseInt(c[2])+parseInt(c[3])/100),this.lrcLine.push(u[1]);
else if(s[d]&&!o.exec(s[d]))throw"APlayer Error:lrc format error:should be like `[mm:ss.xx]lyric`:"+s[d]}
}
if(this.element.innerHTML='<div class="aplayer-pic"><img src="'+this.music.pic+'"><div class="aplayer-button aplayer-pause aplayer-hide"><i class="demo-icon aplayer-icon-pause"></i></div><div class="aplayer-button aplayer-play"><i class="demo-icon aplayer-icon-play"></i></div></div><div class="aplayer-info"><div class="aplayer-music"><span class="aplayer-title">'+this.music.title+'</span><span class="aplayer-author"> - (＞﹏＜)加载中,好累的说...</span></div><div class="aplayer-lrc"><div class="aplayer-lrc-contents" style="transform:translateY(0);
"></div></div><div class="aplayer-controller"><div class="aplayer-bar-wrap"><div class="aplayer-bar"><div class="aplayer-loaded" style="width:0"></div><div class="aplayer-played" style="width:0"><span class="aplayer-thumb"></span></div></div></div><div class="aplayer-time"> - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">(oﾟ▽ﾟ)</span><div class="aplayer-volume-wrap"><i class="demo-icon aplayer-icon-volume-down"></i><div class="aplayer-volume-bar-wrap"><div class="aplayer-volume-bar"><div class="aplayer-volume" style="height:80%"></div></div></div></div></div></div></div>',this.option.showlrc){
this.element.classList.add("aplayer-withlrc");
var m="";
for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],d=0;
d<this.lrcLine.length;
d++)m+="<p>"+this.lrcLine[d]+"</p>";
this.lrcContents.innerHTML=m,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current")}
this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.loop=!0,this.audio.preload="metadata";
var p=this;
this.audio.addEventListener("durationchange",function(){
1!==p.audio.duration&&(p.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=p.secondToTime(p.audio.duration))}
),this.audio.addEventListener("loadedmetadata",function(){
p.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+p.music.author,p.loadedTime=setInterval(function(){
var e=p.audio.buffered.end(p.audio.buffered.length-1)/p.audio.duration;
p.updateBar.call(p,"loaded",e,"width"),1===e&&clearInterval(p.loadedTime)}
,500)}
),this.audio.addEventListener("error",function(){
p.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - 加载失败 ╥﹏╥"}
),this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){
p.play.call(p)}
),this.pauseButton.addEventListener("click",function(){
p.pause.call(p)}
),this.playedBar=this.element.getElementsByClassName("aplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("aplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("aplayer-thumb")[0],this.bar=this.element.getElementsByClassName("aplayer-bar")[0];
var y;
this.bar.addEventListener("click",function(e){
var a=e||window.event;
y=p.bar.clientWidth;
var i=(a.clientX-t(p.bar))/y;
p.updateBar.call(p,"played",i,"width"),p.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=p.secondToTime(i*p.audio.duration),p.audio.currentTime=parseFloat(p.playedBar.style.width)/100*p.audio.duration}
),this.thumb.addEventListener("mousedown",function(){
y=p.bar.clientWidth,clearInterval(p.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}
),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];
var h=this.element.getElementsByClassName("aplayer-volume-bar")[0],v=p.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("i")[0],f=35;
this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){
var a=e||window.event,t=(f-a.clientY+i(h))/f;
t=t>0?t:0,t=1>t?t:1,p.updateBar.call(p,"volume",t,"height"),p.audio.volume=t,p.audio.muted&&(p.audio.muted=!1),1===t?v.className="demo-icon aplayer-icon-volume-up":v.className="demo-icon aplayer-icon-volume-down"}
),v.addEventListener("click",function(){
p.audio.muted?(p.audio.muted=!1,v.className=1===p.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",p.updateBar.call(p,"volume",p.audio.volume,"height")):(p.audio.muted=!0,v.className="demo-icon aplayer-icon-volume-off",p.updateBar.call(p,"volume",0,"height"))}
),this.option.autoplay&&this.play()}
,APlayer.prototype.play=function(){
this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();
var e=this;
this.playedTime=setInterval(function(){
e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)}
,100)}
,APlayer.prototype.pause=function(){
this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)}
,APlayer.prototype.updateBar=function(e,a,t){
a=a>0?a:0,a=1>a?a:1,this[e+"Bar"].style[t]=100*a+"%"}
,APlayer.prototype.updateLrc=function(e){
if(e||(e=this.audio.currentTime),e<this.lrcTime[this.lrcIndex]||e>=this.lrcTime[this.lrcIndex+1])for(var a=0;
a<this.lrcTime.length;
a++)e>=this.lrcTime[a]&&(!this.lrcTime[a+1]||e<this.lrcTime[a+1])&&(this.lrcIndex=a,this.lrcContents.style.transform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.getElementsByClassName("aplayer-lrc-current")[0].classList.remove("aplayer-lrc-current"),this.lrcContents.getElementsByTagName("p")[a].classList.add("aplayer-lrc-current"))}
,APlayer.prototype.secondToTime=function(e){
var a=function(e){
return 10>e?"0"+e:""+e}
,t=parseInt(e/60),i=parseInt(e-60*t);
return a(t)+":"+a(i)}
;
CSS代码(APlayer.min.css):
@font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380);src:url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"),url(font/aplayer-fontello.woff?72550380) format("woff"),url(font/aplayer-fontello.ttf?72550380) format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) format("svg");font-weight:400;font-style:normal}
.aplayer-narrow{width:66px}
.aplayer-narrow .aplayer-info{display:none}
.aplayer-withlrc.aplayer-narrow{width:106px}
.aplayer-withlrc.aplayer .aplayer-pic{height:106px;width:106px}
.aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px}
.aplayer-withlrc.aplayer .aplayer-lrc{display:block}
.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-border-radius:2px;border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.aplayer [class*=" aplayer-icon-"]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em}
.aplayer .aplayer-lrc-content,.aplayer .aplayer-pic .aplayer-hide{display:none}
.aplayer .aplayer-icon-weibo:before{content:'\e805'}
.aplayer .aplayer-icon-play:before{content:'\e806'}
.aplayer .aplayer-icon-pause:before{content:'\e807'}
.aplayer .aplayer-icon-to-start:before{content:'\e808'}
.aplayer .aplayer-icon-to-end:before{content:'\e809'}
.aplayer .aplayer-icon-list:before{content:'\e80a'}
.aplayer .aplayer-icon-menu:before{content:'\e80b'}
.aplayer .aplayer-icon-volume-off:before{content:'\e800'}
.aplayer .aplayer-icon-volume-down:before{content:'\e801'}
.aplayer .aplayer-icon-volume-up:before{content:'\e802'}
.aplayer span{cursor:default!important}
.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px}
.aplayer .aplayer-pic img{height:100%;width:100%}
.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;-webkit-border-radius:50%;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2)}
.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}
.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;top:50%;left:50%;margin:-15px 0 0 -15px}
.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}
.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}
.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px}
.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}
.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}
.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}
.aplayer .aplayer-info .aplayer-controller{position:relative}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 120px 0 5px}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;background:#b7daff;height:2px}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border:1px solid #b7daff;-webkit-border-radius:50%;border-radius:50%;background:#fff;cursor:pointer!important}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#b7daff}
.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px}
.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{display:inline-block;margin-left:7px;cursor:pointer!important}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:99}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;background:#b7daff}
.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px}
.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;content:' ';width:100%}
.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=0 )}
.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left bottom,left top,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0 )}
.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4}
.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}
.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}
分享到QQ
分享到微博
微信扫一扫
