醉美水芙蓉 发表于 2022-8-31 21:31

轻松行走人世间 (DJ月之歌版)

<style>
        #papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/630f60ff16f2c2beb1d6d7ed.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; user-select: none; z-index: 1; }
        #mplayer { position: absolute; left: calc(50% - 350px); bottom: 10px; width: 300px; height: 86px; background: rgba(0,0,0,.35); border: 4px double #ccc; border-radius: 3px; border-color: red orange purple tomato; backdrop-filter: blur(4px); display: grid; place-items: center; }
        #mplayer span { position: absolute; transition: .5s; }
        #lrc { top: 4px; padding: 2px; font: normal 1.4em sans-serif; color: #FFD700; text-shadow: 1px 1px 1px #000; }
        #prog { bottom: 6px; width: 290px; height: 1px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer; }
        #prog::before { position: absolute; height: 10px; width: 290px; top: -4px; content: ''; }
        #btnmain { bottom: 14px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
        #btnmain:hover { background: orange; }
        #btnplay { position: absolute; left: 8px; width: 16px; height: 16px; background: #bbb; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
        #btnpause { position: absolute; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #bbb; display: none; }
        #dur, #cur { font: normal 14px sans-serif; bottom: 14px; color: #eee; }
        #dur:hover, #cur:hover, #lrc:hover { color: tomato; }
        #cur { left: 5px ; }
        #dur { right: 5px; }
</style>

<div id="papa">
<div id="mplayer">
        <span id="lrc">lrc歌词</span>
        <span id="prog"></span>
        <span id="btnmain">
                <span id="btnplay"></span>
                <span id="btnpause"></span>
        </span>
        <span id="dur">00:00</span>
        <span id="cur">00:00</span>
</div>
</div>

<script>
let lrcAr = [
        ['0.00','张怡诺 - 轻松行走人世间 (DJ月之歌版)'],
        ['3.05','作词：轻云望月'],
        ['8.07','作曲：轻云望月'],
        ['11.10','编曲：DJ月之歌音乐室'],
        ['13.03','混音：贾晓龙'],
        ['15.04','出品：月之歌文化传媒'],
        ['17.08','LRC编辑：醉美水芙蓉 '],
        ['19.02','开开心心过好每一天'],
        ['23.02','让微笑时刻挂在嘴边'],
        ['27.06','该吃就吃 该穿就穿'],
        ['31.07','快乐心态能益寿延年'],
        ['35.09','轻轻松松行走人世间'],
        ['40.02','把那些烦恼都抛一边'],
        ['44.04','想忙就忙 想闲就闲'],
        ['48.05','人越简单越好运不断'],
        ['52.09','幸福不是挣多少金钱'],
        ['56.09','身体健康才是最关键'],
        ['61.02','累了就请把脚步放慢'],
        ['65.03','别让自己有太多负担'],
        ['69.06','幸福不是有多少存款'],
        ['73.09','身心愉悦才是最圆满'],
        ['78.01','毕竟时光真的很短暂'],
        ['82.03','好好珍惜每一寸时间'],
        ['103.04','轻轻松松行走人世间'],
        ['107.05','把那些烦恼都抛一边'],
        ['111.07','想忙就忙 想闲就闲'],
        ['115.09','人越简单越好运不断'],
        ['120.01','幸福不是挣多少金钱'],
        ['124.03','身体健康才是最关键'],
        ['128.06','累了就请把脚步放慢'],
        ['132.07','别让自己有太多负担'],
        ['137.00','幸福不是有多少存款'],
        ['141.03','身心愉悦才是最圆满'],
        ['145.04','毕竟时光真的很短暂'],
        ['149.05','好好珍惜每一寸时间'],
        ['153.07','幸福不是挣多少金钱'],
        ['158.00','身体健康才是最关键'],
        ['162.03','累了就请把脚步放慢'],
        ['166.05','别让自己有太多负担'],
        ['170.07','幸福不是有多少存款'],
        ['174.09','身心愉悦才是最圆满'],
        ['179.01','毕竟时光真的很短暂'],
        ['183.03','好好珍惜每一寸时间'],
        ['187.05','好好珍惜每一寸时间'],
        ['192.03','谢谢欣赏！']
];
let aud = new Audio();

aud.src = 'https://www.qqmc.com/up/kwlink.php?id=231681019&.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
        dur.innerText = toMin(aud.duration);
        cur.innerText = toMin(aud.currentTime);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.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-31 21:46

欣赏水芙蓉精彩制作{:4_199:}

马黑黑 发表于 2022-8-31 21:59

布局不错，有整体感

绿叶清舟 发表于 2022-8-31 22:00

芙蓉制作真漂亮欣赏了

红影 发表于 2022-8-31 22:44

真漂亮的制作，这歌词说的特别有道理{:4_187:}

醉美水芙蓉 发表于 2022-8-31 22:48

小辣椒 发表于 2022-8-31 21:46
欣赏水芙蓉精彩制作

谢谢小辣椒美女支持！

醉美水芙蓉 发表于 2022-8-31 22:48

马黑黑 发表于 2022-8-31 21:59
布局不错，有整体感

谢谢黑黑老师鼓励！

醉美水芙蓉 发表于 2022-8-31 22:49

绿叶清舟 发表于 2022-8-31 22:00
芙蓉制作真漂亮欣赏了

谢谢清舟美女支持！

醉美水芙蓉 发表于 2022-8-31 22:49

红影 发表于 2022-8-31 22:44
真漂亮的制作，这歌词说的特别有道理

谢谢红影美女支持！

绿叶清舟 发表于 2022-9-1 18:49

醉美水芙蓉 发表于 2022-8-31 22:49
谢谢清舟美女支持！

不客气了

加林森 发表于 2022-9-1 19:04

好听好看。制作得很好！{:4_199:}

醉美水芙蓉 发表于 2022-9-1 19:05

加林森 发表于 2022-9-1 19:04
好听好看。制作得很好！

队长晚上好！

加林森 发表于 2022-9-1 19:07

醉美水芙蓉 发表于 2022-9-1 19:05
队长晚上好！

我正在欣赏你的帖子呢。

红影 发表于 2022-9-1 21:12

醉美水芙蓉 发表于 2022-8-31 22:49
谢谢红影美女支持！

不客气啊，问好水芙蓉美女{:4_187:}
页: [1]
查看完整版本: 轻松行走人世间 (DJ月之歌版)