论坛 › 音乐沙龙 › 逆流成河 (Live合唱版) TO：花飞飞

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

逆流成河 (Live合唱版) TO：花飞飞

<style>
#papa {
        margin: 140px 0 20px calc(50% - 731px);auto;box-shadow: 2px 2px 10px #222;display: grid;place-items: center;border-radius: 32px;
        width: 1300px;
        height: 699px;
        box-shadow: 2px 2px 8px #222;
        background:url('https://xlaj.cn/upfile/2025/04/08/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://xlaj.cn/upfile/2025/04/08/GIF.gif') no-repeat 0% 0%/1300px 699px;
}
#lrcDiv {left: 300px; top: 90px;
        --hlcolor:         GhostWhite;
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 6px;z-index: 3;
        width: 650px;
        height: 150px;
        overflow: hidden;
        font: normal 16px/24px 'Microsoft YaHei', sans-serif;
        text-align: center;
        color: CadetBlue;
        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: GhostWhite;
        --percent: 0;
        display: flex;
        left: 350px; top: 600px;
        gap: 15px;z-index: 3;
        flex-direction: column;
        align-items: center;
        width: 550px;
        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://upfile.mp3.wf/view.php/09eac30b3434f7797fb3e6ea49f9394d.mp3" 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 = `
逆流成河 (Live合唱版)
歌手：金南玲         
斑驳的夜色在说什么
谁能告诉我如何选择
每当我想起分离时刻
悲伤就逆流成河
你给的温暖属于谁呢
谁又会在乎我是谁呢
每当我想起你的选择
悲伤就逆流成河
歌词同步编辑：小辣椒
失去了你也是种获得
一个人孤单未尝不可
每当我深夜辗转反侧
悲伤就逆流成河
离开你也是一种快乐
没人说一定非爱不可
想问你双手是否温热
悲伤就逆流成河
我想是因为我太天真
难过是因为我太认真
每当我想起你的眼神
悲伤就逆流成河
谢谢欣赏

`;
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-8 21:30

@花飞飞

飞飞不知道你这个可以不可以看见，图片是国内服务器上传的，音乐是国外服务器，你试一下可以听到音乐吗

不行我再国内服务器上传，也是测试一下你那些会看不见

小辣椒 发表于 2025-4-8 21:32

这个估计应该看得见吧

小辣椒 发表于 2025-4-8 21:34

@走过岁月

岁月用了你的 旧日时光缓缓流 画面效果，加了二个效果进去，大提琴纯音没有用，看了有小河就用了这首 逆流成河

红影 发表于 2025-4-8 21:53

亲爱的在水流里还加了个舞动的身影，这效果真神奇{:4_187:}

红影 发表于 2025-4-8 21:55

水里还有跳起的小鱼。这两个效果一下，让原视频更美了。
这个还是一键全控的呢。欣赏亲爱的好帖，飞飞收礼开心{:4_199:}

冬天的雨 发表于 2025-4-8 23:20

可以听到音乐，当然也是可以看见画面，动图漂亮 鉴定完毕{:4_173:}

冬天的雨 发表于 2025-4-8 23:21

背景瀑布里面加了一个帅哥进去，美女在小桥上心惊肉跳的{:4_170:}

梦油 发表于 2025-4-9 07:16

瀑布中的人制作的挺有意思的。

梦江南 发表于 2025-4-9 09:23

瀑布中还有人在动，这构思独特。可知这个人水性特别好。{:4_173:}

梦江南 发表于 2025-4-9 10:23

最喜欢这一键控制了。

流水光阴 发表于 2025-4-9 14:27

欣赏了

流水光阴 发表于 2025-4-9 14:27

感谢老师分享

花飞飞 发表于 2025-4-9 19:08

小辣椒 发表于 2025-4-8 21:30
@花飞飞

飞飞不知道你这个可以不可以看见，图片是国内服务器上传的，音乐是国外服务器，你试一下可以听 ...

太棒了，这个可以看得到，好美的作品啊，画面美，音乐美。。。效果完美

花飞飞 发表于 2025-4-9 19:09

这个音质震撼到我了，小辣椒不愧是玩音乐的，这音乐听着完全不一样啊，好好听的版本。。。{:4_187:}真是美的享受。

花飞飞 发表于 2025-4-9 19:11

画面色彩清新幽静，还设计了个跳舞的人在瀑布里面，真是惊喜又惊奇，好乐啊。。
小辣椒这思路太绝了。。

花飞飞 发表于 2025-4-9 19:13

非常喜欢的作品，有技术有质量。感谢小辣椒~~这里真是个非常好的地方。。{:4_187:}

小辣椒 发表于 2025-4-9 21:02

红影 发表于 2025-4-8 21:53
亲爱的在水流里还加了个舞动的身影，这效果真神奇

亲爱的，加了个人物特效进去，想不出加什么好，只能看画面情节了{:4_189:}

小辣椒 发表于 2025-4-9 21:04

红影 发表于 2025-4-8 21:55
水里还有跳起的小鱼。这两个效果一下，让原视频更美了。
这个还是一键全控的呢。欣赏亲爱的好帖，飞飞收礼 ...

这个小鱼跳跃效果给小河增加一点画面感，只是很喜欢岁月这个背景图的意境

小辣椒 发表于 2025-4-9 21:05

冬天的雨 发表于 2025-4-8 23:20
可以听到音乐，当然也是可以看见画面，动图漂亮 鉴定完毕

冬雨晚上好，这个你应该可以看见和听到的{:4_173:}

查看完整版本: 逆流成河 (Live合唱版) TO：花飞飞