亚伦影音工作室 发表于 2022-8-30 22:14

马黑源码/亚伦独家字幕《风雨飘洒 (DJR7版) - 咖菲》

<style>
#papa { left: -214px; top:10px;width: 1024px; height: 600px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fa30baa3feae1a76c9d2c11eac9c743e.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080') no-repeat center/cover;box-shadow: 3px 3px 10px #000; position: relative; z-index: 1; }
#player { padding: 10px; position: absolute; left: 20px; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; }
#lrctext { margin: 20px auto;font-family:华文隶书;font-size: 40px;color: #FF0078; -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 -1px0);
   -webkit-text-fill-color: transparent;
   background-color: red;
   background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
   background-repeat:no-repeat;
   background-position: -800px 0;
   -webkit-animation:loop 3s linear infinite;text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnmain { width: 32px; height: 32px; display: grid; place-items: center; background: #CCCCCC; border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: orange; }
#btnplay {width: 12px; height: 12px; background: #000000; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 13px; border-style: solid; border-width: 0px 4px; border-color: transparent #000000; display: none; }
#prgline { width: 800px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 2px; cursor: pointer;}
#tmsg { font: normal 16px sans-serif; color: #CCCCCC; user-select: none; text-shadow: 1px 1px 1px #000; transition: 1.5s; }
#tmsg:hover, #lrctext:hover { color: tomato; }
#canv { margin: auto; display: block; position: relative; border: 1px solid; }

@-webkit-keyframes loop{
   0%{background-position: -800px 0;}
   100%{background-position: -0 0;}
}
</style>

<div id="papa">
        <div id="player">
                <div id="lrctext">lrc歌词</div>
                <div id="btnwrap">
                        <span id="btnmain"><span id="btnplay"></span><span id="btnpause"></span></span>
                        <span id="prgline"></span><span id="tmsg">00:00 | 00:00</span>
                </div>
        </div>
</div>

<script>
let lrcAr = [
        ['0.00','风雨飘洒 (DJR7版) - 咖菲'],
        ['1.00','可日子如何过的安稳'],
        ['6.00','我 家徒四壁 除了成功 别无选择'],
        ['10.00','看风雨飘飘洒洒'],
        ['12.00','人群中也会想家'],
        ['14.00','城市的高楼大厦'],
        ['16.00','困住了谁的牵挂'],
        ['18.00','回忆的一砖一瓦'],
        ['20.00','在心底不会融化'],
        ['21.00','谁不是装聋作哑'],
        ['23.00','在这片风雨之中 出发'],
        ['27.00','空荡的公交 昏暗的车灯'],
        ['31.00','转几趟地铁 才走到家门'],
        ['35.00','街边的歌声'],
        ['36.00','抖落生活的灰尘'],
        ['39.00','打开空无 一人的门'],
        ['42.00','黑夜的喧嚣 孤独的灵魂'],
        ['46.00','用酒精麻醉 疲惫的青春'],
        ['49.00','满身的伤痕'],
        ['51.00','才读懂适者生存'],
        ['53.00','可日子如何过的安稳'],
        ['57.00','看风雨飘飘洒洒'],
        ['59.00','人群中也会想家'],
        ['61.00','城市的高楼大厦'],
        ['63.00','困住了谁的牵挂'],
        ['65.00','回忆的一砖一瓦'],
        ['66.00','在心底不会融化'],
        ['68.00','谁不是装聋作哑'],
        ['70.00','在这片风雨之中 出发'],
        ['84.00','黑夜的喧嚣 孤独的灵魂'],
        ['109.00','用酒精麻醉 疲惫的青春'],
        ['113.00','满身的伤痕'],
        ['115.00','才读懂适者生存'],
        ['117.00','可日子如何过的安稳'],
        ['121.00','看风雨飘飘洒洒'],
        ['123.00','人群中也会想家'],
        ['125.00','城市的高楼大厦'],
        ['126.00','困住了谁的牵挂'],
        ['128.00','回忆的一砖一瓦'],
        ['130.00','在心底不会融化'],
        ['132.00','谁不是装聋作哑'],
        ['134.00','在这片风雨之中 出发']
];
let aud = new Audio();
aud.src = 'https://www.qqmc.com/mp3/music226632361.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prgline.style.backgroundSize = prgline.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
        tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
        }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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>

加林森 发表于 2022-8-30 22:18

制作得好看，亚伦动作真快！{:4_199:}

青青子衿 发表于 2022-8-30 22:51

欢迎新朋友~！。。。帖子干净，雅致。。赞一个~！{:4_204:}

醉美水芙蓉 发表于 2022-8-30 22:58

红影 发表于 2022-8-30 23:09

这个进度条拉长也漂亮呢，歌词变色也很漂亮。欣赏亚伦老师好帖{:4_187:}

马黑黑 发表于 2022-8-30 23:57

这是改进版，非常漂亮
页: [1]
查看完整版本: 马黑源码/亚伦独家字幕《风雨飘洒 (DJR7版) - 咖菲》