【玉簪记 - 初寒寒&莱茵）】欹枕愁听四壁蛩，叹长宵兮孤冷
本帖最后由 II.〆石Zi° 于 2020-8-29 09:19 编辑 <br /><br /><div style="width:1200px;height: 700px; left: -300px; top: -50px; position: relative;"><img width="1200" src="http://www.ii23.cn/data/attachment/forum/202008/28/212029mhwh3m8eedp2epl8.png">
<div style="width:1200px;height: 1px; background:#ffffff;left: 0px; top: 635px; position: absolute;"></div>
<div style="width:350px;right: 20px; top: 120px; position:absolute;opacity:1;"><img width="350" height="350"src="http://www.ii23.cn/data/attachment/forum/202008/28/214957rm80eikl3joaip30.gif
" border="0"></div>
<div style="left: 455px; top: 620px; 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(255,255,255,0.2);}/* 播放器区域的大小、颜色 、颜色中的参数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{display:none;height:20px; width: 250; position:absolute; top:-0px; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc p{font-size:14px;color: rgba(200,0,0,0.9);line-height:20px;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:20px;font-weight:bold;color: rgba(200,0,0,0.9);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">
玉簪记--初寒寒&莱茵
（初寒寒）
月明云淡露华浓
欹枕愁听四壁蛩
伤秋宋玉赋西风
落叶惊残梦
闲步芳尘数落红
（莱茵）
粉墙花影自重重
帘卷残荷水殿风
抱琴弹向月明中
香袅金猊动
人在蓬莱第几宫
（初寒寒）
云水隔在梦里枕
落红无意觅春恨
（莱茵）
一度春来上眉痕
山寺空门 逐尘
（初寒寒）
雉朝雊兮清霜
惨孤飞兮无双
念寡阴兮少阳
怨鳏居兮彷徨 彷徨
（莱茵）
烟淡淡兮轻云
香霭霭兮桂阴
叹长宵兮孤冷
抱玉琴兮自温 自温
（初寒寒）
步虚声度许飞琼
乍听还疑别院风
（莱茵）
仙郎何处入帘栊
02:43.20]早是人惊恐
（合）
云水声寒一曲中
（莱茵）
多情犹似梦里身
竟惹风月心上生
（初寒寒）
一处山盟对情恩
漂泊两处 离人
（合）
雉朝雊兮清霜
惨孤飞兮无双
念寡阴兮少阳
怨鳏居兮彷徨 彷徨
烟淡淡兮轻云
香霭霭兮桂阴
叹长宵兮孤冷
抱玉琴兮自温 自温
原唱：黄诗扶/Winky诗
演唱：莱茵/初寒寒
笛子/萧：居君裔
人声修音：初寒寒
人声混音：三星堆工作室
——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=1468493979.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-8-29 16:29
帖比歌更胜一筹。
歌曲和图片搭配的太好了， 陌花雨 发表于 2020-8-29 08:08
这帖子做的漂亮，这女的叫啥来，忘记了。
热巴
饰演的《枕上书》中的凤九 II.〆石Zi° 发表于 2020-8-29 19:22
热巴
饰演的《枕上书》中的凤九
嗯！是这个名字，这部剧没看过好看不？ 迪力热巴还是挺漂亮滴，就是电视剧集数太多了，56集，没那个耐心看
精美的音画喜欢
呀，这个音画设计的好
变勤劳的小蜜蜂了
页:
[1]