【谁能给我一杯忘情水—片片枫叶情】忘了你忘了我忘了所有的记忆
本帖最后由 片片枫叶情 于 2020-6-5 12:03 编辑 <br /><br /><div style="position: relative; top: 0px; left:0px; width:1000px; height:574px;"><img src="http://www.ii23.cn/data/attachment/forum/202006/05/114934agzmcnyez30rbb8n.jpg" width="1000" height="574">
<div style="position: absolute; top: 140px; left:100px; " 播放器定位。="">
<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:350px;width:210px; 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:30px; top:30px; height:280px; 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: #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://wp.zp68.com/sub/filestores/2020/06/05/a1dd69050bdf157fa0b1cb41e70a3d74.mp3', /* 歌曲地址 */
pic: ''
}
});
ap3.init();
</script>
</div>
</div> 能给你一杯苦咖啡 唱这么。。滴歌 咋啦这是 来听歌滴，有点伤感，还是很好听 貌似片片妞失恋了......... 唱得不错，支持 雨后の阳光 发表于 2020-6-5 13:21
貌似片片妞失恋了.........
我也是这么觉得的。。。。。。 今天我还回帖说好久没听到你唱歌了，今天就分享了啊！就是有点伤感。 II.〆浅笑° 发表于 2020-6-5 12:20
能给你一杯苦咖啡 唱这么。。滴歌 咋啦这是
翻出来以前的一首翻唱歌曲呢 彩虹密码 发表于 2020-6-5 12:55
来听歌滴，有点伤感，还是很好听
本来就是一首伤感歌曲。 雨后の阳光 发表于 2020-6-5 13:21
貌似片片妞失恋了.........
去年和朋友学的一首歌，高音难唱，一直放那里的。 听唱这歌知楼主此刻心情不怎么好吧
雨后の阳光 发表于 2020-6-5 13:21
貌似片片妞失恋了.........
你真是万事通呀，这也知道{:eb343:}
陌花雨 发表于 2020-6-5 13:41
今天我还回帖说好久没听到你唱歌了，今天就分享了啊！就是有点伤感。
最近没录什么了，找一些以前翻唱的分享一下。 傲天狼王 发表于 2020-6-5 18:02
听唱这歌知楼主此刻心情不怎么好吧
唱歌和听歌都是一种心情吧。 这世上哪有什么忘情水 只是想忘不能忘而已 片片枫叶情 发表于 2020-6-5 20:35
最近没录什么了，找一些以前翻唱的分享一下。
嗯！以后多分享哈！是忙的吧！ 这调调太高了 片妞看来非常喜欢唱歌 这是咋啦忘情至此～哈哈
我还是只当唱一首歌吧～ II.〆石Zi° 发表于 2020-6-6 07:15
这调调太高了
高音我唱不好，好几首高音的歌都放那里很久了，有些部分不满意。
页:
[1]
2