论坛 › 欢乐水吧 › 柳欢欢-爱情一场梦

亚伦影音工作室 发表于 2024-2-17 16:54

柳欢欢-爱情一场梦

本帖最后由 亚伦影音工作室 于 2024-4-16 09:47 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:url(https://www.kumeiwp.com/sub/filestores/2022/11/21/8cc174354eb646c775ac6beaa058a5b3.png)0 0/100% 100%,url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:0px;margin-left: -300px;}
#prog { position: absolute; bottom: 5%; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:5%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;cursor: pointer;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/0em serif;color:#ffffff; cursor: pointer; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }

#lrc{left: 30%;top: 80%;}#lrcc {left: 90%;transform: translate(-102%);top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.5em 华文新魏;color: #222222;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
#bk{position:absolute;width:100%;height:100%;background:url(https://www.kumeiwp.com/sub/filestores/2022/11/21/8cc174354eb646c775ac6beaa058a5b3.png)0 0/100% 100%;animation: bbs 6s infinite linear ;z-index: 3; }
@keyframes bbs {
      0% { filter:hue-rotate(360deg)contrast(100%)brightness(100%); }
}
.zt{list-style: none;margin-left: 0px;width:600px;height:400px;position:absolute;z-index: 4;overflow:hidden;}
.zt e{width: 100%;height: 600px;position:relative;animation: myfirst 40s 1 ;line-height: 600px;text-align: center;font: normal 3.5em 黑体;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0;color:#000000;transform:scale(0)}10% {opacity: 1;color: #800000;transform:scale(1)}15% {opacity: 1;color: #800000;transform:scale(1)}50%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1) }}

#vid {position: absolute;width: 100%;height: 100%;top:0px;object-fit: cover;pointer-events: none;opacity: 1;}
</style>

<div id="papa">
<div id="bk"></div>
<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/yc/22/06/03/22060323452709786936.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://bzgz.club/view.php/0a9757e6ef899eb733e89382fec8b24a.mp3" loop autoplay>
</audio>
<ul class="zt">
<e><div>爱情一场梦</div><br> <div style="zoom: .7" > 作词：正云<br>作曲：陈百潭<br>演唱：柳欢欢</div></e>
</ul>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
    <span id="btnplay" title="播放/暂停">❊</span>
         <span id="slider">✈</span>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>               
</div>
<span id="lrcStr" style="visibility: hidden;">
柳欢欢-爱情一场梦
作词：正云
作曲：陈百潭
编曲：李德奎
和声：贺佩莉
混音：唐瑜
制作人：亚伦
出品人：亚伦
爱情就像一场梦
一时哭一时笑语中
我的快乐不要再落空
不要对我来去无影踪
我想说说说你不是不爱我
你曾对对对我用心深爱过
是过错是我的错
原谅我痴情的对你说
我爱你比爱我会更多
真心真意彼此珍惜过
爱情就像一场梦
一时哭一时笑语中
我的快乐不要再落空
不要对我来去无影踪
我想说说说你不是不爱我
你曾对对对我用心深爱过
是过错是我的错
原谅我痴情的对你说
我爱你比爱我会更多
真心真意彼此珍惜过
我想说说说你不是不爱我
你曾对对对我用心深爱过
是过错是我的错
原谅我痴情的对你说
我爱你比爱我会更多
真心真意彼此珍惜过
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
        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) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="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.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
bk.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bk.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bk.style.animationPlayState = 'paused');

vid=document.querySelector('#vid');
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? (aud.play(),vid.play()): (aud.pause(),vid.pause()); }

</script>

三月的阳光 发表于 2024-2-17 18:17

欣赏亚伦帅哥美帖~~{:4_187:}

红影 发表于 2024-2-17 21:22

这个还是小飞机的进度调标识呢。轮播的图片和视频都好美。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-2-17 21:29

这是闽南语歌曲《爱情一阵风》一样曲调的国语版呢{:4_187:}

查看完整版本: 柳欢欢-爱情一场梦