【一开始说陪你到老的人现在他还在吗 - 于洋】都已经忘却了当初的誓言
本帖最后由 片片枫叶情 于 2021-1-19 09:33 编辑 <br /><br /><div style="position: relative; top: 0px; left:0px; width:800px; height:460px;"><img src="http://www.ii23.cn/data/attachment/forum/202101/19/091844ma2uawsbhshewws9.jpg" width="800" height="460">
<div style="position: absolute; top:400px; left:580px; " 播放器定位。="">
<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: 0px;
box-shadow: 0 2px 2px 0 rgba(0,0,121,.14),0 3px 1px -2px rgba(0,0,121,.2),0 1px 5px 0 rgba(0,0,121,.12);/* 边框颜色等 */
border-radius: 5px;}/* 边框圆角 */
.aplayer span{cursor:default!important}
.aplayer{height:25px;width:200px; background-color: rgba(200,200,200,0.1);}/* 播放器区域的大小、颜色 、颜色中的参数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: 5px; color:#FFFFFF; width:15px;height:15px; border:2px solid #FFFFFF; border-radius: 10px; position:absolute;bottom:3px; left:3px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */
.aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
.aplayer-icon-play:before{content:'\25b6'}
.aplayer-icon-pause:before{content:'\2016'} /* 设置按钮键 */
.aplayer-bar-wrap{height:2px; width:150px;background: RoyalBlue;position:absolute;left:32px;bottom:15px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer-played{position:absolute;left:0px;bottom:-1px; background: #EA0000;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 #EA0000; border-radius:50%;background: #EA0000;cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer-time{position:absolute;right:3px;bottom:8px;height:17px;color: #ffffff;font-size:10px}/* 时间 */
.aplayer-lrc{display:none;position:absolute; left:30px; top:-130px; height:160px; width: 200; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc p{font-size:5px;color: #FBFBFF;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.5} /* 歌词字体、颜色及大小，未播放歌词透明度 */
.aplayer-lrc p.aplayer-lrc-current{font-weight:bold;font-size:5px;color: red;opacity:1}/* 正播放歌词透明度 */
.aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-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">
一开始说陪你到老的人现在他还在吗 - 于洋
词：高夫
曲：高夫
编曲：冯丹
吉他：孙越
琵琶：孟宵
录音：赵会涛
伴唱：郭亚男
混音：顾潇予
监制：刘浩/于洋
执行：冬瓜/仲浩惟
制作人：高夫
出品人：高夫
高夫助理：仲浩惟/李帅
视觉设计：高夫工作室
企划宣传：高夫工作室
版权所有：高夫工作室
鸣谢：越豪文化/北京·鱼人文化
天空又飘起雪花
又想起曾经的他
曾经约好了一起相守白发
如今他又在哪啊
是谁说我是最美的花
是谁撩动过我的长发
如果我们的爱是风中雪花
能不能不要急着融化
总是想起你说过的话
才觉得自己太傻
是不是你已忘了曾经的话
才会将我丢在天涯
一开始说陪你到老的人
现在他还在吗
是不是承诺总经不起风吹雨打
所以你才转身退下
你还记不记得我是你最美的花
还记不记得我的长发
如果有一天我已白了头发
你的誓言 你还记得吗
是谁说我是最美的花
是谁撩动过我的长发
如果我们的爱是风中雪花
能不能不要急着融化
一开始说陪你到老的人
现在他还在吗
是不是承诺总经不起风吹雨打
所以你才转身退下
你还记不记得我是你最美的花
还记不记得我的长发
如果有一天我已白了头发
你的誓言 你还记得吗
一开始说陪你到老的人
现在他还在吗
是不是身边已有了现在的她
对她说了同样的话
如果我真的是你最美的花
你怎么能忍心退下
如果有一天你也白了头发
是否还记得 我是你最美的花
</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: 'https://ysx.8687888.com/ysx/mp3/20201106/F236BB13E63F76C98388620D05C22C30.mp3',
pic: ''
}
});
ap3.init();
</script>
</div>
</div></div><font size="4" color="#8b0000"> <b>有一种深爱，叫爱而不得，却一生牵挂。 </b></font><div><font size="4" color="#8b0000"><b> 虽然不能相偎相依地在一起，
不能陪你朝朝暮暮共欢夕阳，
却能成为彼此生命里最美好的风景。</b></font></div><div><font size="4" color="#8b0000"><b> 世间最美好的缘，往往就是这种：奈何情深，向来缘浅。</b></font></div><div><font size="4" color="#8b0000"><b> 因为牵扯而不舍，因为思念而心痛。</b></font></div><div><font size="4" color="#8b0000"><b> 因为现实而分开，因为相爱而牵扯。 </b></font></div><div><font size="4" color="#8b0000"><b> 爱情就是这样，深爱却无需多言，那些说不出口的话，都藏着最深的情。</b></font></div><div><font size="4" color="#8b0000"><b> 往后余生里，明知道相思苦，又要去苦相思，只能默默的想念。</b></font></div><div><font size="4" color="#8b0000"><b> 不管以后见或不见，那份爱始终都会深刻在心里。
</b></font></div> 这歌有点淡淡的忧伤
有些时候，是不得不分开 非常好听的歌，这个是片片妞有感而发吗{:72_528:} Оο.1秒ヽo 发表于 2021-1-19 10:22
非常好听的歌，这个是片片妞有感而发吗
随便听听而已 透明播放器不错，我不会弄，培训一下呗 彩虹密码 发表于 2021-1-19 11:16
透明播放器不错，我不会弄，培训一下呗
给你的播放器代码里面设置颜色即可。 人生相思最苦 深有体会的人才这样有感而发。 情到深处时 那份 爱 彼此伤 片片枫叶情 发表于 2021-1-19 10:28
随便听听而已
我也随便听听{:2_256:} 有点伤感，也挺好听的。 其实没有傻不傻，只有愿不愿。
情深缘浅，悲哀可叹。情深不寿，悲凉绝望。
无魂回归 发表于 2021-1-19 18:53
人生相思最苦
相思如同一壶酒，让你沉醉，让人不适，让人迷恋，让人痛苦。
信守承诺必须一辈子~！
页:
[1]