论坛 › 音乐沙龙 › 归去来兮

马黑黑 发表于 2022-9-27 07:18

归去来兮

本帖最后由 马黑黑 于 2022-9-27 07:19 编辑 <br /><br /><style>
        #papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/Pic/81/57.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
        #mplayer { position: absolute; bottom: 0; left: 20px; width: 300px; height: 80px; display: grid; place-items: center; cursor: pointer; }
        #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
        #mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
        #btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
        #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
        #btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
        #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
        #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, black, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: snow; text-shadow: 1px 1px 0 #111; opacity: .75; }
        #lrc { position: absolute; top: 10px; font: bold 2.6em sans-serif; color: rgba(255,255,255,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 1s; --state: running; }
        #lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(210,60,20,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
        #mpic { position: absolute; left: 0; width: 300px; mix-blend-mode: multiply; }
        @keyframes cover1 { from { width: 0; } to { width: 100%; } }
        @keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="papa">
        <img id="mpic" src="https://638183.freep.cn/638183/Pic/81/tree.jpg" alt="" />
        <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
        <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
        </div>
</div>

<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=1357999894.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());

aud.addEventListener('timeupdate', () => {
        prog.style.background= 'linear-gradient(90deg, black, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
        prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) {
                        if(mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));

let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

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 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-9-27 07:33

代码（本地测试模式）
<style>
        #papa { margin: auto; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/Pic/81/57.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
        #mplayer { position: absolute; bottom: 0; left: 20px; width: 300px; height: 80px; display: grid; place-items: center; cursor: pointer; }
        #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
        #mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
        #btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
        #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
        #btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
        #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
        #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, black, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: snow; text-shadow: 1px 1px 0 #111; opacity: .75; }
        #lrc { position: absolute; top: 10px; font: bold 2.6em sans-serif; color: rgba(255,255,255,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 1s; --state: running; }
        #lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(210,60,20,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
        #mpic { position: absolute; left: 0; width: 300px; mix-blend-mode: multiply; }
        @keyframes cover1 { from { width: 0; } to { width: 100%; } }
        @keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="papa">
        <img id="mpic" src="https://638183.freep.cn/638183/Pic/81/tree.jpg" alt="" />
        <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
        <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
        </div>
</div>

<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=1357999894.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());

aud.addEventListener('timeupdate', () => {
        prog.style.background= 'linear-gradient(90deg, black, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
        prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) {
                        if(mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));

let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

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 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-9-27 07:34

歌词同步模拟采用单元素+伪元素实现，查看解释清去这个链接

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=63391&pid=1726154&fromuid=7130

梦油 发表于 2022-9-27 09:30

黑黑朋友早晨好！这支歌曲的曲调挺有意思。

红影 发表于 2022-9-27 09:58

歌词和进度条的色彩，和女孩的衣服很协调。欣赏黑黑好帖{:4_187:}

红影 发表于 2022-9-27 09:59

歌曲虽然没法听，看不到歌词同步的过程，但黑黑预留的 <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>倒也能感受到歌词的位置和设置了{:4_187:}

醉美水芙蓉 发表于 2022-9-27 11:42

马黑黑 发表于 2022-9-27 12:08

梦油 发表于 2022-9-27 09:30
黑黑朋友早晨好！这支歌曲的曲调挺有意思。

有点特别

马黑黑 发表于 2022-9-27 12:08

醉美水芙蓉 发表于 2022-9-27 11:42
欣赏老师佳作！

{:4_180:}

马黑黑 发表于 2022-9-27 12:08

红影 发表于 2022-9-27 09:59
歌曲虽然没法听，看不到歌词同步的过程，但黑黑预留的 花潮论坛lrc在线倒也能感受到歌词的位置和设置了{:4_ ...

网易的音乐

马黑黑 发表于 2022-9-27 12:09

红影 发表于 2022-9-27 09:58
歌词和进度条的色彩，和女孩的衣服很协调。欣赏黑黑好帖

手机上看，歌词的友好性还是不错的，细节渲染得很细腻

小辣椒 发表于 2022-9-27 12:57

哇瑟~~~大神啊，你不休息的？

咋一眨眼又一个出来了

速度啊，惊呆了

小辣椒 发表于 2022-9-27 13:01

这个红字体特别耀眼，很喜欢，和播放器也是相配，中午溜上来很值得了{:4_178:}

小辣椒 发表于 2022-9-27 13:02

欣赏黑黑的精美制作，大神威武{:4_178:}

马黑黑 发表于 2022-9-27 13:10

小辣椒 发表于 2022-9-27 13:02
欣赏黑黑的精美制作，大神威武

那棵树是我种的

马黑黑 发表于 2022-9-27 13:11

小辣椒 发表于 2022-9-27 12:57
哇瑟~~~大神啊，你不休息的？

咋一眨眼又一个出来了


这个是今早做的

马黑黑 发表于 2022-9-27 13:11

小辣椒 发表于 2022-9-27 13:01
这个红字体特别耀眼，很喜欢，和播放器也是相配，中午溜上来很值得了

手机看的吧？歌词还是挺清晰的

绿叶清舟 发表于 2022-9-27 14:47

.webp，这个格式的图片不好玩，PS都不能直接打开的

梦油 发表于 2022-9-27 14:52

马黑黑 发表于 2022-9-27 12:08
有点特别

是的，黑黑朋友。这只歌曲的区调与众不同，我觉得好听。

马黑黑 发表于 2022-9-27 18:21

梦油 发表于 2022-9-27 14:52
是的，黑黑朋友。这只歌曲的区调与众不同，我觉得好听。

还不错的

查看完整版本: 归去来兮