醉美水芙蓉 发表于 2024-12-2 20:43:02

人生没有回头路

<style>
#papa { left: -84px; width: 1024px; height: 640px; background: tan url('https://pic.imgdb.cn/item/630cbc1816f2c2beb1593a00.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: #6b473c; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 55px; font: bold 1.4em sans-serif; color: orange; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>

<div id="papa">
        <span id="conicPlayer" data-per="00:00&#10;00:00"></span>
        <span id="lrctext">lrc歌词</span>
</div>

<script>
let lrcAr =[
        ['0.00','人生没有回头路(DJ 默涵伤感女版)-米灵'],
        ['5.02','词：徐晓岚'],
        ['10.04','曲：李勇军'],
        ['15.06','制作人：花僮'],
        ['20.08','出品人：花僮'],
        ['26.00','LRC编辑：醉美水芙蓉'],
        ['31.03','谁能看清我心里有多苦'],
        ['38.07','谁在乎明天我身在何处'],
        ['45.08','这一条路究竟有多残酷'],
        ['53.09','有太多无奈有太多无助'],
        ['61.03','自己选的路就不要怕苦'],
        ['68.07','现在退出也没有回头路'],
        ['76.02','如果不能哭就假装幸福'],
        ['83.08','任凭这世界无情的摆布'],
        ['91.05','我从不怕孤独从不认输'],
        ['98.06','哪怕错得离谱万劫不复'],
        ['103.00','如果人生路是一场赌注'],
        ['109.09','那就做一个勇敢的赌徒'],
        ['117.08','我从不怕孤独从不认输'],
        ['124.10','默默承受着寒风刺痛骨'],
        ['129.02','从不怕吃苦从不怕辜负'],
        ['136.03','如果感觉累了就放下包袱'],
        ['144.00','我从不怕孤独从不认输'],
        ['151.02','默默承受着寒风刺痛骨'],
        ['155.05','从不怕吃苦从不怕辜负'],
        ['162.06','如果感觉累了就放下包袱'],
        ['167.03','谢谢欣赏！']
];
let aud = new Audio();

aud.src = 'https://cccimg.com/view.php/91142604d2b346a704a627dbfc783aaf.mp3 ';
aud.autoplay = true;
aud.loop = true;

conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        let current = aud.currentTime / aud.duration * 100;
        conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
        conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
        }
});

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;
}
</script>       

klxf 发表于 2024-12-2 20:50:59

页: [1]
查看完整版本: 人生没有回头路