『牛转乾坤-贺新春』年夜饭，让我想起了你
本帖最后由 II.〆石Zi° 于 2021-2-22 22:32 编辑 <br /><br /><div style="width:744px;height: 2200px; left: 10px; top: 50px; position: relative;"><img width="744" src="http://www.ii23.cn/data/attachment/forum/202102/15/003403qxw2iygv6fvfu6xf.jpg">
<div style="left: 230px; top: 2100px; 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: 660px; position:absolute; left:20px;top:-680px; text-align:center;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(150,0,0,1);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=1819636482.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}
.pls.favatar.authi{text-shadow:6px 6px 10px #8600FF;color:#6F00D2;
}
</style>
<div><p>需要360浏览器极速模式，歌词才显示正常</p></div> 本帖最后由 II.〆石Zi° 于 2021-2-15 01:12 编辑 <br /><br /><div style="width:796px;height: 1102px; left: -20px; top: 0px; position: relative;">
<img width="796" src="http://www.ii23.cn/data/attachment/forum/202102/15/010305r1mmsenltmsztl6m.jpg"></div> 记得楼主说过由于疫情原因不能返乡过年。看有四副碗筷那至少有四人同席啦～觥帱交错不寂寞～
有些人沉于记忆之底，想起便觉微醺。。。 II.〆石Zi° 发表于 2021-2-15 00:42
那就占一楼，凑三张图？
妥妥的～
另外我数错了，手机看图左拉到右右拉到左 上拉到下下拉到上～再数一遍5副碗筷，喝完酒可以逮狗腿子了～ 我真被自己打败了。标准版点了播放键然后网搜歌词。
再回头看帖，发现歌名怎么变成歌词了。。。！
楼主帖子做的令人叹服。那么骄傲那么臭屁。 雪千寻 发表于 2021-2-15 00:56
妥妥的～
另外我数错了，手机看图左拉到右右拉到左 上拉到下下拉到上～再数一遍5副碗筷，喝完酒可以逮狗 ...
其实只有三人，老家有个习俗：过年都会多摆几副碗筷 II.〆石Zi° 发表于 2021-2-15 01:16
其实只有三人，老家有个习俗：过年都会多摆几副碗筷
嗯。风俗的沿袭也是情感的延续。 本帖最后由 彩虹密码 于 2021-2-18 11:36 编辑
很丰盛一桌年夜饭，
我看到了一瓶梦之蓝酒
这是洋河蓝色经典系列中最贵的酒。
好丰盛一桌年夜饭！ 雪千寻 发表于 2021-2-15 00:56
妥妥的～
另外我数错了，手机看图左拉到右右拉到左 上拉到下下拉到上～再数一遍5副碗筷，喝完酒可以逮狗 ...
什么叫逮狗腿子{:72_510:}不懂 那五花肉端来{:73_607:} 这桌年夜饭好丰盛，那酒也是亮点。 雪千寻 发表于 2021-2-15 00:56
妥妥的～
另外我数错了，手机看图左拉到右右拉到左 上拉到下下拉到上～再数一遍5副碗筷，喝完酒可以逮狗 ...
我认真数了一下，你还真数错了。哈哈！ Оο.1秒ヽo 发表于 2021-2-15 08:46
什么叫逮狗腿子不懂
就是五个人斗地主。但其中一个是卧底，暗地里帮地主打农民～ 陌花雨 发表于 2021-2-15 08:51
我认真数了一下，你还真数错了。哈哈！
后来又数了一遍是5副没错吧。 歌词不用360浏览器也可以看到，手机标准版、Edge浏览器都可直接看到。与歌同步，非常棒。 这首歌最近听得很多 都是我爱吃的菜，楼主家的年夜饭真丰盛哪
我还看到了海之蓝
趁着过节，不妨多喝两杯
新年快乐！ 雪千寻 发表于 2021-2-15 10:07
后来又数了一遍是5副没错吧。
嗯！其实我是数了两遍，哈哈！ 一瓶酒比一桌菜贵多了。
页:
[1]
2