歌词同步精简播放器，播放器各元素设置可控
本帖最后由 II.〆石Zi° 于 2019-10-16 22:11 编辑代码：
（说明：本人精心编制而成，歌词同步，颜色、透明度等可调，可方便用于各种风格的帖子。部分代码来源于网络。
1、使用时，script部分请勿改动。
2、有文字标注的地方，可以根据自己帖子风格进行相应修改。）
<div style="position: relative; top: 8px; left:8px; width:500px; height:281px;" >
<img src="http://www.ii23.cn/data/attachment/forum/201908/31/211537lzoxowdzw8v8e8nz.gif" width="500" height="281" ></img>
<div style="position: absolute; top: 168px; left:68px; " // 播放器定位。>
<title>特制音乐播放器，歌词同步，颜色风格可调</title>
<style>
@font-face{format("svg");
font-weight:400;font-style:normal}
.aplayer-narrow .aplayer-info{display:none}
.aplayer-withlrc.aplayer .aplayer-info{margin-left:0px;height:0px}
.aplayer-withlrc.aplayer .aplayer-lrc{display:block;}
.aplayer{
font-family: Arial,Helvetica,sans-serif;
margin: 2px;
box-shadow: 0 2px 2px 0 rgba(0,202,202,.14),0 3px 1px -2px rgba(0,202,202,.2),0 1px 5px 0 rgba(0,202,202,.12);/* 边框颜色等 */
border-radius: 5px;}
.aplayer span{cursor:default!important}
.aplayer{position:absolute;top: 0px; left:0px; height:52px;width:290px; background-color: rgba(0, 0, 0, 0.41);}/* 播放器区域的大小、颜色 、颜色中的参数a可调整透明度*/
.aplayer :before,
.aplayer :before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none; line-height:1em; font-size: 9px; color:#ff8040; width:10px;height:10px; border:2px solid #ff8040; border-radius: 10px; position:absolute;bottom:3px; left:3px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */
.aplayer .aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
.aplayer .aplayer-icon-play:before{content:'\25b6'}
.aplayer .aplayer-icon-pause:before{content:'\23f8'} /* 设置按钮键 */
.aplayer-bar-wrap{margin:0 120px 0 5px}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{height:1px; width:200px;background: #cdcdcd;position:absolute;left:15px;bottom:8px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0px;bottom:0px; background: #ff8040;height:2px}/* 进度条已播放段颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:1px;right:5px;margin-top:-4px;margin-right:-10px;height:5px;width:5px;border:1px solid #ff8040; border-radius:50%;background: #ff8040;cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#4dffff;}
.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:3px;bottom:0px;height:17px;color: #ff7000;font-size:10px}/* 时间 */
.aplayer .aplayer-info .aplayer-controller{display:inline-block;margin-left:7px;cursor:pointer!important}
.aplayer .aplayer-lrc{display:none;position:absolute; left:60px; top:10px; height:40px; width: 200; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#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%;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )}
.aplayer .aplayer-lrc p{font-size:12px;color: #ff8040;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.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}
.demo {
width: 290px; height: 52px;
margin: 0px auto;
border-radius: 10px;
align:center;
position: absolute;
opacity: 1;
}
.demo p {
padding: 10px 0;
left: 0px;
opacity: 1;
}
</style>
<div class="demo" position:absolute;top: 0px; left:0px; height:52px;>
<p><strong></strong></p>
<div id="player3" class="aplayer" style="top:0px;left:0px; position:absolute;">
<pre class="aplayer-lrc-content">
南征北战NZBZ - 最美的期待(Live)
我有一个梦像雨后彩虹
用所有泪水换来笑容
还有一种爱穿越了人海
拾起那颗迷失的尘埃
你的呼吸越靠越近
将我抱紧
我睁开双眼想你在身边
无所谓永远还是瞬间
静闭上了眼你却又浮现
带我远离寂寞的边缘
忘了是非没有伤悲
无怨无悔
我拥抱着爱当从梦中醒来
你执着地等待却不曾离开
舍不得分开在每一次醒来
不用再徘徊
你就是我最美的期待
阳光和雨滴相遇
凝固成一道桥梁
痛苦和快乐交织
将我的心窗照亮
彩虹横卧在天边
霞光闪耀在眼前
多么鲜艳
历经世间无常的变迁
那是爱带来的感动
像那不再来的童年
不断被赞美和传诵
掩盖了梦魇
我可以忘记乌云的不安
放下负担
与你相拥时的幸福感
带走我的孤单
我睁开双眼想你在身边
无所谓永远还是瞬间
静闭上了眼你却又浮现
带我远离寂寞的边缘
忘了是非没有伤悲
无怨无悔
我拥抱着爱当从梦中醒来
你执着地等待却不曾离开
舍不得分开在每一次醒来
不用再徘徊
你就是我最美的期待
我拥抱着爱当从梦中醒来
你执着地等待却不曾离开
舍不得分开在每一次醒来
不用再徘徊
你就是我最美的期待
——end——
</pre>
</div>
</div>
<script>
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"),narrow:!1,autoplay:!1,showlrc:!1};for(var t in a)a.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&(e=a);this.option=e}
APlayer.prototype.init=function(){function e(e)
{var a=e||window.event,i=(a.clientX-t(m.bar))/p;i=i>0?i:0,i=1>i?i:1,m.updateBar.call(m,"played",i,"width"),m.option.showlrc&&m.updateLrc.call(m,parseFloat(m.playedBar.style.width)/100*m.audio.duration),m.element.getElementsByClassName("aplayer-ptime").innerHTML=m.secondToTime(i*m.audio.duration)}function a(){document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration,m.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").innerHTML,s=l.split(/\n/),n=/\[(\d{2}):(\d{2})\.(\d{2})]/,r=/](.*)$/,o=0;o<s.length;o++)
{var d=n.exec(s),c=r.exec(s);d&&c&&(this.lrcTime.push(60*parseInt(d)+parseInt(d)+parseInt(d)/100),this.lrcLine.push(c))}}
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 u="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents"),o=0;o<this.lrcLine.length;o++)u+="<p>"+this.lrcLine+"</p>";this.lrcContents.innerHTML=u,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p").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 m=this;this.audio.addEventListener("durationchange",function(){1!==m.audio.duration&&(m.element.getElementsByClassName("aplayer-dtime").innerHTML=m.secondToTime(m.audio.duration))}),this.audio.addEventListener("loadedmetadata",function(){m.element.getElementsByClassName("aplayer-author").innerHTML=m.music.author,m.loadedTime=setInterval(function(){var e=m.audio.buffered.end(m.audio.buffered.length-1)/m.audio.duration;m.updateBar.call(m,"loaded",e,"width"),1===e&&clearInterval(m.loadedTime)},500)}),this.audio.addEventListener("error",function(){m.element.getElementsByClassName("aplayer-author").innerHTML="歌曲链接失效"}),this.playButton=this.element.getElementsByClassName("aplayer-play"),this.pauseButton=this.element.getElementsByClassName("aplayer-pause"),this.playButton.addEventListener("click",function(){m.play.call(m)}),this.pauseButton.addEventListener("click",function(){m.pause.call(m)}),this.playedBar=this.element.getElementsByClassName("aplayer-played"),this.loadedBar=this.element.getElementsByClassName("aplayer-loaded"),this.thumb=this.element.getElementsByClassName("aplayer-thumb"),this.bar=this.element.getElementsByClassName("aplayer-bar");var p;this.bar.addEventListener("click",function(e){var a=e||window.event;p=m.bar.clientWidth;var i=(a.clientX-t(m.bar))/p;m.updateBar.call(m,"played",i,"width"),m.element.getElementsByClassName("aplayer-ptime").innerHTML=m.secondToTime(i*m.audio.duration),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration}),this.thumb.addEventListener("mousedown",function(){p=m.bar.clientWidth,clearInterval(m.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume");var y=this.element.getElementsByClassName("aplayer-volume-bar"),h=m.element.getElementsByClassName("aplayer-time").getElementsByTagName("i"),v=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap").addEventListener("click",function(e){var a=e||window.event,t=(v-a.clientY+i(y))/v;t=t>0?t:0,t=1>t?t:1,m.updateBar.call(m,"volume",t,"height"),m.audio.volume=t,m.audio.muted&&(m.audio.muted=!1),1===t?h.className="demo-icon aplayer-icon-volume-up":h.className="demo-icon aplayer-icon-volume-down"}),h.addEventListener("click",function(){m.audio.muted?(m.audio.muted=!1,h.className=1===m.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",m.updateBar.call(m,"volume",m.audio.volume,"height")):(m.audio.muted=!0,h.className="demo-icon aplayer-icon-volume-off",m.updateBar.call(m,"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").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.style=100*a+"%"},APlayer.prototype.updateLrc=function(e){if(e||(e=this.audio.currentTime),e<this.lrcTime||e>=this.lrcTime)for(var a=0;a<this.lrcTime.length;a++)e>=this.lrcTime&&(!this.lrcTime||e<this.lrcTime)&&(this.lrcIndex=a,this.lrcContents.style.transform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.getElementsByClassName("aplayer-lrc-current").classList.remove("aplayer-lrc-current"),this.lrcContents.getElementsByTagName("p").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)};
var ap3 = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '',
author: '',
url: 'https://music.163.com/song/media/outer/url?id=862100828.mp3', /* 歌曲地址 */
pic: ''
}
});
ap3.init();
</script>
</div>
</div>
附歌词查找方法：
歌词同步精简播放器，播放器各元素设置可控之“歌词查找方法”
http://www.ii23.cn/thread-575831-1-1.html
(出处: ii23休闲社区)
本帖最后由 II.〆石Zi° 于 2019-9-1 01:27 编辑 <br /><br /><p>显示效果：</p>
<style type="text/css">
.a_t{display:none!important}
.a_mu{display:none!important}
.scbar_icon_td{display:none!important}
.scbar_txt_td{display:none!important}
.scbar_type_td{display:none!important}
.scbar_btn_td{display:none!important}
.scbar_hot_td{display:none!important}
.pgs{display:none!important}
.p_pop{display:none!important}
.replyfast{display:none!important}
.scrolltopa{display:none!important}
#scrolltop{display:none!important}
.returnlist{display:none!important}
.pstatus{display:none!important}
.tshare{display:none!important}
.a_pt, .a_pb{display:none!important}
.fullvfastpost{display:none!important}
.sign{display:none!important}
</style>
<div style="position: relative; top: 8px; left:8px; width:500px; height:281px;" >
<img src="http://www.ii23.cn/data/attachment/forum/201908/31/211537lzoxowdzw8v8e8nz.gif" width="500" height="281" ></img>
<div style="position: absolute; top: 168px; left:68px; " // 播放器定位。>
<title>特制音乐播放器，歌词同步，颜色风格可调</title>
<style>
@font-face{format("svg");
font-weight:400;font-style:normal}
.aplayer-narrow .aplayer-info{display:none}
.aplayer-withlrc.aplayer .aplayer-info{margin-left:0px;height:0px}
.aplayer-withlrc.aplayer .aplayer-lrc{display:block;}
.aplayer{
font-family: Arial,Helvetica,sans-serif;
margin: 2px;
box-shadow: 0 2px 2px 0 rgba(0,202,202,.14),0 3px 1px -2px rgba(0,202,202,.2),0 1px 5px 0 rgba(0,202,202,.12);/* 边框颜色等 */
border-radius: 5px;}
.aplayer span{cursor:default!important}
.aplayer{position:absolute;top: 0px; left:0px; height:52px;width:290px; background-color: rgba(0, 0, 0, 0.41);}/* 播放器区域的大小、颜色 、颜色中的参数a可调整透明度*/
.aplayer :before,
.aplayer :before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none; line-height:1em; font-size: 9px; color:#ff8040; width:10px;height:10px; border:2px solid #ff8040; border-radius: 10px; position:absolute;bottom:3px; left:3px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */
.aplayer .aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
.aplayer .aplayer-icon-play:before{content:'\25b6'}
.aplayer .aplayer-icon-pause:before{content:'\23f8'} /* 设置按钮键 */
.aplayer-bar-wrap{margin:0 120px 0 5px}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{height:1px; width:200px;background: #cdcdcd;position:absolute;left:15px;bottom:8px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0px;bottom:0px; background: #ff8040;height:2px}/* 进度条已播放段颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:1px;right:5px;margin-top:-4px;margin-right:-10px;height:5px;width:5px;border:1px solid #ff8040; border-radius:50%;background: #ff8040;cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#4dffff;}
.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:3px;bottom:0px;height:17px;color: #ff7000;font-size:10px}/* 时间 */
.aplayer .aplayer-info .aplayer-controller{display:inline-block;margin-left:7px;cursor:pointer!important}
.aplayer .aplayer-lrc{display:none;position:absolute; left:60px; top:10px; height:40px; width: 200; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#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%;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )}
.aplayer .aplayer-lrc p{font-size:12px;color: #ff8040;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.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}
.demo {
width: 290px; height: 52px;
margin: 0px auto;
border-radius: 10px;
align:center;
position: absolute;
opacity: 1;
}
.demo p {
padding: 10px 0;
left: 0px;
opacity: 1;
}
</style>
<div class="demo" position:absolute;top: 0px; left:0px; height:52px;>
<p><strong></strong></p>
<div id="player3" class="aplayer" style="top:0px;left:0px; position:absolute;">
<pre class="aplayer-lrc-content">
南征北战NZBZ - 最美的期待(Live)
我有一个梦像雨后彩虹
用所有泪水换来笑容
还有一种爱穿越了人海
拾起那颗迷失的尘埃
你的呼吸越靠越近
将我抱紧
我睁开双眼想你在身边
无所谓永远还是瞬间
静闭上了眼你却又浮现
带我远离寂寞的边缘
忘了是非没有伤悲
无怨无悔
我拥抱着爱当从梦中醒来
你执着地等待却不曾离开
舍不得分开在每一次醒来
不用再徘徊
你就是我最美的期待
阳光和雨滴相遇
凝固成一道桥梁
痛苦和快乐交织
将我的心窗照亮
彩虹横卧在天边
霞光闪耀在眼前
多么鲜艳
历经世间无常的变迁
那是爱带来的感动
像那不再来的童年
不断被赞美和传诵
掩盖了梦魇
我可以忘记乌云的不安
放下负担
与你相拥时的幸福感
带走我的孤单
我睁开双眼想你在身边
无所谓永远还是瞬间
静闭上了眼你却又浮现
带我远离寂寞的边缘
忘了是非没有伤悲
无怨无悔
我拥抱着爱当从梦中醒来
你执着地等待却不曾离开
舍不得分开在每一次醒来
不用再徘徊
你就是我最美的期待
我拥抱着爱当从梦中醒来
你执着地等待却不曾离开
舍不得分开在每一次醒来
不用再徘徊
你就是我最美的期待
——end——
</pre>
</div>
</div>
<script>
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"),narrow:!1,autoplay:!1,showlrc:!1};for(var t in a)a.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&(e=a);this.option=e}
APlayer.prototype.init=function(){function e(e)
{var a=e||window.event,i=(a.clientX-t(m.bar))/p;i=i>0?i:0,i=1>i?i:1,m.updateBar.call(m,"played",i,"width"),m.option.showlrc&&m.updateLrc.call(m,parseFloat(m.playedBar.style.width)/100*m.audio.duration),m.element.getElementsByClassName("aplayer-ptime").innerHTML=m.secondToTime(i*m.audio.duration)}function a(){document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration,m.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").innerHTML,s=l.split(/\n/),n=/\[(\d{2}):(\d{2})\.(\d{2})]/,r=/](.*)$/,o=0;o<s.length;o++)
{var d=n.exec(s),c=r.exec(s);d&&c&&(this.lrcTime.push(60*parseInt(d)+parseInt(d)+parseInt(d)/100),this.lrcLine.push(c))}}
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 u="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents"),o=0;o<this.lrcLine.length;o++)u+="<p>"+this.lrcLine+"</p>";this.lrcContents.innerHTML=u,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p").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 m=this;this.audio.addEventListener("durationchange",function(){1!==m.audio.duration&&(m.element.getElementsByClassName("aplayer-dtime").innerHTML=m.secondToTime(m.audio.duration))}),this.audio.addEventListener("loadedmetadata",function(){m.element.getElementsByClassName("aplayer-author").innerHTML=m.music.author,m.loadedTime=setInterval(function(){var e=m.audio.buffered.end(m.audio.buffered.length-1)/m.audio.duration;m.updateBar.call(m,"loaded",e,"width"),1===e&&clearInterval(m.loadedTime)},500)}),this.audio.addEventListener("error",function(){m.element.getElementsByClassName("aplayer-author").innerHTML="歌曲链接失效"}),this.playButton=this.element.getElementsByClassName("aplayer-play"),this.pauseButton=this.element.getElementsByClassName("aplayer-pause"),this.playButton.addEventListener("click",function(){m.play.call(m)}),this.pauseButton.addEventListener("click",function(){m.pause.call(m)}),this.playedBar=this.element.getElementsByClassName("aplayer-played"),this.loadedBar=this.element.getElementsByClassName("aplayer-loaded"),this.thumb=this.element.getElementsByClassName("aplayer-thumb"),this.bar=this.element.getElementsByClassName("aplayer-bar");var p;this.bar.addEventListener("click",function(e){var a=e||window.event;p=m.bar.clientWidth;var i=(a.clientX-t(m.bar))/p;m.updateBar.call(m,"played",i,"width"),m.element.getElementsByClassName("aplayer-ptime").innerHTML=m.secondToTime(i*m.audio.duration),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration}),this.thumb.addEventListener("mousedown",function(){p=m.bar.clientWidth,clearInterval(m.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume");var y=this.element.getElementsByClassName("aplayer-volume-bar"),h=m.element.getElementsByClassName("aplayer-time").getElementsByTagName("i"),v=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap").addEventListener("click",function(e){var a=e||window.event,t=(v-a.clientY+i(y))/v;t=t>0?t:0,t=1>t?t:1,m.updateBar.call(m,"volume",t,"height"),m.audio.volume=t,m.audio.muted&&(m.audio.muted=!1),1===t?h.className="demo-icon aplayer-icon-volume-up":h.className="demo-icon aplayer-icon-volume-down"}),h.addEventListener("click",function(){m.audio.muted?(m.audio.muted=!1,h.className=1===m.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",m.updateBar.call(m,"volume",m.audio.volume,"height")):(m.audio.muted=!0,h.className="demo-icon aplayer-icon-volume-off",m.updateBar.call(m,"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").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.style=100*a+"%"},APlayer.prototype.updateLrc=function(e){if(e||(e=this.audio.currentTime),e<this.lrcTime||e>=this.lrcTime)for(var a=0;a<this.lrcTime.length;a++)e>=this.lrcTime&&(!this.lrcTime||e<this.lrcTime)&&(this.lrcIndex=a,this.lrcContents.style.transform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.getElementsByClassName("aplayer-lrc-current").classList.remove("aplayer-lrc-current"),this.lrcContents.getElementsByTagName("p").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)};
var ap3 = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '',
author: '',
url: 'https://music.163.com/song/media/outer/url?id=862100828.mp3', /* 歌曲地址 */
pic: ''
}
});
ap3.init();
</script>
</div>
</div> 歌词音乐同步 非常赞的播放器 好漂亮的播放器 ，先收藏了哈 本帖最后由 II.〆石Zi° 于 2019-8-31 21:15 编辑
II.〆石Zi° 发表于 2019-8-31 10:14
本帖最后由 II.〆石Zi° 于 2019-8-31 10:16 编辑 显示效果：
.bofangqi{opacity: 0.7;}/* 播放器透明 ...
点开这歌吓了我一跳。{:2_266:}
这个自己编制的很强大了，歌词同步，手机电脑都可欣赏，收藏学习 一个精美的播放器，花精力了。 II.〆石Zi° 发表于 2019-8-31 10:14
本帖最后由 II.〆石Zi° 于 2019-9-1 01:27 编辑 显示效果：
这个太漂亮了，昨天没看到。 应该称你一声：码神
页:
[1]