迷你小播【多行字】
本帖最后由 亚伦影音工作室 于 2024-3-21 17:45 编辑 <br /><br /><style>#ppa{position: relative;width:100%;height:210px;background: linear-gradient(180deg, #CC95C0 0%,#DBD4B4 50%,#7AA1D2 100%);place-items: center;overflow:hidden;margin-top:0px;margin-left: 0px;border-radius: 2px;}
.aplayer-narrow{width:66px}
.aplayer-narrow .aplayer-info{display:none}
.aplayer-withlrc.aplayer-narrow{width:200px}
.aplayer-withlrc.aplayer
.aplayer-pic{height:200px;width:200px}
aplayer-withlrc.aplayer .aplayer-info{margin-left:200px;height:200px}
.aplayer-withlrc.aplayer .aplayer-lrc{display:block}
.aplayer{
font-family: Arial,Helvetica,sans-serif;
margin: 5px;
border-radius: 1px;
overflow: hidden;
user-select: none;
}
.aplayer .aplayer-lrc-content,.aplayer .aplayer-pic .aplayer-hide{display:none}
.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px}
.aplayer .aplayer-pic img{
height: 100%;
width: 100%;
}
.aplayer .aplayer-pic .aplayer-button{position:absolute;opacity:.8;cursor:pointer;box-shadow: 0px 0px0px 1px #fff;border-radius:50%;}
.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}
.aplayer .aplayer-pic .aplayer-play{width:30px;height:30px;background:url(https://pic.imgdb.cn/item/64d863391ddac507cc4a7798.png)no-repeat center/cover;border:0px solid #000000;top:50%;left:50%;margin:-15px 0 0 -15px}
.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}
.aplayer .aplayer-pic .aplayer-pause{width:20px;height:20px;bottom:4px;background:url(https://pic.imgdb.cn/item/64d863801ddac507cc4b2204.png)no-repeat center/cover;right:4px}
.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:14px;line-height:14px}
.aplayer .aplayer-info{margin-left:106px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}
.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:15px}
.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px;color:#555}
.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:14px;color:#555}
.aplayer .aplayer-info .aplayer-controller{position:relative}
.aplayer .aplayer-info .aplayer-controller
.aplayer-bar-wrap{margin:0 120px 0 5px}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:90%;left:82px;top:20px;background:#fff;cursor:pointer!important}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;background:#800000;height:2px}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;cursor:pointer!important}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{}
.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-26px;height:17px;color:#fff;font-size:11px }
.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#fff;font-size:15px}
.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{display:inline-block;margin-left:7px;cursor:pointer!important}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:99}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;background:#b7daff}
.aplayer .aplayer-lrc{margin-top:20px;display:none;position:relative;height:120px;text-align:center;overflow:hidden;margin:-10px 0 10px}
.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;content:' ';width:100%}
.aplayer .aplayer-lrc:before{top:0px;height:10%;}
.aplayer .aplayer-lrc:after{bottom:0px;height:33%;}
.aplayer .aplayer-lrc p{font-size:10px;color:#800000;line-height:20px;padding:0;margin:0px;transition:all .5s ease-out;opacity:0.3}
.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1;margin-top:15px;font-size:20px;}
.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;transition:all .5s ease-out}
</style>
<div id="ppa">
<div id="player1" class="aplayer">
<pre class="aplayer-lrc-content">
<marquee scrolldelay=150 width=300px onmouseover="this.stop()" onmouseout="this.start()"><font color=#000000>亚伦影音播放器</font></marquee>
温奕心 - 一路生花
作词：宋普照
作曲：张博文
编曲：李师珏
录音：田亮
混音：茆博文
和声：张修峰
统筹：颖儿
特别鸣谢：郑浩纳豆
推广策划：杨俊浩、XRay、赵若海
艺人统筹：冼嘉欣
出品：酷狗文化
『酷狗音乐人•星曜计划』
「插件演示效果LRC歌词」
海上的晚霞像年少的画
铺在天空等海鸥衔走它
遥远的帆任风浪拍打
为梦再痛也不会害怕
远走的风沙去谁的天涯
春天可曾在哪里见过他
时间的手抚过了脸颊
他们谁都沉默不说话
我希望许过的愿望一路生花
护送那时的梦抵挡过风沙
指尖的樱花如诗写谁的韶华
疯狂的热爱夹带着文雅
我希望许过的愿望一路生花
将那雨中的人藏在屋檐下
岁月在冲刷逆流沧桑的喧哗
安静的夜晚你在想谁吗
远走的风沙去谁的天涯
春天可曾在哪里见过他
时间的手抚过了脸颊
他们谁都沉默不说话
我希望许过的愿望一路生花
护送那时的梦抵挡过风沙
指尖的樱花如诗写谁的韶华
疯狂的热爱夹带着文雅
我希望许过的愿望一路生花
将那雨中的人藏在屋檐下
岁月在冲刷逆流沧桑的喧哗
安静的夜晚你在想谁吗
我希望许过的愿望一路生花
护送那时的梦抵挡过风沙
指尖的樱花如诗写谁的韶华
疯狂的热爱夹带着文雅
我希望许过的愿望一路生花
将那雨中的人藏在屋檐下
岁月在冲刷逆流沧桑的喧哗
安静的夜晚你在想谁吗
安静的夜晚你在想谁吗
</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 ap1 = new APlayer({
element: document.getElementById('player1'),
narrow: false,
loop: true,
autoplay: 'true',
showlrc: true,
music: {
title: '一路生花',
author: '温奕心',
url: 'https://www.nly3355.cn/mp3/MTYyNTgyNjE1Jmt3bXY=.mp3',
pic: 'https://imgessl.kugou.com/stdmusic/20211021/20211021094704512813.jpg'
}});
ap1.init();
</script> 漂亮好看！ 制作的好，很漂亮。
这个厉害了，能展示那么多歌词呢。欣赏亚伦老师精彩制作{:4_199:} 这个好像评分后要刷新，才不会重音？
好听的歌儿，漂亮的制作，给亚伦老师点赞{:4_199:}
页:
[1]