论坛 › 音乐沙龙 › 梦驼铃 同玩岁月频谱

小辣椒 发表于 2025-4-5 21:23

梦驼铃 同玩岁月频谱

<style>
#papa {
        margin: 140px 0 20px calc(50% - 740px); auto;box-shadow: 2px 2px 10px #eee;display: grid;place-items: center;border-radius: 32px;
        width: 1314px;
        height: 712px;
        box-shadow: 4px 8px 28px #eee;
        background:url('https://wj.zp68.com/lxx/yunhua/2025/04/04/GIF.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#ppn{ position: absolute;width: 100%; height: 100%; opacity:1; z-index:1;
background:url('https://wj.zp68.com/lxx/yunhua/2025/04/04/GIF.gif') no-repeat 0% 0%/1314px 714px;
}
#lrcDiv {left: 300px; top: 100px;
        --hlcolor: yellow;
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 6px;z-index: 3;
        width: 650px;
        height: 150px;
        overflow: hidden;
        font: normal 18px/24px 'Microsoft YaHei', sans-serif;
        text-align: center;
        color: tan;
        background: none;
}

#lrcDiv > p {
        margin: 0;
        padding: 0;
        transition: .95s;
}
#lrcDiv > p.hlight {
        color: var(--hlcolor);
        font-size: 28px;
        font-weight: bold;
}

#mplayer {
        --track: silver;
        --prog: red;
        --percent: 0;
        display: flex;
        left: 300px; top: 600px;
        gap: 15px;z-index: 3;
        flex-direction: column;
        align-items: center;
        width: 650px;
        background: none;
        color: white;
        padding: 15px;
        position: absolute;
}

#btns-area {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
}

#btn-play {z-index:3;
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: relative;
}

#btn-play:hover::after {
        opacity: .7;
        filter:alpha(opacity=50);;
}

#btn-play::after {
        position: absolute;
        content:'';
        width: 100%;
        height: 100%;
        background: var(--prog);
        clip-path: var(--clip);
}

#progDiv {
        width: 100%;
        height: 10px;
        background: linear-gradient(to right, var(--prog) var(--percent), var(--track) var(--percent), var(--track) 0) no-repeat 0 50% / 100% 2px;
        cursor: pointer;z-index: 1;
}

.play {z-index:3;
        --clip: polygon(10% 0, 100% 50%, 10% 100%);
}

.pause {z-index:3;
        --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}

#syz {position: absolute;left: 62%; top:5%; z-index: 2; opacity: .5;   
    }
.clock_wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 50%;z-index:2;
      max-height: 50%x;
      background:auto;
      margin: 0 auto;
    }      
</style>
<div id="papa">
<div id="lrcDiv"></div>
<div id="mplayer">
      
      <div id="btns-area">
                <div id="time1">00:00</div>
                <div id="btn-play" class="pause"></div>
                <div id="time2">00:00</div>
      </div>
      <div id="progDiv"></div>
</div><divid="syz">
<div class="clock_wrapper">
    <canvas id="clock" width="250px" height="250px"></canvas>
</div></div>
<div id="ppn"></div><div id="ppcn" ></div>
<audio src="https://aod.cos.tx.xmcdn.com/storages/3b09-audiofreehighqps/39/34/GMCoOSYJDaaFACAAAAJzEJDF.m4a" autoplay loop></audio>

</div>
<script>
const mplayer = document.querySelector('#mplayer');
        const aud = document.querySelector('audio');
        const lrcDiv = document.querySelector('#lrcDiv');
        const progDiv = document.querySelector('#progDiv');
        const btnPlay = document.querySelector('#btn-play');
        const vids = document.querySelectorAll('video');

        let lrcAr = [], isFScreen = false, fsTimer;

        const getLrcAr = (text) => {
                const ar = text.trim().split(/[\r\n]+/g);
                var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        let result = item.match(reg);
                        let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                        lrcAr.push(.trim()]);
                        let p = document.createElement('p');
                        p.innerText = result.trim();
                        lrcDiv.appendChild(p);
                });
                lrcAr.sort((a, b) => a - b);
        };

        const updatePlayerDatas = () => {
                const percent = (aud.currentTime / aud.duration) * 100;
                time1.innerText = formatTime(aud.currentTime);
                time2.innerText = formatTime(aud.duration);
                mplayer.style.setProperty('--percent', percent + '%');
                for (let i = 0; i < lrcAr.length; i ++) {
                        const lrc = {time: lrcAr, text: lrcAr};
                        const next = i < lrcAr.length - 1 ? lrcAr : null;
                        const p = lrcDiv.children;
                        if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
                                p.classList.add('hlight');
                                lrcDiv.scroll({left: 0, top: p.offsetTop - lrcDiv.offsetHeight / 2 + 12, behavior: 'smooth'});
                        } else {
                                p.classList.remove('hlight');
                        }
                }
        };

        const formatTime = (seconds) => {
                const mins = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        };

        const mState = () => {
                if (aud.paused) {
                        btnPlay.className = 'play';
                        btnPlay.title = '点击播放';
                       
                } else {
                        btnPlay.className = 'pause';
                        btnPlay.title = '点击暂停';                       
                       
                }
        };       

        progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
        progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));

