论坛 › 音乐沙龙 › 动了情的人（Live合唱版） 帖赠：黑黑

小辣椒 发表于 2026-1-23 21:22

动了情的人（Live合唱版） 帖赠：黑黑

<style>
        @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
        #tz {
                margin: 140px 0 30px calc(50% - 750px);
                width: 1346px;
                height:771px;
                background: #000;
                border-radius:32px;
                position: relative;
                overflow: hidden;
                --state: running;
                --main-color: #efede2;
        }
        #lrcDiv {
                writing-mode: vertical-rl;
                right: 70%;
                top: 12%;
                text-align: left;
                color: #ffffff;
                --hlcolor: #67acf9;
                z-index: 999;
        }
        #mplayer, #fsbtn, #playimg {
                display: none !important;
        }
        .vid {
                opacity: .05;
                z-index: 1;
        }
       
        #staticBg {
                width:1346px;
                height:771px;
                position:absolute;
                left: 0px;
                top: 0px;
                z-index: 1;
                display: none;
        }
       
        #dynamicBg {
                width:1346px;
                height:771px;
                position:absolute;
                left: 0px;
                top: 0px;
                z-index: 2;
                display: block;
        }
        .ma {
                position: absolute;
                width: 90px;
                height: 90px;
                left: 43%;
                bottom: 55px;
                z-index: 999;
                cursor: pointer;
                transition: transform 0.3s ease;
                animation: rotate 8s linear infinite var(--state);
        }
       
        .ma:hover {
                transform: scale(1.1);
        }
        @keyframes rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
        }
       
        .prog {
                position: absolute;
                width: 240px;
                height: 6px;
                background: linear-gradient(to right, var(--main-color) var(--prg, 0%), transparent 0%);
                border: 2px solid var(--main-color);
                border-radius: 5px;
                bottom: 30px;
                left: 47%;
                transform: translateX(-50%);
                z-index: 999;
                cursor: pointer;
                transition: all 0.3s ease;
        }
       
        .prog:hover {
                height: 12px;
                background: linear-gradient(to right, var(--main-color) var(--prg, 0%), #333 0%);
        }
        .time-display {
                position: absolute;
                width: 360px;
                left: 47%;
                transform: translateX(-50%);
                bottom: 25px;
                z-index: 999;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: var(--main-color);
                font: normal 14px sans-serif;
                pointer-events: none;
                background: transparent;
        }
       
        .current-time, .total-time {
                background: transparent;
                padding: 2px 8px;
                border-radius: 4px;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
                color: var(--main-color);
                font-weight: bold;
        }
       
        .lrc-paused {
                animation-play-state: paused !important;
                --state: paused !important;
                opacity: 0.9;
                filter: grayscale(0.3);
        }
</style>

<div id="tz" class="pa">

        <img id="staticBg" src="https://xlaj.cn/upfile/2026/01/23/3F.jpg">
        <img id="dynamicBg" src="https://xlaj.cn/upfile/2026/01/23/3F.gif" id='bj'>
       
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop></video>
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/1874-audiofreehighqps/41/FB/GAqhp50M0p5VACAAAAQpnCkh.m4a" autoplay loop></audio>
</div>
<div class="zw"></div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
       
        var isPlaying = true;
        var isGifPlaying = true;       
        var gc = `
动了情的人（Live合唱版）
作曲：阿末@走心音乐
演唱：群星      
当初对我承诺地久天长
现在看来确实太过荒唐
对于你来讲不论谁在身旁
都只是临时爱一场
如果早知道会变成这样
就不该把心交到你手上
直到受过了伤才看清真相
无数次失眠到天亮
动了情的人才会觉得夜漫长
毕竟放不下的心事最难藏
誓言说的漂亮不过是你撒的谎
留我一个人空想到天亮
动了情的人才会觉得夜太长
只怪念念不忘却得不到回响
努力付出一场最后红了眼眶
所有期待成了昂贵奢望
歌词同步编辑：小辣椒
如果早知道会变成这样
就不该把心交到你手上
直到受过了伤才看清真相
无数次失眠到天亮
动了情的人才会觉得夜漫长
毕竟放不下的心事最难藏
誓言说的漂亮不过是你撒的谎
留我一个人空想到天亮
动了情的人才会觉得夜太长
只怪念念不忘却得不到回响
努力付出一场最后红了眼眶
所有期待成了昂贵奢望
谢谢欣赏
`;
       
        hcplay(tz, gc, 7);

        const videoElement = document.querySelector('.vid');
        const audioElement = document.getElementById('aud');
        const lrcDiv = document.getElementById('lrcDiv');
        const staticBg = document.getElementById('staticBg');
        const dynamicBg = document.getElementById('dynamicBg');
       
        const existingButtons = document.querySelectorAll('.ma, #playimg, #mplayer, #fsbtn');
        existingButtons.forEach(btn => {
                if (btn.parentNode) {
                        btn.parentNode.removeChild(btn);
                }
        });

        const playimg = document.createElement('img');
        playimg.className = 'ma';
        playimg.src = 'https://xlaj.cn/upfile/2026/01/23/la.png';
        playimg.title = '点击播放/暂停 (空格键)';
        tz.appendChild(playimg);

        const progressBar = document.createElement('div');
        progressBar.className = 'prog';
        progressBar.title = '点击调节播放进度';
        tz.appendChild(progressBar);

        const timeDisplay = document.createElement('div');
        timeDisplay.className = 'time-display';

        const currentTime = document.createElement('span');
        currentTime.className = 'current-time';
        currentTime.textContent = '0:00';
        timeDisplay.appendChild(currentTime);
       
        const totalTime = document.createElement('span');
        totalTime.className = 'total-time';
        totalTime.textContent = '0:00';
        timeDisplay.appendChild(totalTime);
       
        tz.appendChild(timeDisplay);

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

        function updateProgressBar() {
                if (audioElement.duration) {
                        const progress = (audioElement.currentTime / audioElement.duration) * 100;
                        progressBar.style.setProperty('--prg', progress + '%');

                        currentTime.textContent = formatTime(audioElement.currentTime);
                        totalTime.textContent = formatTime(audioElement.duration);
                }
        }
       
        progressBar.addEventListener('click', (e) => {
                if (audioElement.duration) {
                        const rect = progressBar.getBoundingClientRect();
                        const percent = (e.clientX - rect.left) / rect.width;
                        audioElement.currentTime = percent * audioElement.duration;
                }
        });

        audioElement.addEventListener('timeupdate', updateProgressBar);
        audioElement.addEventListener('loadedmetadata', updateProgressBar);

        function togglePlayState() {
                if (isPlaying) {

                        audioElement.pause();
                        videoElement.pause();

                        staticBg.style.display = 'block';
                        dynamicBg.style.display = 'none';
                        isGifPlaying = false;

                        if (lrcDiv) {
                                lrcDiv.classList.add('lrc-paused');
                                lrcDiv.style.setProperty('--lrc-state', 'paused');
                        }

                        tz.style.setProperty('--state', 'paused');
                        isPlaying = false;
                } else {

                        audioElement.play();
                        videoElement.play();

                        staticBg.style.display = 'none';
                        dynamicBg.style.display = 'block';
                        isGifPlaying = true;

                        if (lrcDiv) {
                                lrcDiv.classList.remove('lrc-paused');
                                lrcDiv.style.setProperty('--lrc-state', 'running');
                        }

                        tz.style.setProperty('--state', 'running');
                        isPlaying = true;
                }
        }

        playimg.addEventListener("click", togglePlayState);

        document.addEventListener('keydown', function(event) {
                if (event.code === 'Space' && !event.target.matches('input, textarea, select')) {
                        event.preventDefault();
                        togglePlayState();
                }
        });
       

        setTimeout(() => {
                if (lrcDiv && isPlaying) {
                        lrcDiv.style.setProperty('--lrc-state', 'running');
                        lrcDiv.classList.remove('lrc-paused');
                }
                tz.style.setProperty('--state', 'running');
        }, 100);
</script>

小辣椒 发表于 2026-1-23 21:24

@马黑黑

黑黑，用你的源码去AI修改了一个一键停止背景动图和视频的效果，哈哈，成功了，谢谢黑黑的源码分享{:4_187:}

小辣椒 发表于 2026-1-23 21:24

发现AI是真的强大DeepSeek，是太强大了

红影 发表于 2026-1-23 22:18

这制作很漂亮，竖排的多行歌词也漂亮。
欣赏亲爱的好帖{:4_199:}

也曾年轻 发表于 2026-1-23 22:27

https://wx3.sinaimg.cn/large/008vf4mogy1h9h787ug5ig30aa08c41y.jpg

马黑黑 发表于 2026-1-24 08:28

小辣椒 发表于 2026-1-23 21:24
@马黑黑

黑黑，用你的源码去AI修改了一个一键停止背景动图和视频的效果，哈哈，成功了，谢谢黑黑的源码 ...

AI使用的方法就是两张图片替换，这是常用的手段。

还有用 canvas 画布的，我们也曾演示过。

二者的区别仅在于成本问题：替换图片消耗的是体量层面的资源，用画布实现需要的是编程层面的投入。

梦油 发表于 2026-1-24 09:58

直排歌词字幕与美女对角相称，使人感到画面布局稳重大方又不失浪漫。

愤怒的葡萄 发表于 2026-1-24 10:04

这制作很漂亮，竖排的多行歌词也漂亮。

欣赏好帖。

杨帆 发表于 2026-1-24 13:22

效果惊艳，谢谢小辣椒精彩分享{:4_204:}

梦江南 发表于 2026-1-24 17:51

画面和歌词相得益彰，漂亮极了！{:4_187:}

梦江南 发表于 2026-1-24 17:52

还能一键暂停太好了，厉害了！{:4_199:}

走过岁月 发表于 2026-1-24 21:16

小辣椒做的不错啊，很成功

小辣椒 发表于 2026-1-25 22:12

红影 发表于 2026-1-23 22:18
这制作很漂亮，竖排的多行歌词也漂亮。
欣赏亲爱的好帖

亲爱的，这个图图也是旧图，重新制作了，省心省力

小辣椒 发表于 2026-1-25 22:13

也曾年轻 发表于 2026-1-23 22:27


问好老师，感谢欣赏{:4_187:}

小辣椒 发表于 2026-1-25 22:13

马黑黑 发表于 2026-1-24 08:28
AI使用的方法就是两张图片替换，这是常用的手段。

还有用 canvas 画布的，我们也曾演示过。


是的，黑黑的编程太强大了{:4_199:}

小辣椒 发表于 2026-1-25 22:14

梦油 发表于 2026-1-24 09:58
直排歌词字幕与美女对角相称，使人感到画面布局稳重大方又不失浪漫。

问好梦油，感谢欣赏和支持{:4_187:}

马黑黑 发表于 2026-1-25 22:14

小辣椒 发表于 2026-1-25 22:13
是的，黑黑的编程太强大了

哪里哪里

小辣椒 发表于 2026-1-25 22:14

愤怒的葡萄 发表于 2026-1-24 10:04
这制作很漂亮，竖排的多行歌词也漂亮。

欣赏好帖。

问好葡萄，好久不见，

谢谢欣赏和支持{:4_187:}

小辣椒 发表于 2026-1-25 22:15

杨帆 发表于 2026-1-24 13:22
效果惊艳，谢谢小辣椒精彩分享

问好杨帆，谢谢欣赏和支持，杨帆的制作也是很漂亮的

小辣椒 发表于 2026-1-25 22:16

梦江南 发表于 2026-1-24 17:51
画面和歌词相得益彰，漂亮极了！

阿姨晚上好，以前玩过的旧图，节约时间，重新制作加了点效果，这样速度快一点

查看完整版本: 动了情的人（Live合唱版） 帖赠：黑黑