【沧海一声笑 - GAI周延,刘煜】恩怨似云烟转眼飞很远
本帖最后由 II.〆石Zi° 于 2023-5-13 19:50 编辑 <br /><br /><style type="text/css">.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>
<div style="width:800px;height: 800px; left: -20px; top: -50px; position: relative;">
<img style="width: 800px;left:0px; top: 0px; position:absolute;opacity:1;" src="http://www.ii23.cn/data/attachment/forum/202201/17/034917aj1601zqr8fb1qr1.jpg">
<div style="height:40px;left: 20px; top: 15px; position:absolute;"><img width="40" height="40"src="http://www.ii23.cn/data/attachment/forum/201911/18/032129ntica8e7883rt3q3.png
" border="0"></div>
<div style="height:35px;left: 65px; top: 22px; position:absolute;"> II.〆石Zi°音乐</div>
<div style="transform:rotate(-36deg);left: 555px; top: 603px; 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: 5px;}/* 边框圆角 */
.aplayer span{cursor:default!important}
.aplayer{height:32px;width:150px; background-color: rgba(255,255,255,0.1);}/* 播放器区域的大小、颜色 、颜色中的参数a可调整透明度*/
.aplayer :before,
.aplayer :before{transform:rotate(-4deg);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:10px; font-size: 8px; color:Magenta; width:11px;height:11px; border:1px solid #FF359A; border-radius: 5px; position:absolute;bottom:0px; 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{transform:rotate(-4deg);height:6px; width:100px;border-radius: 3px;background: rgba(150,150,150,1);position:absolute;left:24px;bottom:6px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer-played{position:absolute;left:0px;bottom:0px; background: Magenta;height:5px}/* 进度条已播放段颜色 */
.aplayer-thumb:hover{background: #FFFF00;}
.aplayer-thumb{position:absolute;top:1px;right:5px;margin-top:-3px;margin-right:-10px;height:6px;width:6px;border:1px solid Magenta; border-radius:50%;background: Magenta;cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer-time{transform:rotate(-4deg);position:absolute;left:30px;bottom:2px;height:5px;color: #FF359A;font-size:2px}/* 时间 */
.aplayer-lrc{transform:rotate(4deg);font-size:10px;display:none;position:absolute;left: 5px; top:-465px; text-align:center;height:65px; width: 275;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc p{font-size:10px;text-align:center;color: #ffffff;line-height:21px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.8} /* 歌词字体、颜色及大小，未播放歌词透明度 */
.aplayer-lrc p.aplayer-lrc-current{font-size:10px;text-align:center;line-height:21px;color: Magenta;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">
沧海一声笑
不到园林怎知春色如许
沧海一声笑
滔滔两岸潮
浮沉随浪记今朝
苍天笑纷纷世上潮
谁负谁胜出天知晓
何处笙箫
琴声入鞘
我以黄河水蘸墨挥毫
可路正遥今生如刀
若一晌喝醉看我未老
要海阔天高
高声大笑
笑过勾销
恩怨妄念贪恋再逍遥
翻开你人生的简历
发现你啥子都没得
该如何看待你自己
时间该咋个切支配
是哪些人混不下去
锄头拿起去下地
选哪条路都不好走
啥子命我都不抗拒
我命硬学不来弯腰
一山还要比一山高
沧海一声笑滔滔两岸潮
浮沉随浪记今朝
苍天笑纷纷世上潮
谁负谁胜出天知晓
原来姹紫嫣红开遍
似这般都付与断井颓垣
良辰美景奈何天
便赏心乐事谁家院
恩怨似云烟转眼飞很远
早看破红尘
也不与世人周旋
逍遥的侠客
要踏上江湖归路
坐禅或修行
不枉此生虚度
Whatwedolikethem
他们抓不住感觉
盖爷九天揽月写广陵散诀
孩子还在勤工俭学
闪耀的钻石不会埋没
走一遭发现从没来过
到处招摇过市在浑天过日
歌词唱到口吐白沫
我命硬学不来弯腰
一山还要比一山高
沧海一声笑滔滔两岸潮
浮沉随浪记今朝
江山笑烟雨遥
涛浪淘尽红尘世俗知多少
清风笑 竟惹寂寥
豪情还剩 一襟晚照
豪情还剩 一襟晚照
——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: 'https://music.163.com/song/media/outer/url?id=1472862669.mp3',
pic: ''
}
});
ap3.init();
</script>
</div></div></div><br><br><br><br> 还是电视剧里面的版本好听。 这个音乐怪怪哒，你的粉丝们呢，画面很美{:2_273:} 帖子依然那么漂亮，制作辛苦，感谢分享，只是加不上分了， 这歌曲好听 这个制作也很牛，可以把歌词同步这样玩的，也就只有你了~ 看着好看的贴子，可惜不会
页:
[1]