论坛 › 欢乐水吧 › 多年以后 (DJ何鹏版) - 黄静美

亚伦影音工作室 发表于 2024-7-26 16:07

多年以后 (DJ何鹏版) - 黄静美

本帖最后由 亚伦影音工作室 于 2024-12-11 16:08 编辑 <br /><br /><style>
#papa { margin: 140px 0 20px calc(50% - 781px); width: 1400px; background:#000 url('https://')no-repeat center/cover; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 123465; position: relative;place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 150px; height:140px;position:absolute;z-index: 1;top: 10px;left: 85%;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#jzg{width: 20px; height:14px;position:absolute;z-index: 2;left: 64%;top: 77%;cursor: pointer;}
#jzg::before{ width: 100%; height: 100%; position: absolute; content: '';transition: .3s; cursor: pointer; }
#jzg:hover { transform: scale(1.2); filter:hue-rotate(180deg) }
#tmsg {width: 220px; height:35px;position: absolute;z-index: 8;transform: translate(-24%, 20%); text-align:center;font: normal 14px sans-serif;color: #ffffff;bottom: 216px;left:47%;background:#000}
#prog {position: absolute;z-index: 8;width: 21%; height: 5px;cursor: pointer;bottom: 190px;left:39.5%;border-radius: 0px;}
#vid { position: absolute; width: 100%; height: 100%; top:0%; left: 0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: -1;}
#lrc{left: 35%;top: 35%;}#lrcc {right:35%;top: 42%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;font:normal 2em 华文隶书;color: #ccc;white-space: pre;-webkit-background-clip: text;z-index: 20;}
#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);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#biaoti{width: 140px; height:30px;position:absolute;z-index: 8;left: 50%;top: 76%;background:url('https://pic.imgdb.cn/item/66a34f79d9c307b7e9581f34.png')0 0/140px 30px; }
</style>
<div id="papa">
<div id="bjbs"><img id="Img" src="https://pic.imgdb.cn/item/661b0afd68eb935713287d17.png" alt="" /></div>
<div id="biaoti"></div>
<video id="vid" src="https://www.kumeiwp.com/wj/221899/2024/07/22/3e3217dbfca161f0baca29c83bf24082.mp4" muted autoplay loop></video>
<div id="jzg"title="暂停/播放"><img id="dtImg" src="https://pic.imgdb.cn/item/6699a93bd9c307b7e96194f7.gif" alt="" /></div>
<div id="tmsg">00:00 | 00:00</div>
<div id="prog" title="播放进度条"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/55/18/a0/df9207e8d6744057eca282e8a1f2968e/audio.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">
本论坛js封装
作词 : 红豆
作曲 : 曲多美/小米
多年以后 (DJ何鹏版) - 黄静美
词：红豆
曲：曲多美/小米
编曲：熊磊
和声编写：熊磊
和声：徐茜
录音师：冯海波
混音师：宋加栩
统筹：冯海波
配唱制作人：熊磊
制作人：熊磊
监制：韦琪
制作公司：音你而来
有时候会感到莫名的难过
想到这一生到底是图什么
总是反复崩溃然后再愈合
最后一个人默默承受着
或许没有人是真正懂你的
为何成熟后就变得不快乐
为什么现实的要求那么多
是为了活着还是等待离开呢
多年以后还会有谁记得我
那些说过的话唱过的歌
多年以后我又会在哪里呢
是天堂孤独还是地狱苟活
或许没有人是真正懂你的
为何成熟后就变得不快乐
为什么现实的要求那么多
是为了活着还是等待离开呢
多年以后还会有谁记得我
那些说过的话唱过的歌
多年以后我又会在哪里呢
是天堂孤独还是地狱苟活
多年以后如果你会想起我
是爱是恨还是心酸不舍
多年以后不管我们会如何
哭过伤过也别说后悔来过
</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"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.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); /*获得歌词数组*/
})();
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
jzg.onclick = () => aud.paused ? (aud.play(),image.play(),imagee.play()) : (aud.pause(),image.stop(),imagee.stop());
var image= document.getElementById("Img");
var imagee= document.getElementById("dtImg");
</script>
<script>
(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);

prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #eee, #eee, #eee '+ aud.currentTime / aud.duration * 100 + '%, #666 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };
</script>

竹溪 发表于 2024-7-26 16:22

欣赏老师好帖。

竹溪 发表于 2024-7-26 16:21

动态音响，歌曲好听。

小辣椒 发表于 2024-7-26 19:45

哇塞~~~亚伦这个功放效果棒极了{:4_178:}

小辣椒 发表于 2024-7-26 19:46

特别这个按钮制作精致，特别喜欢整体的效果{:4_199:}

小辣椒 发表于 2024-7-26 19:47

感谢亚伦精彩分享，制作辛苦了{:4_187:}

红影 发表于 2024-7-26 21:10

这样的大音响很震撼，还有漂亮的频谱。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-7-26 21:11

歌词同步也漂亮，那个方形小按钮也设计得很棒。{:4_187:}

查看完整版本: 多年以后 (DJ何鹏版) - 黄静美