【我的快乐就是想你-片片枫叶情】愿所有快乐都随你而行
本帖最后由 片片枫叶情 于 2022-11-18 11:41 编辑 <br /><br /><div style="position: relative; top: 0px; left:0px; width:1100px; height:550px;" ><img src="http://www.ii23.cn/data/attachment/forum/202001/22/111429mq9cxclwwbow2bko.jpg" width="1100" height="550" ></img>
<div style="position: absolute; top: 290px; left:20px; " // 播放器定位。>
<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://114-233-56-113.d.123pan.cn:30443/123-349/56b9ab2b/1657647-0/56b9ab2bf937babe6dcfa4b2941ee55d?v=2&t=1668829191&s=4503537c7ac34015a86c420314fea4e9&filename=%E9%94%99%E4%BD%8D%E7%9A%84%E9%81%97%E6%86%BE.mp3&d=4acd285a', /* 歌曲地址 */
pic: ''
}
});
ap3.init();
</script>
<DIV style="Z-INDEX: 1; POSITION: absolute; WIDTH: 0px; TOP: -220px; LEFT: -50px"><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: 600px"><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>
歌曲好听，图做的也漂亮 唱得不错，支持 可不可以八卦一下 嘿嘿 这个画面色调我很喜欢。 想念一个人是幸福快乐的 漂亮的帖子，精彩的翻唱，新的一年里愿大家都快快乐乐 这帖子做的漂亮，歌也唱的好听。 彩虹密码 发表于 2020-1-22 12:13
歌曲好听，图做的也漂亮
这首老歌好听，听了别人唱过几次就学了一下，自己瞎唱。
↗其〆樂ぐ 发表于 2020-1-22 19:50
想念一个人是幸福快乐的
一份思恋一份情。 陌花雨 发表于 2020-1-22 19:59
这帖子做的漂亮，歌也唱的好听。
瞎唱，感谢聆听。 片片枫叶情 发表于 2020-1-22 20:42
瞎唱，感谢聆听。
这首歌真的唱得不错呢！ 唱的很深情啊~
“你是我的最爱，无人能代替”
页:
[1]