经典老歌 - 五百年桑田沧海,播放器版,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

亚伦影音工作室 发表于 2026-10-8 13:17:36

经典老歌 - 五百年桑田沧海

本帖最后由亚伦影音工作室于 2026-10-9 08:26 编辑 <br /><br /><style>
#papa {position: relative; margin: 0px -260px; width: 1286px; height: 740px;box-shadow:0 0px 0px 0px #800000;overflow:hidden;
background: #000 url(https://static.oldkids.com.cn/upload/2020/12/31/blog_20201231135844016.jpg)center/cover no-repeat; --state: running;z-index: 1; }
#vid{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#player {position:absolute;top: 4%;z-index: 98;
         left: 85%;
width: 120px;
height: 120px;
display: grid;
place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#880000;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#eee;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#lrc {position:absolute; --motion: cover2;--tt: 1s; left: 50%;top:52%;transform: translate(-50%);perspective: 200px;
   font:normal 2.8em 华文行楷; color:#0000; z-index: 21; }
#lrc::before {position:absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; white-space: pre;background: linear-gradient(40deg, #1E9600 0%,#FFF200 50%,#FF0000 100%); filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }

@keyframes cover1 {
0% {transform: rotate3d(0, 1, 0, 0deg);}

50% {transform: rotate3d(0, 1, 0, -360deg);}

100% {transform: rotate3d(0, 1, 0, -360deg);}
}
@keyframes cover2 {0% {transform: rotate3d(0, 1, 0, 0deg);}

50% {transform: rotate3d(0, 1, 0, -360deg);}

100% {transform: rotate3d(0, 1, 0, -360deg);}

}
</style>

<div id="papa">

<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0443cae07b0ec3d4e1e0a37e84f4d812_preview.mp4" loop muted autoplay=""></video>


<div data-lrc="" id="lrc" title=""></div>

<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>

<audio id="aud" src="https://www.joy127.com/url/159199.mp3" autoplay loop></audio>

</div>

<script >
(function() {

let lrcStr = `经典老歌 - 五百年桑田沧海
LRC编辑：醉美水芙蓉
五百年桑田沧海
顽石也长满青苔
长满青苔
只一颗心儿未死
向往着逍遥自在
向往着逍遥自在
哪怕是野火焚烧
哪怕是冰雪覆盖
依然是志向不改
依然是信念不衰
蹉跎了岁月
激荡着情怀
为什么为什么
偏有这样的安排
五百年桑田沧海
顽石也长满青苔
长满青苔
只一颗心儿未死
向往着逍遥自在
向往着逍遥自在
哪怕是野火焚烧
哪怕是冰雪覆盖
依然是志向不改
依然是信念不衰
蹉跎了岁月
伤透了情怀
为什么？为什么？
偏有这样的安排
为什么？为什么？
偏有这样的安排
谢谢欣赏！
`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, averAdd = 0.3;

/* */
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/* lrc n*3 */
let getLrcAr = (text) => {
   let lrcAr = [];
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/* */
let showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
   mKey += 1;
   mFlag = !mFlag;
};

/*mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/**/
let toMin = (val) => {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60),
   sec = parseFloat(val % 60);
   if (min < 10) min = '0' + min;
   if (sec < 10) sec = '0' + sec;
   return min + ':' + sec;
}

/* л*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/**/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(lrcStr); /**/
})();
</script>
<script>
player.onclick = () => aud.paused ? (aud.play(),vid.play(),player.style.animationPlayState = 'running') : (aud.pause(),vid.pause(),player.style.animationPlayState = 'paused');

</script>

klxf 发表于 2026-10-8 16:00:34

好听好看，谢谢亚伦老师精彩分享

醉美水芙蓉 发表于 2026-10-8 17:42:04

亚伦老师好有创意，歌词同步特效精彩！

醉美水芙蓉 发表于 2026-10-8 17:42:46

彩色翻转歌词同步特效精彩！

页: [1]

纳兰音画网's Archiver

经典老歌 - 五百年桑田沧海