【水芙蓉播放器】美人吟
<style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin: 10px-200px;width: 1400px;height: 720px;background: url(https://bbs.cnzv.cc/up/upload/pic/12/20260315-7f27a5d6e6a7ead9ed59b99b60bc511b.jpg)no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#tu{position: absolute;top:0%; left:0%;
width: 100%;background:url(https://bbs.cnzv.cc/up/upload/pic/12/20260315-7f27a5d6e6a7ead9ed59b99b60bc511b.jpg) no-repeat center/cover;
height: 100%;animation: round 6s linear infinite; height: 100%;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(0deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
.stop #tu{animation-play-state: paused;}
#zs{position: absolute;top:2%; left:94%;width: 25px;height: 25px;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
.lyricDisp{transition:.3s all ease;text-align:center;color:#000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);line-height: 50px;--bg:linear-gradient(90deg, #e56420, #ff0000, #000, #800000, #ff0000)}
.lyricDisp:first-child{font-size:1.5em;color:#00aa00;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:10%;height:100%;color:transparent;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);background: var(--bg);-webkit-background-clip: text;text-align:left;}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:40%;top: 25%;width:53%;font-weight:390;font-size:1.8em;}
#player {position:absolute;top: 62%;z-index: 99;
left: 78%;
width: 160px;
height: 160px;
display: grid;cursor:pointer;
place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
display: grid;
place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
.stop #player{animation-play-state: paused;}
</style>
<script type="text/javascript">
var lrcPlayerM=function(){return this.init.apply(this,arguments)};lrcPlayerM.prototype={constructor:lrcPlayerM,init:function(opts){this.showLrcObj=document.querySelector('.LRCShow');this.player=document.getElementById('player');this.image=document.getElementById('testImg');this.imagee=document.getElementById('tetimg');this.gclines=new Array();this.slines=typeof opts.showLines==='number'?opts.showLines:1;for(k=0;k<this.slines;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';if(this.slines==1&&k==1)this.gclines.style.textAlign='center';this.showLrcObj.appendChild(this.gclines)}this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('playing',function(){that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx>=that.lrcVec.length)return;if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}for(n=1;n<that.slines;n++){if(that.idx+n>=that.lrcVec.length){that.gclines.innerHTML="\u3000"}else{that.gclines.innerHTML=that.lrcVec}}that.idx++}});this.player.onclick=function(){if(that.mObj.paused){that.mObj.play();that.image.classList.remove('stop');that.imagee.classList.remove('stop')}else{that.mObj.pause();that.image.classList.add('stop');that.imagee.classList.add('stop')}}; try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}
</script>
<!------ 以下为定制部分 ---->
<divid="papa" >
<div id="tetimg" ><div id='tu'></div>
<div class="LRCShow"></div>
<div id="testImg" >
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<divid="zs"onclick="btnClick()"title="全屏展示/退出全屏" ><div id="全屏"></div>
<div id="退出" ></div>
</div>
<script type="text/javascript">
let lrctxt = `
美人吟
LRC编辑：醉美水芙蓉
蓝蓝的白云天
悠悠水边柳
玉手扬鞭马儿走
月上柳梢头
红红的美人脸
淡淡柳眉愁
飞针走线荷包绣
相思在心头
风儿轻 水长流
哥哥天边走
自古美女爱英雄
一诺千金到尽头
风声紧 雷声吼
妹妹苦争斗
自古红颜多薄命
玉碎瓦全登西楼
蓝蓝的白云天
悠悠水边流
玉手扬鞭马儿走
月上柳梢头
红红的美人脸
淡淡柳眉愁
飞针走线荷包绣
相思在心头
风儿轻 水长流
哥哥天边走
自古美女爱英雄
一诺千金到尽头
风声紧 雷声吼
妹妹苦争斗
自古红颜多薄命
玉碎瓦全登西楼
自古美女爱英雄
一诺千金到尽头
谢谢欣赏
`;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"https://www.joy127.com/url/146202.mp3", // 歌曲链接
showLines:6 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script>
<script>
function btnClick() {
var zs= document.getElementById("zs");
if (this.isFullscreen()) {
全屏.style.opacity= '1'; 退出.style.opacity = '0';
zs.style.cursor="ne-resize";
exitFullScreen();
} else {
全屏.style.opacity= '0'; 退出.style.opacity = '1';
zs.style.cursor="se-resize";
zs.style.visibility='visible';
if (zs.requestFullscreen) {
papa.requestFullscreen();
} else if (zs.webkitRequestFullScreen) {
zs.webkitRequestFullScreen();
} else if (zs.mozRequestFullScreen) {
papa.mozRequestFullScreen();
} else if ( zs.msRequestFullscreen) {
zs.msRequestFullscreen();
}
}
}
// 退出全屏
function exitFullScreen() {
let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
if (exitFullScreen) {
exitFullScreen.call(document);
}
}
// 判断是否全屏
function isFullscreen() {
return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
}
</script> 悦耳动听的歌曲，画面养眼！播放器制作精美！ 感谢水芙蓉精心制作分享！早上好！ 歌画相融，从景入情，情韵悠长 精美的作品，欣赏问好了 好熟悉的素材~{:S01:} 漂亮的音乐帖，画面清新宜人，动态灵动，歌词同步漂亮，播放器简洁又好看，芙蓉制作的棒棒哒~~{:4_123:} 蛐蛐儿好听，有些熟悉，好像是哪部电视剧的插曲~ 芙蓉制作辛苦了~~~{:9_269:} 播放器不会制作，学习