论坛 › 音乐沙龙 › 听乡音

马黑黑 发表于 2023-6-23 18:19

听乡音

本帖最后由 马黑黑 于 2023-6-23 18:22 编辑 <br /><br /><style>
#mydiv {
        margin: -80px 0 0 calc(50% - 651px);
        width: 1140px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/2/icvz.jpg');
        box-shadow: 0 0 8px 0 #000;
        display: grid;
        place-items: center;
        position: relative;
        z-index: 1;
}
#lrc {
        position: absolute;
        width: fit-content;
        height: fit-content;
        top: 5%;
        font: bold 2.4em Sans-serif;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
        white-space: pre;
        display: inherit;
        place-items: inherit;
        user-select: none;
        --state: paused; --motion: cover2; --tt: 2s;
}
#lrc::before, #lrc::after { position: absolute; content: ''; cursor: pointer; }
#lrc::before {
        content: attr(data-lrc);
        width: 100%;
        height: 100%;
        white-space: pre;
        width: 0;
        left: 0;
        color: orange;
        overflow: hidden;
        animation: var(--motion) var(--tt) linear forwards var(--state);
}
#lrc::after {
        width: 50px;
        height: 50px;
        bottom: -60px;
        background: red;
        border-radius: 0%;
        opacity: .7;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        animation: rot 6s infinite linear var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <div id="lrc" data-lrc="HUACHAO">HUACHAO</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=36199224" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let mKey = 0, mFlag = true, slip = 0;
        let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
        let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : '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); };
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        lrc.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

岩新新 发表于 2023-6-23 18:21

沙发欣赏！

马黑黑 发表于 2023-6-23 18:21

帖子代码

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 651px);
        width: 1140px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/2/icvz.jpg');
        box-shadow: 0 0 8px 0 #000;
        display: grid;
        place-items: center;
        position: relative;
}
#lrc {
        position: absolute;
        width: fit-content;
        height: fit-content;
        top: 5%;
        font: bold 2.4em Sans-serif;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
        white-space: pre;
        display: inherit;
        place-items: inherit;
        user-select: none;
        --state: paused; --motion: cover2; --tt: 2s;
}
#lrc::before, #lrc::after { position: absolute; content: ''; cursor: pointer; }
#lrc::before {
        content: attr(data-lrc);
        width: 100%;
        height: 100%;
        white-space: pre;
        width: 0;
        left: 0;
        color: orange;
        overflow: hidden;
        animation: var(--motion) var(--tt) linear forwards var(--state);
}
#lrc::after {
        width: 50px;
        height: 50px;
        bottom: -60px;
        background: red;
        border-radius: 0%;
        opacity: .7;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        animation: rot 6s infinite linear var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <div id="lrc" data-lrc="HUACHAO">HUACHAO</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=36199224" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let mKey = 0, mFlag = true, slip = 0;
        let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
        let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : '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); };
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        lrc.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小辣椒 发表于 2023-6-23 18:24

可以回帖了吧{:4_189:}

小辣椒 发表于 2023-6-23 18:24

黑黑，这个五角星也是裁剪的？

马黑黑 发表于 2023-6-23 18:26

小辣椒 发表于 2023-6-23 18:24
黑黑，这个五角星也是裁剪的？

对呀，CSS里有裁剪路径的

小辣椒 发表于 2023-6-23 18:27

马黑黑 发表于 2023-6-23 18:26
对呀，CSS里有裁剪路径的

先看看，不学总不行。哎~~~拉许多作业的

小辣椒 发表于 2023-6-23 18:29

这个是闽南歌？

醉美水芙蓉 发表于 2023-6-23 18:41

一斛珠 发表于 2023-6-23 18:42

欣赏黑黑老师佳作

马黑黑 发表于 2023-6-23 19:10

一斛珠 发表于 2023-6-23 18:42
欣赏黑黑老师佳作

听得懂俺的家乡话吗

马黑黑 发表于 2023-6-23 19:10

醉美水芙蓉 发表于 2023-6-23 18:41
老师用裁剪的五角星做得播放器厉害！

谢谢。这个裁剪路径通用于任何尺寸的正方形元素。

马黑黑 发表于 2023-6-23 19:11

小辣椒 发表于 2023-6-23 18:29
这个是闽南歌？

俺老家潮汕话

马黑黑 发表于 2023-6-23 19:11

小辣椒 发表于 2023-6-23 18:27
先看看，不学总不行。哎~~~拉许多作业的

这个很简单哦，lrc兼顾了歌词显示和播放控制机制。

马黑黑 发表于 2023-6-23 19:12

小辣椒 发表于 2023-6-23 18:24
可以回帖了吧

任何时候都可以

一斛珠 发表于 2023-6-23 19:15

马黑黑 发表于 2023-6-23 19:10
听得懂俺的家乡话吗

哈，一句都听不懂。

马黑黑 发表于 2023-6-23 19:16

一斛珠 发表于 2023-6-23 19:15
哈，一句都听不懂。

好，太好了

红影 发表于 2023-6-23 20:19

自己裁出的五角星做播放器按钮，这个漂亮。闽南话可真难懂啊{:4_173:}{:4_187:}

红影 发表于 2023-6-23 20:20

马黑黑 发表于 2023-6-23 19:11
俺老家潮汕话

哦，这是潮汕话啊，还以为是闽南话。特别难听懂呢{:4_173:}

上海朝阳 发表于 2023-6-23 20:23

老马是潮汕人呀，这屋顶装饰是你们闽粤地区的特点，彩妆琉璃瓦，八仙过海各显神通。

查看完整版本: 听乡音