const lrc = `
风沙挥不去印在
历史的血痕
风沙挥不去苍白
海棠血泪
久儿红 - 梦驼铃 (新声版)(DJ默涵版)
作词：小轩
作曲：谭健常
攀登高峰望故乡
黄沙万里长
何处传来驼铃声
声声敲心坎
盼望踏上思念路
飞纵千里山
天边归雁披彩霞
乡关在何方
风沙挥不去印在
历史的血痕
风沙挥不去苍白
海棠血泪
。。。。。
攀登高峰望故乡
黄沙万里长
何处传来驼铃声
声声敲心坎
盼望踏上思念路
飞纵千里山
天边归雁披彩霞
乡关在何方
黄沙吹老了岁月
吹不老我的思念
曾经多少个今夜
梦回秦关
风沙挥不去印在
历史的血痕
风沙挥不去苍白
海棠血泪
黄沙吹老了岁月
吹不老我的思念
曾经多少个今夜
梦回秦关
梦回秦关
梦回秦关
谢谢欣赏

`;
getLrcAr(lrc);
aud.addEventListener('timeupdate', updatePlayerDatas);
        aud.addEventListener('playing', mState);
        aud.addEventListener('pause', mState);
        btnPlay.addEventListener('click', () => aud.paused ?(aud.play(),ppcn.style.opacity= '0',ppn.style.opacity = '1',vid1.play()): (aud.pause(),ppcn.style.opacity= '1',ppn.style.opacity = '0',vid1.pause()));

</script>

小辣椒 发表于 2025-4-5 21:27

@走过岁月

岁月你那个黑背景的梦驼铃音频效果非常美，我做了二次效果出来就是没有很理想

现在用旧图加个透明频谱改了你的纯音，加了首歌曲进去，只能这样了，那个黑背景的频谱以后有机会再继续做一次

绿叶清舟 发表于 2025-4-5 21:31

美女还在眨眼呢，制作漂亮，颜色也热烈真合了那把火了

小辣椒 发表于 2025-4-5 21:40

绿叶清舟 发表于 2025-4-5 21:31
美女还在眨眼呢，制作漂亮，颜色也热烈真合了那把火了

哈哈，清舟这个不是火，是岁月梦驼铃的音频效果，我的图没有选好，颜色配的不够完美

樵歌 发表于 2025-4-5 21:41

色彩和谐特别契合这首歌的情绪。还有美女眨眼眼！太生动了，还有驼队行进中，一切都把歌曲要表达的意境给完美诠译了！{:4_178:}

樵歌 发表于 2025-4-5 21:42

小辣椒太厉害了！樵哥哥佩服{:4_187:}

小辣椒 发表于 2025-4-5 21:48

樵歌 发表于 2025-4-5 21:41
色彩和谐特别契合这首歌的情绪。还有美女眨眼眼！太生动了，还有驼队行进中，一切都把歌曲要表达的意境给完 ...

谢谢樵哥哥夸奖，这个动图也是小辣椒以前玩过的，这个动图今天重新加了点效果进去{:4_173:}

小辣椒 发表于 2025-4-5 21:50

樵歌 发表于 2025-4-5 21:42
小辣椒太厉害了！樵哥哥佩服

樵哥哥你现在才厉害的，无论诗词，翻唱 代码运用都拿捏的杠杠的{:4_189:}

梦油 发表于 2025-4-6 07:22

这美女眼睛动得真迷人。

梦江南 发表于 2025-4-6 07:41

好漂亮的图图，美女还在眨眼呢！{:4_187:}

红影 发表于 2025-4-6 08:17

亲爱的用了那么多动图，那大雁、行走的驼队、还有频谱和美女的眼睛，全部能一键全控呢{:4_199:}

红影 发表于 2025-4-6 08:18

这个真的像啊苍茫大漠上的行走，前方还有美女迷人的微笑，让人更有信心跨越沙漠。
欣赏亲爱的好帖{:4_199:}

樵歌 发表于 2025-4-6 12:28

小辣椒 发表于 2025-4-5 21:48
谢谢樵哥哥夸奖，这个动图也是小辣椒以前玩过的，这个动图今天重新加了点效果进去

反正你就会不断地出新，好玩{:4_187:}

樵歌 发表于 2025-4-6 12:29

小辣椒 发表于 2025-4-5 21:50
樵哥哥你现在才厉害的，无论诗词，翻唱 代码运用都拿捏的杠杠的

代码抄你和红影的都是节节巴巴的{:4_201:}

走过岁月 发表于 2025-4-6 13:12

小辣椒制作的很好

走过岁月 发表于 2025-4-6 13:13

又要表扬一下小辣椒

小辣椒 发表于 2025-4-6 21:09

走过岁月 发表于 2025-4-6 13:13
又要表扬一下小辣椒

现在小辣椒速度慢的，不能快速做出来了{:4_198:}

小辣椒 发表于 2025-4-6 21:11

走过岁月 发表于 2025-4-6 13:12
小辣椒制作的很好

谢谢岁月的频谱效果{:4_187:}，也是感觉这个频谱以后会加深颜色的背景玩玩

小辣椒 发表于 2025-4-6 21:11

樵歌 发表于 2025-4-6 12:29
代码抄你和红影的都是节节巴巴的

樵哥哥只要会做出来就是成功了

小辣椒 发表于 2025-4-6 21:12

樵歌 发表于 2025-4-6 12:28
反正你就会不断地出新，好玩

只是现在速度很慢，没有时间玩

查看完整版本: 梦驼铃 同玩岁月频谱