论坛 › 欢乐水吧 › 我知道你受了太多委屈(live 合唱版)-是阿五吖

亚伦影音工作室 发表于 2024-10-15 09:50

我知道你受了太多委屈(live 合唱版)-是阿五吖

本帖最后由 亚伦影音工作室 于 2024-10-15 12:10 编辑 <br /><br /><style>
#papa { margin: 180px 0 20px calc(50% - 721px); background:#800 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9e9214154df75fe623a2f752ced6dd73.png')no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px #000; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mdiv {top:12%; left:5%;cursor: pointer;
        width:200px;text-align:center;animation:rot 10s linear infinite;
        position: absolute;filter:drop-shadow(#000 0px 0 1px);
        z-index: 40;
        }
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover {}

#qmsvg{ position: absolute;z-index: 3;
      left: 5%;
      top: 5%;
       animation: roto 20s linear infinite ;
}
@keyframes roto {to { transform: rotate(-360deg);filter: hue-rotate(360deg); }}
#vid {z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: radial-gradient(black 100% ,transparent 100%);
}
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.2em 华文隶书;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 width="100" height="100" viewBox="-160 -160 320 320">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black"></feDropShadow>
                </filter>
                <g id="part" filter="url(#shadow)">
                        <line x1="0" y1="-100" x2="0" y2="100" stroke="#880" stroke-width="4"></line>
                        <ellipse cx="0" cy="-125" rx="20" ry="20" fill="#fff"></ellipse>
                        <ellipse cx="0" cy="125" rx="20" ry="20" fill="#fff"></ellipse>
                </g>
        </defs>
        <use href="#part"></use>
        <use href="#part" transform="rotate(35)"></use>
        <use href="#part" transform="rotate(70)"></use>
        <use href="#part" transform="rotate(105)"></use>
        <use href="#part" transform="rotate(140)"></use>
</svg>
</div>

<svgid="qmsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="30" dy="30" font-size="20" fill="#ffff00"font-family="'楷体'">
                <textPath href="#path" textLength="600">歌曲《我知道你受了太多委屈》</textPath>
        </text>
</svg>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/62/15/V-zip-20231109dv-12-92435A9E.mp4" autoplay loop muted></video>
<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://s2.ananas.chaoxing.com/sv-w9/audio/ee/83/6f/aacdea43633faa23b196911990afada4/audio.mp3" autoplay loop></audio>
<script>

let pgs = document.querySelectorAll('polygon');
    function chColor() {
      pgs.forEach(pg => {
            pg.setAttribute('',"#" + Math.random().toString(16).substring(2,8))
      });
    }
    setInterval(chColor, 1000);

mdiv.onclick = () => aud.paused ? (aud.play(),vid.play()):(aud.pause(),vid.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
qmsvg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>qmsvg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>qmsvg.style.animationPlayState = 'paused');

</script>
<span id="lrcStr" style="visibility: hidden;">
我知道你受了太多委屈(live 合唱版)-是阿五吖
词：花魁魁
曲：前夫哥
合唱：龙小晨合唱团
混音：龙小晨
出品：龙小晨@有点意思
【未经著作权人许可不得翻唱翻录或使用】
多久没睡个好觉
没发自内心的笑
翻遍手机不知谁能打扰
最难的时候自己熬
也曾经想过逃跑
逃到没人的一角
最怕别人问过的好不好
眼泪就忍不住的掉
我知道你受了太多委屈
连崩溃也不在人前提起
深夜孤独的酒 掺着苦涩泪滴
敬给月亮和自己
我知道你受了太多委屈
怕藏不住泪怕别人关心
没有人能依靠 只能靠着自己
扛下了所有压力
也曾经想过逃跑
逃到没人的一角
最怕别人问过的好不好
眼泪就忍不住的掉
我知道你受了太多委屈
连崩溃也不在人前提起
深夜孤独的酒 掺着苦涩泪滴
敬给月亮和自己
我知道你受了太多委屈
怕藏不住泪怕别人关心
没有人能依靠 只能靠着自己
扛下了所有压力
我知道你受了太多委屈
连崩溃也不在人前提起
深夜孤独的酒 掺着苦涩泪滴
敬给月亮和自己
我知道你受了太多委屈
怕藏不住泪怕别人关心
没有人能依靠 只能靠着自己
扛下了所有压力
</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-10-15 10:04

这小鱼雨得真漂亮。

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

漂亮的棒棒糖播放器加转动变色文字小播，还有漂亮的雨滴，都能一键暂停。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-10-15 21:27

小播和圆环变色字还是不同转向的呢{:4_204:}

小辣椒 发表于 2024-10-15 22:34

亚伦这个效果好，棒棒糖播放器用在文字里面，漂亮！

小辣椒 发表于 2024-10-15 22:35

亚伦最好这个视频不用，换动图这个效果小辣椒就更加喜欢了

老谟深虑 发表于 2024-10-16 17:00

         欣赏老师的佳作，点赞！

查看完整版本: 我知道你受了太多委屈(live 合唱版)-是阿五吖