【明知你不会来——片片枫叶情】花开花落记忆的尘埃

片片枫叶情 发表于 2020-8-6 09:28:30

本帖最后由片片枫叶情于 2020-8-6 09:28 编辑 <br /><br /><div style="position: relative; top: 0px; left:0px; width:1000px; height:650px;">
<img src="http://www.ii23.cn/data/attachment/forum/202008/06/090535gadrgdgvpgq1hg1o.jpg" width="1000" height="650">
<div style="position: absolute; top:140px; left:600px; " 播放器定位。="">
<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:250px;width:150px; 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:120px;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:10px; top:90px; height:150px; width: 190; 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: #000000;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://miao02.oss-cn-beijing.aliyuncs.com/1/%E6%98%8E%E7%9F%A5%E4%BD%A0%E4%B8%8D%E4%BC%9A%E6%9D%A5.mp3', /* 歌曲地址 */
            pic: ''
            }
                                       });
ap3.init();
</script>

</div>
</div>

彩虹密码 发表于 2020-8-6 09:31:03

画中画，这帖子美美的，翻唱的也不错，赞

片片枫叶情 发表于 2020-8-6 09:31:24

PS:女声版不好唱，任妙音的更不好唱，前部分感觉不在状态。

陌花雨 发表于 2020-8-6 14:34:02

这个用手机能听到真好，帖子做的也漂亮。唱的不错。

陌花雨 发表于 2020-8-6 14:34:59

片片枫叶情发表于 2020-8-6 09:31
PS:女声版不好唱，任妙音的更不好唱，前部分感觉不在状态。

可以再练练，或许能等到她的到来。

Оο.1秒ヽo 发表于 2020-8-6 15:40:37

歌词这个颜色看不清楚
感谢翻唱

雨后の阳光 发表于 2020-8-6 15:56:59

这帖子不错，挺好听的呀

片片枫叶情 发表于 2020-8-6 16:18:50

Оο.1秒ヽo 发表于 2020-8-6 15:40
歌词这个颜色看不清楚
感谢翻唱

应该把歌词颜色改白色就好一点。

无魂回归 发表于 2020-8-6 18:52:47

支持翻唱，欢迎多多翻唱

II.〆石Zi° 发表于 2020-8-6 23:10:20

片片枫叶情发表于 2020-8-6 16:18
应该把歌词颜色改白色就好一点。

把歌词放电视里，不错

雪千寻 发表于 2020-8-7 22:30:42

这歌调蛮低的，难度挺大。不过楼主还是演绎出了那份苦楚。

落烟泪沫 发表于 2020-8-11 01:53:43

花开花落缘起缘灭

帖子不错唱的好听

页: [1]

三毛钱's Archiver

【明知你不会来——片片枫叶情】花开花落记忆的尘埃