你是我唯一的执着 (对唱版) - 马健涛/李冰
本帖最后由 亚伦影音工作室 于 2025-3-27 18:51 编辑 <br /><br /><style>
#papa {margin: 10px -300px;width: 1164px;height: 620px;background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),url(https://pic1.imgdb.cn/item/678f770ed0e0a243d4f627a0.jpg)no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;}
#tu{position: absolute;top:0%; left:0%;
width: 100%;background:url(https://pic1.imgdb.cn/item/678f770ed0e0a243d4f627a0.jpg) no-repeat center/cover;
height: 100%;animation: round 6s linear infinite; height: 100%;}
.stop #tu{animation-play-state: paused;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#zs{position: absolute;top:2%; left:2%;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:#ffffff;line-height: 50px;}
.lyricDisp:first-child{font-size:1.5em;color:#fff080;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:20%;height:100%;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);text-align:left;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:0%;top: 25%;width:50%;font-weight:990;font-size:1.8em;font-family:仿宋;cursor:pointer;}
</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.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.showLrcObj.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};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='Img' ><div id='tu'></div></div>
<div id="bnt"><div class="LRCShow"></div></div>
<divid="zs"onclick="btnClick()"title="全屏展示/退出全屏" ><div id="全屏"></div>
<div id="退出" ></div>
</div>
<script type="text/javascript">
let lrctxt = `
你是我唯一的执着 (对唱版) - 马健涛/李冰
词：马健涛
曲：马健涛
编曲：马健涛
勋演奏：于保华
混音：马健涛
母带：马健涛
出品：羡然文化
如果我忘了怎么爱你
那一定是我失忆昏迷
如果我有天突然离去
那一定是不想拖累你
如果你忘了回家的路
我愿做星星陪你看顾
如果你孤单夜里无助
化作梦与你朝朝暮暮
你是我唯一的执着
只有你能让我快乐
你是我一生的寄托
就算为你赴汤蹈火
你是我唯一的执着
守护你是我的快乐
你是我一生的寄托
爱你是不变的承诺
如果我忘了怎么爱你
那一定是我失忆昏迷
如果我有天突然离去
那一定是不想拖累你
如果你忘了回家的路
我愿做星星陪你看顾
如果你孤单夜里无助
化作梦与你朝朝暮暮
你是我唯一的执着
只有你能让我快乐
你是我一生的寄托
就算为你赴汤蹈火
你是我唯一的执着
守护你是我的快乐
你是我一生的寄托
爱你是不变的承诺
你是我唯一的执着
只有你能让我快乐
你是我一生的寄托
就算为你赴汤蹈火
你是我唯一的执着
守护你是我的快乐
你是我一生的寄托
爱你是不变的承诺
`;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"https://s2.ananas.chaoxing.com/sv-w7/audio/7e/0d/63/f551ad6cbc46c93a1b693676bd2e4001/audio.mp3", // 歌曲链接
showLines:7 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script>
<script>
var image = document.getElementById("Img"),
button = document.getElementById("bnt");
bnt.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
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> 这个歌词同步有意思，把高亮放在最上面一句，而且高亮歌词的底色也发生了变化。
欣赏亚伦老师好帖{:4_199:} 这个的全屏按钮漂亮。没有暂停按钮呢，需要点击歌词暂停{:4_173:} 欣赏精彩，问候亚伦。 欣赏老师的佳作，点赞！
页:
[1]