论坛 › 动画音画 › 人间半途 (DJ何友版) 魏佳艺

亚伦影音工作室 发表于 2024-9-29 20:40

人间半途 (DJ何友版) 魏佳艺

本帖最后由 亚伦影音工作室 于 2024-9-29 21:04 编辑 <br /><br /><style>
#papa { margin: 310px 0 20px calc(50% - 721px); background:#800 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9e9214154df75fe623a2f752ced6dd73.png?x-oss-process=image%2fresize%2cm_lfit%2cw_960%2ch_540')no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mdiv {top:35%; left:10%;
        width:300px;text-align:center;animation:rot 10s linear infinite;
        position: absolute;filter:drop-shadow(#fff 0px 0px 1px)drop-shadow(#fff 0px 0px 1px);
        z-index: 40;
        }
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover { filter: invert(20%) drop-shadow(0 0 1px #00ff00)drop-shadow(0 0 1px #00ff00) }
#vid {z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
}
#tp{ position: absolute;width: 80%; height: 80%;top:0%; left:10%;background:#800 url('https://pic.imgdb.cn/item/6440cbff0d2dde57773ead84.jpg')no-repeat center/cover;z-index: 3;-webkit-mask-image: radial-gradient(black 30% ,transparent 65%);}
li-zi { position: absolute; top: 0px;z-index: 5; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
        @keyframes drop { to { top: 100%; } }
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;font:normal 3.5em 华文隶书;color: #000;white-space: pre;-webkit-background-clip: text;z-index: 10;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 {}
</style>
<div id="papa">
<div id="mdiv">
<svg version="1.1" width="160" height="160" viewBox="-80 -80 160 160">
<polygon points="-25 5,25 -25, 0 50" fill="#800" transform="rotate(0) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#505190" transform="rotate(51.4) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#800" transform="rotate(102.8) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#ff0000" transform="rotate(154.2) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#2a0790" transform="rotate(205.6) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#ff0790" transform="rotate(257) translate(0,-50)"></polygon>
<polygon points="-25 5,25 -25, 0 50" fill="#000800" transform="rotate(308.4) translate(0,-50)"></polygon>
</svg>
</div>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/00/V-640086-3A838961.mp4" autoplay loop muted></video>
<divid="tp" ></div>
<divid="body" ><li-zi ></li-zi ></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/4b2d-audiofreehighqps/7A/E0/GKwRIMAKw-kSACAAAAMS9ePs.m4a" autoplay loop></audio>
<script>
mdiv.onclick = () => aud.paused ? (aud.play(),vid.play()):(aud.pause(),vid.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
</script>
<span id="lrcStr" style="visibility: hidden;">
人间半途 (DJ何友版) 魏佳艺
亚伦影音工作室
作词：将乐文子
作曲：将乐文子
编曲：漠心藤
混音：罗杨轩
和声编写：罗杨轩
制作人：罗杨轩/周俊泽
统筹：罗杨轩/周俊泽
监制：罗杨轩/周俊泽
营销推广：余靖辉/周俊泽/网益文化@荣儿/阿子/胡皓/昌禾文化
出品人：周俊泽
出品推广：玉盛音乐YSMusic/昌禾文化
OP/SP：昌禾文化
把酒叹平生
把往事熬成药
一秋风雨敬桑田
从此无年少
我问月亮借华韶
再听秋风诉情长
一段芳华煮清欢
琐碎了平凡
被岁月磨平了棱角
人群中不在多言谈笑
这不上不下的年纪
学会向生活讨好
柴米半生争那三餐饭饱
把心事锁进了眉梢
慢慢学会弯下了腰
心中远方歌谣
脚下是深潭泥沼
头顶烟尘
谁负了岁月静好
把酒叹平生
把往事熬成药
一秋风雨敬桑田
从此无年少
我问月亮借华韶
再听秋风诉情长
一段芳华煮清欢
琐碎了平凡
把心事锁进了眉梢
慢慢学会弯下了腰
心中远方歌谣
脚下是深潭泥沼
头顶烟尘
谁负了岁月静好
把酒叹平生
把往事熬成药
一秋风雨敬桑田
从此无年少
我问月亮借华韶
再听秋风诉情长
一段芳华煮清欢
琐碎了平凡
把酒叹平生
把往事熬成药
一秋风雨敬桑田
从此无年少
我问月亮借华韶
再听秋风诉情长
一段芳华煮清欢
琐碎了平凡
</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"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.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>
var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: 260}).forEach((item) => {
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --dur: ${0.5 + Math.random() * 0.5}s;
                        --delay: ${Math.random() * -0.8}s;
                        width: ${1 + Math.round(Math.random())}px;
                        height: ${8 + Math.random() * 30}px;
                        left: ${Math.random() * 100}%;
                `;
                papa.appendChild(item);
        });
</script>

醉美水芙蓉 发表于 2024-9-29 21:00

醉美水芙蓉 发表于 2024-9-29 21:10

亚伦影音工作室 发表于 2024-9-29 21:12

醉美水芙蓉 发表于 2024-9-29 21:10
谢谢亚伦老师分享精彩！

谢谢提供歌词！

梦油 发表于 2024-9-29 21:30

欣赏佳作，问候亚伦。

红影 发表于 2024-9-29 21:30

漂亮的svg小播，粒子的制作也漂亮。歌曲好听。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-9-29 21:34

视频选得好，图片遮罩也设计得好{:4_187:}

起个网名好难 发表于 2024-9-30 06:23

欣赏好帖！

樵歌 发表于 2024-9-30 07:01

欣赏。

查看完整版本: 人间半途 (DJ何友版) 魏佳艺