II.〆石Zi° 发表于 2022-1-29 17:15:34

【虎起中国范 - 凤凰传奇】虎头一摇，精神抖擞，留下新的传说

本帖最后由 II.〆石Zi° 于 2022-1-29 17:27 编辑 <br /><br /><div style="height: 1100px; width:600px;left: 80px; top: -50px; position: relative;">

<img width="600" height="1067"src="http://www.ii23.cn/data/attachment/forum/202201/29/170631g1uuiuuplbnijun7.png">

<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;">&nbsp;II.〆石Zi°音乐</div>

<div style="left: 180px; top: 930px; 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 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:32px;width:240px; background-color: rgba(0,0,0,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:18px; font-size: 16px; color:#ffffFF; width:20px;height:20px; border:2px solid #ffffFF; border-radius: 16px; position:absolute;bottom:4px; left:4px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */

      .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:130px;background: #FFD700;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:0px; top:-110px; height:60px; width: 200; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
      .aplayer .aplayer-lrc p{font-size:14px;color: #ffffff;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:17px;color:#FFD700;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://music.163.com/song/media/outer/url?id=1914204757.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>

无魂回归 发表于 2022-1-29 17:47:35

祝大家春节愉快

彩虹密码 发表于 2022-1-29 19:46:28

春节快乐，事事如意

夕颜染梦 发表于 2022-1-29 20:05:57

真喜庆凤凰传奇一直在给我们不断的惊喜，虎年大吉！
虎起中国范梦GG就很有范，蹭饭{:2_273:}

风之语001 发表于 2022-4-23 09:07:20

来这里听听的好象不多了

栀夏° 发表于 2022-6-11 18:36:16

哈哈，我现在说一句新年快乐，是不是太晚了{:2_280:}

风之语001 发表于 2022-6-18 17:07:43

今天来这里坐坐，听听
页: [1]
查看完整版本: 【虎起中国范 - 凤凰传奇】虎头一摇，精神抖擞，留下新的传说