论坛 › 欢乐水吧 › 别说来生再见 (合唱版) 歌手： 洋澜一

小辣椒 发表于 2024-9-21 20:38

别说来生再见 (合唱版) 歌手： 洋澜一

<style>
#papa { margin: 150px 0 30px calc(50% - 881px); background:#800 url('https://file.uhsea.com/2409/691b7d75154902545cdc23018443fef9NU.jpg')no-repeat center/cover;width: 1600px; height: 900px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}

#play { position: absolute;width: 150px;
        height: 150px;
        top: 10%; cursor: pointer; left: 7%;z-index: 20;animation: rot 8s linear infinite ; transition: .6s;}
@keyframes rot {
        from { transform: rotate(0deg); filter: hue-rotate(0deg) drop-shadow(0 0 10px #000); }
        to { transform: rotate(360deg); filter: hue-rotate(360deg) drop-shadow(0 0 10px #000); }
}
#vid {z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: radial-gradient(black 15% ,transparent 90%);
}
#vido {z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        }
#lrc{left: 5%;top: 85%;}#lrcc {right:5%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000080;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute; top: -330px; right:30px;font: normal 2em/0em 楷体;color:#ccc; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="play"><img id="Img" src="https://638183.freep.cn/638183/web/svg/jupm.svg" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://file.uhsea.com/2409/840ed73055339302f7e3c7aceac433afJW.mp3" autoplay loop></audio>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/70a9a1fd438f0bac7cd8060dfe27f068_preview.mp4" autoplay loop muted></video>
<video id="vido" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0febdc4d9660edc6b4576c1c1dbc620c_preview.mp" autoplay loop muted></video>
</div>
<script>
play.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play(),image.play()):(aud.pause(),vid.pause(),vido.pause(),image.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '全屏欣赏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏 ', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">别说来生再见 (合唱版) - 洋澜一
词：千寻
曲：石羽函
编曲：王亚东
合唱：异派音乐合唱团
混音：王亚东
吉他：LeoD
和声：小佑
监制：米奇
制作人：千寻
OP：星汉马文化
在这人生所剩不多的余年
不懂得珍惜的人最遗憾
走过这一程
踏上那一段
青春像风筝断了线 越飞越远
我们终究把仅有的爱耗完
亏欠对方的也没去偿还
爱时笑着脸
别时红了眼
就连好心分手都难 不再委婉
收起你的誓言
别说来生再见
我也习惯了天黑没人道晚安
两个人的房间
容得下我的孤单
曾经爱你的心却装不下从前
收起你的誓言
别说来生再见
我也学会了自己家务和做饭
一个人的未来
还得自己去走完
让原本简单的我回归到简单
~Music~
我们终究把仅有的爱耗完
亏欠对方的也没去偿还
爱时笑着脸
别时红了眼
就连好心分手都难 不再委婉
收起你的誓言
别说来生再见
我也习惯了天黑没人道晚安
两个人的房间
容得下我的孤单
曾经爱你的心却装不下从前
收起你的誓言
别说来生再见
我也学会了自己家务和做饭
一个人的未来
还得自己去走完
让原本简单的我回归到简单
收起你的誓言
别说来生再见
我也习惯了天黑没人道晚安
两个人的房间
容得下我的孤单
曾经爱你的心却装不下从前
收起你的誓言
别说来生再见
我也学会了自己家务和做饭
一个人的未来
还得自己去走完
让原本简单的我回归到简单
☆谢谢欣赏☆
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
      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) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),play.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),play.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
let toMin = (val) => {
                if (!val) return '00:00';
                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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("Img");
</script>

小辣椒 发表于 2024-9-21 20:41

@亚伦

谢谢亚伦的代码，套一个玩玩，只是我用了一个视频效果，感觉背景图片衬托效果也是可以的

换了一个黑黑的svg图片播放器

梦油 发表于 2024-9-21 20:48

背景画面真漂亮。

小辣椒 发表于 2024-9-21 20:57

梦油 发表于 2024-9-21 20:48
背景画面真漂亮。

梦油晚上好，谢谢欣赏{:4_187:}

红影 发表于 2024-9-21 21:00

这视频不错，放这么大还这么清晰。
这制作真漂亮，歌曲也好听。欣赏亲爱的好帖{:4_199:}

花飞飞 发表于 2024-9-21 21:10

天哪，进来第一眼就被惊艳到了，小辣椒你这制作太美了。。{:4_187:}

花飞飞 发表于 2024-9-21 21:11

歌词是双显的，还精准。。。小播也最新的，用在这里十分漂亮。{:4_199:}{:4_187:}

马黑黑 发表于 2024-9-21 22:02

小辣椒出手阔绰

梦江南 发表于 2024-9-22 08:42

美女背景真漂亮！{:4_199:}

梦油 发表于 2024-9-22 11:17

小辣椒 发表于 2024-9-21 20:57
梦油晚上好，谢谢欣赏

你可真是心灵手巧。

亚伦影音工作室 发表于 2024-9-22 18:25

小辣椒 发表于 2024-9-21 20:41
@亚伦

谢谢亚伦的代码，套一个玩玩，只是我用了一个视频效果，感觉背景图片衬托效果也是可以的


音乐好听，画面完美，创作一流！{:4_199:}

上海朝阳 发表于 2024-9-22 19:02

漂亮，音画姑娘都漂亮

小辣椒 发表于 2024-9-22 21:06

梦油 发表于 2024-9-21 20:48
背景画面真漂亮。

梦油晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-9-22 21:08

红影 发表于 2024-9-21 21:00
这视频不错，放这么大还这么清晰。
这制作真漂亮，歌曲也好听。欣赏亲爱的好帖

亲爱的，你鼓励的比较多，给小辣椒打气吧，这个也是套用亚伦的代码的

小辣椒 发表于 2024-9-22 21:09

花飞飞 发表于 2024-9-21 21:10
天哪，进来第一眼就被惊艳到了，小辣椒你这制作太美了。。

飞飞夸奖了，小辣椒也是套用代码玩的，现在怎么轻松怎么玩了

小辣椒 发表于 2024-9-22 21:10

花飞飞 发表于 2024-9-21 21:11
歌词是双显的，还精准。。。小播也最新的，用在这里十分漂亮。

飞飞晚上好~~谢谢飞飞欣赏{:4_171:}

小辣椒 发表于 2024-9-22 21:10

马黑黑 发表于 2024-9-21 22:02
小辣椒出手阔绰

黑黑晚上好，喝茶{:4_180:}

小辣椒 发表于 2024-9-22 21:11

梦油 发表于 2024-9-22 11:17
你可真是心灵手巧。

梦油就是夸奖的多，给小辣椒鼓励多{:4_187:}

小辣椒 发表于 2024-9-22 21:12

亚伦影音工作室 发表于 2024-9-22 18:25
音乐好听，画面完美，创作一流！

谢谢亚伦的代码，小辣椒套用玩一次，只是我做的背景简单，一个视频加个背景图片，这样感觉也是效果挺好的。

小辣椒 发表于 2024-9-22 21:13

上海朝阳 发表于 2024-9-22 19:02
漂亮，音画姑娘都漂亮

朝阳大哥晚上好，谢谢欣赏{:4_187:}

查看完整版本: 别说来生再见 (合唱版) 歌手： 洋澜一