【金鼠闹春 天籁之音】为你祈祷-你我的明天过的更好
本帖最后由 片片枫叶情 于 2023-2-9 10:29 编辑 <br /><br /><div style="position: relative; top: 0px; left:0px; width:1200px; height:550px;" ><img src="http://www.ii23.cn/data/attachment/forum/202001/19/205457re0tgteij8tyiooy.jpg" width="1200" height="550" ></img>
<div style="position: absolute; top: 290px; left:870px; " // 播放器定位。>
<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: 2px;
box-shadow: 0 2px 2px 0 rgba(0,202,202,.14),0 3px 1px -2px rgba(0,202,202,.2),0 1px 5px 0 rgba(0,202,202,.12);/* 边框颜色等 */
border-radius: 5px;}
.aplayer span{cursor:default!important}
.aplayer{position:absolute;top: 0px; left:0px; height:110px;width:180px; background-color: rgba(0, 0, 0, 0.00);}/* 播放器区域的大小、颜色 、颜色中的参数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: 9px; color:#000000; width:10px;height:10px; border:2px solid #000000; border-radius: 10px; position:absolute;bottom:3px; left:3px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */
.aplayer .aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
.aplayer .aplayer-icon-play:before{content:'\25b6'}
.aplayer .aplayer-icon-pause:before{content:'\23f8'} /* 设置按钮键 */
.aplayer-bar-wrap{margin:0 120px 0 5px}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{height:1px; width:80px;background: #cdcdcd;position:absolute;left:15px;bottom:8px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0px;bottom:0px; background: #000000;height:2px}/* 进度条已播放段颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:1px;right:5px;margin-top:-4px;margin-right:-10px;height:5px;width:5px;border:1px solid #000000; border-radius:50%;background: #000000;cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#4dffff;}
.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:3px;bottom:0px;height:17px;color: #000000;font-size:10px}/* 时间 */
.aplayer .aplayer-info .aplayer-controller{display:inline-block;margin-left:7px;cursor:pointer!important}
.aplayer .aplayer-lrc{display:none;position:absolute; left:35px; top:-50px; height:150px; width: 150; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )}
.aplayer .aplayer-lrc:after{bottom:0;height:33%;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )}
.aplayer .aplayer-lrc p{font-size:12px;color: #FFFFFF;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.4} /* 歌词字体及大小 */
.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}
.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}
.demo {
width: 290px; height: 52px;
margin: 0px auto;
border-radius: 10px;
align:center;
position: absolute;
opacity: 1;
}
.demo p {
padding: 10px 0;
left: 0px;
opacity: 1;
}
</style>
<div class="demo" position:absolute;top: 0px; left:0px; height:100px;>
<p><strong></strong></p>
<div id="player3" class="aplayer" style="top:0px;left:0px; position:absolute;">
<pre class="aplayer-lrc-content">
为你祈祷
作词：崔伟立
作曲：崔伟立
编曲：李凯稠
II23休闲社区
片片枫叶情翻唱
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐在你身边绕
我就是你永远的依靠
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐在你身边绕
我就是你永远的依靠
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐在你身边绕
我就是你永远的依靠
幸福和快乐在你身边绕
我就是你永远的依靠
</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)};
var ap3 = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '',
author: '',
url: 'https://user.wyc520.net/filestores/2023/02/09//5ee61205f67bf85d28183de0dfa49846.mp3', /* 歌曲地址 */
pic: ''
}
});
ap3.init();
</script>
<DIV style="Z-INDEX: 1; POSITION: absolute; WIDTH: 0px; TOP: -220px; LEFT: -900px"><EMBED height=400 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=450 src=http://webftp.bbs.hnol.net/zyfx/flash/09.swf play="false" menu="false" loop="false" allowscriptaccess="never" allownetworking="none" invokeurls="false" wmode="transparent"></DIV>
<DIV style="Z-INDEX: 1; POSITION: absolute; WIDTH: 0px; TOP: -250px; LEFT: -250px"><EMBED height=450 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=550 src=http://lgqxxy.16789.net/domName/lgqxxy/20089212215921577.swf play="false" menu="false" loop="false" allowscriptaccess="never" allownetworking="none" invokeurls="false" wmode="transparent"></DIV>
</div>
</div>
坑妞的明天会更灿烂！{:2_281:} 为所爱的人祈祷 一生一世平安快乐 片片现在成，小歌唱家了
祝：片片妞明天过的更好 好听的歌曲，为好友，为亲人，祈祷大家也来越好 新年祈祷大家开心快乐 欣赏帅哥的精彩 翻唱棒棒哒 祝新年快乐！ @轻描 发表于 2020-1-20 06:10
坑妞的明天会更灿烂！
足球哥新年快乐。 Оο.1秒ヽo 发表于 2020-1-20 09:04
片片现在成，小歌唱家了
祝：片片妞明天过的更好
有时间的时候瞎吼几下。{:2_267:} 深呼吸hu 发表于 2020-1-20 13:17
欣赏帅哥的精彩 翻唱棒棒哒 祝新年快乐！
同祝新年快乐。 片片唱得不错，好深情的演唱，祝新年快乐 彩虹密码 发表于 2020-1-20 10:26
好听的歌曲，为好友，为亲人，祈祷大家也来越好
大家都会越来越好，祝新年快乐。 记得上次听的是合唱版~男声版也很深情啊~ 后面是重音，还是我卡了。 好漂亮的制作 祝老师及论坛所有朋友新年快乐 渴望影音 发表于 2020-1-21 00:29
祝老师及论坛所有朋友新年快乐
同祝新年快乐，万事如意。{:2_256:} 陌花雨 发表于 2020-1-20 21:50
后面是重音，还是我卡了。
可能你有其他网页打开有声音吧，这个没有重音的。 雪千寻 发表于 2020-1-20 19:20
记得上次听的是合唱版~男声版也很深情啊~
独唱在合唱版以前就唱过的，活动贴后来重新录了一下。 陌花雨 发表于 2020-1-20 21:50
后面是重音，还是我卡了。
我听也是有一个重的，不知道是怎么回事
页:
[1]
2