【请笃信一个梦 - 周深&张雨桐】未尽的执念都留在这人间
本帖最后由 II.〆石Zi° 于 2020-10-4 10:23 编辑 <br /><br /><div style="width:1280px;height: 800px; left: -340px; top: -50px; position: relative;"><img width="1280" src="http://www.ii23.cn/data/attachment/forum/202010/04/091919tmvr7nyeeae5ri5a.jpg">
<div style="left: 20px; top: 670px; position:absolute;">
<title>II23休闲社区II.〆石Zi°特制音乐播放器，歌词同步，颜色风格可调</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: 0px;
box-shadow: 0 0px 0px 0 rgba(0,0,121,.14),0 0px 0px -0px rgba(0,0,121,.2),0 0px 0px 0 rgba(0,0,121,.12);/* 边框颜色等 */
border-radius: 10px;}/* 边框圆角 */
.aplayer span{cursor:default!important}
.aplayer{height:22px;width:300px; background-color: rgba(0,0,0,0.6);}/* 播放器区域的大小、颜色 、颜色中的参数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:16px; font-size: 14px; color:#ffffFF; width:17px;height:17px; border:1px solid #ffffFF; border-radius: 16px; position:absolute;bottom:2px; left:8px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */
.aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
.aplayer-icon-play:before{content:'\25b6'}
.aplayer-icon-pause:before{content:'\2016'} /* 设置按钮键 */
.aplayer-bar-wrap{height:1px; width:180px;background: rgba(200,0,0,0.9);position:absolute;left:32px;bottom:10px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer-played{position:absolute;left:0px;bottom:-2px; background:rgba(250,0,0,0.9);height:5px}/* 进度条已播放段颜色 */
.aplayer-thumb:hover{background: #FFFF00;}
.aplayer-thumb{position:absolute;top:2px;right:5px;margin-top:-3px;margin-right:-10px;height:6px;width:6px;border:1px solid rgba(250,0,0,0.9); border-radius:50%;background: rgba(250,0,0,0.9);cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer-time{position:absolute;right:6px;bottom:3px;height:17px;color: #ffffff;font-size:10px}/* 时间 */
.aplayer-lrc{transform:rotate(90deg);display:none;height:560px; width: 650px; position:absolute; left:500px;top:-550px; text-align:left;overflow:hidden;margin:0px 0px 0px 120px; BACKGROUND:rgba(0,0,0,0.0);}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc p{transform:rotate(-90deg);line-height:20px;font-family:楷体;font-size:5px;color: rgba(255,255,255,0);padding:0;margin:0px 0px 0px 290px;-webkit-transition:all 0s ease-in-out;transition:all 0s ease-in-out;opacity:1;} /* 歌词字体、颜色及大小，未播放歌词透明度 */
.aplayer-lrc p.aplayer-lrc-current{ransform:rotate(-90deg);height:100%;writing-mode:vertical-rl;transform:rotate(-90deg);line-height:20px;line-width:24px;font-family:楷体;font-size:30px;font-weight:bold;color: rgba(200,0,0,0.9);opacity:1;}/* 正播放歌词透明度 */
.aplayer-lrc .aplayer-lrc-contents{height:100%;-webkit-transition:all 0s ease-in-out;transition:all 0s ease-in-out}
.demo {
margin: 0px auto;
align:center;
}
.demo p {
padding: 10px 0;
opacity: 1;
}
</style>
<div class="demo">
<p><strong></strong></p>
<div id="player3" class="aplayer">
<pre class="aplayer-lrc-content">
请笃信一个梦——周深
作曲 : 陈禹
作词 : 沃特艾文儿
我们在途中匆匆挥手并不说告别
只因深知总会在轮回里再次相见
到那天穿过陌生人海在闹市中擦肩
平凡的梦啊终会被成全
幸好你从未因疲惫选择停留
有熟稔的呼唤声引你向前走
正是懵懂的眼眸才将世事看通透
内心始终笃信爱与温柔
但愿这漫天时起时落的星斗
曾照拂过的人们都能被庇佑
在颠沛之中漂流于不经意的时候
你会与你的梦悄然邂逅
你一路迎向那被黄昏染红的天边
怀揣着来世的梦走向今生的终结
就这样渐行渐远直到再也看不真切
未尽的执念都留在这人间
无需一再去追问从前或以后
能在时空中相逢就已然足够
不顾一切去握紧那双向你伸的手
一刻安谧便是天长地久
你一路迎向那被黄昏染红的天边
怀揣着来世的梦走向今生的终结
最后微笑着回身遥遥朝那人望一眼
终于开始学会眷恋这人间
我们在途中匆匆挥手并不说告别
只因深知总会在轮回里再次相见
最后微笑着回身遥遥朝那人望一眼
终于开始学会眷恋这人间
终于开始学会眷恋这人间
终于开始学会眷恋这人间
——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)};
</script>
<script>
var ap3 = new APlayer({
element: document.getElementById('player3'),//样式1
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '',
author: '',
url: 'http://music.163.com/song/media/outer/url?id=1416619074.mp3',
pic: ''
}
});
ap3.init();
</script>
</div>
</div>
<style>
.a_t{display:none!important}
.a_mu{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}
#wechat_float_qrcode{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}
</style> 这是姜子牙封神吗^_^ 一个童音一个女声是啥意思？ 片片枫叶情 发表于 2020-10-4 10:02
一个童音一个女声是啥意思？
难道我大中华只允许男女对唱不允许男童男声合作嘛 影片还没看，歌不错。 这个调调好熟悉啊
非常好听，竖排字用心了 很大气的帖子，是楼主的风格 竖排显示歌词，有创意，点赞 本帖最后由 西西。 于 2020-10-4 12:07 编辑
从大鱼海棠开始听他的歌曲，总给人清澈透亮的感觉
姜子牙的片尾曲同样从不让人失望
以前没有想过以后的自己是什么样子的。那时候顾及的更多的是当下。随着年龄的增长，思维方式和生活方式产生了变化，很多模糊的东西变得清晰。以前喜欢加法，感觉什么都是越多越好，现在却喜欢减法，不喜欢的人就远离，不喜欢的东西就扔掉。能够继续留在身边的人越来越少，渐渐的你会发现以前嗤之以鼻的现在却有了另一种看法。
看着身边那些二十出头的人，感叹一下年轻真好，热血奋青，似乎还能看到一些曾经二十多岁自己的影子。再看身边那些已经4、50出头的人，彷佛看到了以后的自己，预见这真是一件可怕的事情不是吗。
岁月真的是很神奇，你回头看看过去的自己，是不是感觉很陌生？你看看现在的自己，你能否看到以后的自己？普罗大众的常态。
雪千寻 发表于 2020-10-4 10:20
难道我大中华只允许男女对唱不允许男童男声合作嘛
我开始听的是重音。 歌曲不错好听 嗯，这首歌还不错，挺好听的。 http://www.ii23.cn/data/attachment/album/201912/15/105747pz39izci5o8jp441.gif很喜欢周深的歌Q贴子一如继往的美0
片片枫叶情 发表于 2020-10-4 10:01
这是姜子牙封神吗^_^
哈哈！我看也像封神榜中的人物。 我听不到，不知道为什么 周深的歌喜欢啊
电影还没看，很期待~~
你这幅图图制作很大气，点个赞
页:
[1]