论坛 › 欢乐水吧 › 酸酸甜甜

杨帆 发表于 2025-8-27 20:00

酸酸甜甜

本帖最后由 杨帆 于 2025-8-31 22:36 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {--offsetX: 81px;background: var(--bg1), var(--bg2), var(--bg3);background-blend-mode: var(--bg-blend);--ma-size: 20%;--opacity: 1; --state: running;--bg1: url('https://www.helloimg.com/i/2025/08/28/68afc71858126.jpeg') no-repeat center/cover;--bg2: url('https://www.helloimg.com/i/2025/08/28/68afce3d1a930.gif') no-repeat 78% 100%/20% 35%;--bg3: url('https://www.helloimg.com/i/2025/08/27/68aed6fb3d8db.jpg') no-repeat center/cover; --bg-blend:multiply,screen,lighten;}       
#plane1{position: absolute;left: 250px;top: 0;width: 80px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T950 10");animation: move 10s linear infinite var(--state);opacity: var(--opacity); transition: 1.8s; }      
#plane2 {position: absolute;left: 250px;top: 0;width: 100px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 10s linear infinite var(--state);opacity: var(--opacity); transition: 1.7s; }
@keyframes move { to { offset-distance: 100%;} }
#ma { display: block;right: -3%; bottom: -5%; }
#dancer {z-index: 8; cursor: pointer; mix-blend-mode: screen;visibility: var(--visibility); transition: .1s;}
#btnFs { left: 2%; top: 2%;color:LawnGreen; border-color: currentColor; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #00BFFF, #FFF0F5, #FFF8DC);
position: absolute;z-index: 3;left: 6%; top: 10%;transform: translate(0%);letter-spacing: 2px;font:normal 2.2em/1em YouYuan; font-weight:500;color:AquaMarine;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;filter:drop-shadow( Lime 1px 0 0)drop-shadow(Lime 0 1px 0)drop-shadow(Lime -1px 0 0) drop-shadow(Lime 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: url('https://638183.freep.cn/638183/small/2025/dream.webp') center/cover;background-clip: text;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
        @keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
<div id="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/f59be348461373b4b9b15e38e3c2f18b.mp3" autoplay="" loop=""></audio>
<video class="pd-vid" src="https://video-qn.51miz.com/preview/video/00/00/13/09/V-130942-864B05CF.mp4" autoplay loop muted></video>
        <div id="ma" title="播放/暂停"><svg id="msvg" class="invert" viewbox="-200 -200 400 400"></svg><title>ALT+X</title></div>       
        <div data-lrc="" id="lrc"></div>
   <img id="plane1" alt="" src="https://bbs.cnzv.cc/up/upload/pic/12/20250302-ef202b8fd27dcf032201019d42dabd9e.jpg" />
   <img id="plane2" alt="" src="https://bbs.cnzv.cc/up/upload/pic/12/20250316-b266302c28eca2d6800373366e4b16b6.gif" />
   <img id="dancer" src="https://pic.imgdb.cn/item/64e89257661c6c8e54046ae2.gif" alt="" style=" position: absolute;width: 470px; height: 170px; left: 41%; bottom:2%; ">
</div>
<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';       
        var dr = Dr.dr(msvg);
        var tt = 12, d = 'M0 0 L-30 -100 Q0 60,30 -100, L0 0';
        Array.from({length: tt}).forEach((_,k) => {
                dr.path(d, 'BlueViolet', 'Yellow', 3).transform(`rotate(${360/tt*k})`);
        });
        dancer.title = '播放/暂停ALT+X';
        dancer.onclick = () => ma.click();       
        FS(pa, ma);
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
酸酸甜甜
作词：孙邦楠
作曲：孙邦楠
演唱：刘梦溪
编曲：孙邦楠音乐工作室
录音：孙邦楠音乐工作室
混音：孙邦楠音乐工作室
母带：孙邦楠音乐工作室
指导老师：张妁
选送：大庆星娱童声艺术学校
监制：童声纪念馆
发行：浩然智造（北京）科技有限公司
让白云挂在你的眉梢
喜欢看你漏出微笑的嘴角
给你一个大大的拥抱
那就是幸福的味道
妈妈的爱看似很简单
其实都藏在我的心里面
谢谢你 陪我的每一天
未来我会更加勇敢

你是我心中的酸酸甜甜
请相信我和你们承诺的誓言
爸爸妈妈陪我直到永远
当你轻轻吻着我的脸

你是我心中的酸酸甜甜
我对爸爸妈妈的爱永远不改变
就让我们 一起去冒险
永远是我不变的信念

让白云挂在你的眉梢
喜欢看你露出微笑的嘴角
给你一个大拥抱
那就是幸福的味道

妈妈的爱看似很简单
其实都藏在我的心里面
谢谢你 陪我的每一天
未来我会更加勇敢

你是我心中的酸酸甜甜
请相信我和你们承诺的誓言
爸爸妈妈陪我直到永远
当你轻轻吻着我的脸

你是我心中的酸酸甜甜
我对爸爸妈妈的爱永远不改变
就让我们 一起去冒险
永远是我不变的信念
永远是我不变的信念
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
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 '000:000';
        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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

aud.onplaying = aud.onpause = () => {
          pa.style.setProperty('--opacity', aud.paused ? '0' : '1');
          pa.style.setProperty('--visibility', aud.paused ? 'hidden' : '');
                pa.style.setProperty('--bg-blend',aud.paused ? 'normal' : '');
                pa.style.setProperty('--bg1',aud.paused ? 'none' : '');
                pa.style.setProperty('--bg2',aud.paused ? 'none' : '');
                pa.style.setProperty('--bg3',aud.paused ? '' : 'none');
        };
       
</script>

红影 发表于 2025-8-27 20:47

暂停的时候，背景图就变化了，很神奇。
竖排歌词同步也很漂亮。欣赏杨帆好帖{:4_199:}

杨帆 发表于 2025-8-27 21:00

红影 发表于 2025-8-27 20:47
暂停的时候，背景图就变化了，很神奇。
竖排歌词同步也很漂亮。欣赏杨帆好帖

谢谢影子鼓励，祝开心{:4_187:}

偶然~ 发表于 2025-8-27 21:30

这个很好，有代码没？我套用做首翻唱歌曲。

偶然~ 发表于 2025-8-27 21:31

感谢杨帆带来的精彩，辛苦了。

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

杨帆 发表于 2025-8-27 21:00
谢谢影子鼓励，祝开心

不客气啊，杨帆的制作很美{:4_199:}

梦江南 发表于 2025-8-28 07:49

红红的果子是山楂吧，看着就有酸酸甜甜的。画面中的摇摆小姑娘，好可爱。
谢谢杨帆带来精彩的音画！{:4_187:}

杨帆 发表于 2025-8-28 09:34

本帖最后由 杨帆 于 2025-8-28 09:46 编辑

偶然~ 发表于 2025-8-27 21:30
这个很好，有代码没？我套用做首翻唱歌曲。
我也是学习老师的代码，可查看随意使用

期待听到兄弟的美妙歌声

谢谢偶然~鼓励{:4_191:}

杨帆 发表于 2025-8-28 09:43

梦江南 发表于 2025-8-28 07:49
红红的果子是山楂吧，看着就有酸酸甜甜的。画面中的摇摆小姑娘，好可爱。
谢谢杨帆带来精彩的音画！{:4_18 ...

问好江南，是山楂，也叫红果，我很喜欢这种酸酸甜甜的味道

偶然~ 发表于 2025-8-28 12:24

杨帆 发表于 2025-8-28 09:34
我也是学习老师的代码，可查看随意使用

期待听到兄弟的美妙歌声


字幕颜色蓝色的，可以改吗？

杨帆 发表于 2025-8-28 15:59

偶然~ 发表于 2025-8-28 12:24
字幕颜色蓝色的，可以改吗？

是，可依据需要改换的

梦江南 发表于 2025-8-30 12:39

杨帆 发表于 2025-8-28 09:43
问好江南，是山楂，也叫红果，我很喜欢这种酸酸甜甜的味道

嗯，酸酸甜甜的味道很开胃的。

梦如影音 发表于 2025-9-1 09:55

精彩制作，欣赏{:5_116:}

杨帆 发表于 2025-9-1 11:05

梦如影音 发表于 2025-9-1 09:55
精彩制作，欣赏

问好梦如，谢谢鼓励，祝开心{:4_171:}

查看完整版本: 酸酸甜甜