小辣椒 发表于 2024-12-12 21:19

冷漠、石梅合唱《错过的情人》 TO：亚伦


<style>
#cndpt{margin: -50px 20px ;
    position: relative;width: 30px; height: 30px;
    background:#ccc;border: 2px solid #000;box-shadow:0 0px 0px 6px #ccc;
        border-radius: 50%;
        opacity: 1; }

#cndpt:before {position: absolute;
        content: '';
        border-style: solid;
        left: 9px;top:6px;
        border-color: #000;
width: 2px;
        height: 18px;
        border-width: 0 5px 0 5px;
        }

#enopg{margin: 0px 0px ; width: 30px; height: 30px;
        border-radius: 50%;
    position:relative;
   background:#ccc;
    display:none;
}

#enopg:before{border-style: solid;
        border-color: #000;
position: absolute;
        content: '';
left: 10px;top:5px;
        width: 2px;
        border-width: 10px 14px;
        border-color: transparent transparent transparent #000;
        }
#lrc{left: 10%;top: 0%;}#lrcc {right:-50%;top: 14%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position:relative;font:500 2em 华文隶书;color: #ff0000;white-space: pre;-webkit-background-clip: text;z-index: 20;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<div id="cndpt" onclick="pic()" >
<div id="enopg" ></div>
</div>

<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/07/09/cgdqr.mp3" autoplay loop></audio>
<script >
function pic(){
    varimgElement= document.getElementById('enopg');
    if (imgElement.style.display === 'none' || imgElement.style.display === '') {
       imgElement.style.display = 'block';aud.pause();
    } else {
    imgElement .style.display = 'none';aud.play();
    }
}
</script >
<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;
                }
        }
});
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;
      };
aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(lrcStr.innerHTML); /**/
})();
</script >

小辣椒 发表于 2024-12-12 21:21

@亚伦影音工作室

border: 1px感觉还是border: 2px，，看上去播放器立体感强一点

小辣椒 发表于 2024-12-12 21:25

感谢亚伦的精彩分享{:4_199:}

夕阳黄昏 发表于 2024-12-12 21:31

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

亚伦影音工作室 发表于 2024-12-12 22:21

小辣椒 发表于 2024-12-12 21:21
@亚伦影音工作室

border: 1px感觉还是border: 2px，，看上去播放器立体感强一点

喜欢咋样就咋样吧！

红影 发表于 2024-12-12 22:21

漂亮，歌儿也好听{:4_187:}

小辣椒 发表于 2024-12-12 22:32

夕阳黄昏 发表于 2024-12-12 21:31


问好老顽童，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-12-12 22:32

亚伦影音工作室 发表于 2024-12-12 22:21
喜欢咋样就咋样吧！

感觉这样播放器立体感强一点，感谢亚伦分享

小辣椒 发表于 2024-12-12 22:33

红影 发表于 2024-12-12 22:21
漂亮，歌儿也好听

亲爱的，就是套用了代码，测试一下

红影 发表于 2024-12-12 22:34

小辣椒 发表于 2024-12-12 22:33
亲爱的，就是套用了代码，测试一下

亚伦的这个还挺漂亮的呢。{:4_187:}

老谟深虑 发表于 2024-12-13 15:00

          欣赏佳作，点赞！

小辣椒 发表于 2024-12-13 21:02

红影 发表于 2024-12-12 22:34
亚伦的这个还挺漂亮的呢。

是的，不错的

小辣椒 发表于 2024-12-13 21:03

老谟深虑 发表于 2024-12-13 15:00
欣赏佳作，点赞！

谢谢老谟欣赏，晚上好{:4_187:}

红影 发表于 2024-12-14 22:51

小辣椒 发表于 2024-12-13 21:02
是的，不错的

亲爱的做得也很美{:4_187:}
页: [1]
查看完整版本: 冷漠、石梅合唱《错过的情人》 TO：亚伦