论坛 › 动画音画 › 我为岁月斟满一杯酒-影子

亚伦影音工作室 发表于 2023-12-26 15:07

我为岁月斟满一杯酒-影子

本帖最后由 亚伦影音工作室 于 2024-4-30 18:27 编辑 <br /><br /><style type="text/css">#papa { margin: 30px -300px; width: 1164px;height:620px;background:url(https://pic.imgdb.cn/item/64c509b41ddac507ccc4996a.jpg)no-repeat center/cover;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;}
#mplayer {left: 40%;z-index: 86;
      position: absolute;
      display: grid;
      grid-template-areas:
                'cur btnplay dur'
                'prog prog prog';
      gap: 4px;
      place-items: end center;
      font-size: 14px;
      bottom: 20px;
}
#cur { grid-area: cur; color: snow; }
#dur { grid-area: dur; color: snow; }
#btnplay {
      grid-area: btnplay;
      display: grid;
      grid-auto-flow: column;
      place-items: end center;
      gap: 0 5px;
      height: 60px;
      cursor: pointer;
}
#btnplay > span {
background: #ffffff;
      width: 4px;
      transition: .2s;
}
#prog {
      --ww: 0px;
      grid-area: prog;
      width: 300px;
      height: 4px;
      border-radius: 6px;
      background: snow;
      opacity: .65;
      cursor: pointer;
      position: relative;
}
#prog::before {
      position: absolute;
      content: '';
      width: var(--ww);
      height: 4px;
      border-radius: 6px;
      background: snow linear-gradient(90deg, green,green);
      opacity: .65;
}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 70%;
      font:normal 3em 华文新魏;
color: #000080;
      
      -webkit-background-clip: text;
      filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;border-bottom: 10px dashed #880000;
      background: var(--bg);
-webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
#dh{ width: 100%; height: 100%; position: absolute;z-index: 1;background:url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;
top:0px; left:0px;animation: rod 30s linear infinite;}
@keyframes rod{0% {opacity: 1;filter:hue-rotate(360deg)}50% {opacity: 0;}100% {opacity: 1;}
}
li-zi { position: absolute; width: 100px; top:50%; left:50%;height: 1px; border-radius: 100% 20%;background: tan;animation: imov 2s infinite;z-index: 2;}
@keyframes moving {to{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(360deg);}from{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
}
</style>
<div id="papa">
<div id="dh" style="animation-play-state: running;">&nbsp;</div>
<div id="mplayer">
<div id="cur">00:00</div>
<div id="btnplay">&nbsp;</div>
<div id="dur">00:00</div>
<div id="prog">&nbsp;</div>
</div>
<div data-lrc="花潮lrc在线" id="lrc">花潮lrc在线</div>
<audio autoplay="" id="aud" loop="" src="https://link.hhtjim.com/kw/325129285.mp3">&nbsp;</audio>
</div>
<script>
(function() {
      for(j=0; j<20; j++) {
                let pinpu = document.createElement('span');
                pinpu.className = 'pinpu';
                pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(0)};`;
                btnplay.appendChild(pinpu);}
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      aud.addEventListener('timeupdate', () => {
                let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
                prog.style.setProperty('--ww', prg + 'px');
                cur.innerText = toMin(aud.currentTime);
                dur.innerText = toMin(aud.duration);
                setPinpu();
      });

      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;
      };

      let setPinpu = ()=> {
                let eles = document.querySelectorAll('.pinpu');
                eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
      };
})();
</script><script >
(function() {
/*原始lrc歌词*/
let lrcStr = `我为岁月斟满一杯酒-影子
词：徐晓岚
曲：李勇军
编曲：姜凯升
后期：鲁晓锋
和声：雪无影
制作人：亚伦
OP：影音工作室
心中装满了生活的忧愁
手中捧着一壶浓烈的酒
人生不过几十个春秋
可脚下的路来去不自由
转眼之间已经白了头
要想的改变也成了奢求
香烟一灭该愁的还是愁
如果情淡了要走该怎么留
我为岁月斟满一杯酒
岁月赐我心酸和泪流
现实中难有一生无忧
命运捉弄谁又能左右
我为岁月斟满一杯酒
岁月赐给我一身的伤口
杯中装满了痛苦和忧愁
酒醒之后继续往前走
哦继续往前走
转眼之间已经白了头
要想的改变也成了奢求
香烟一灭该愁的还是愁
如果情淡了要走该怎么留
我为岁月斟满一杯酒
岁月赐我心酸和泪流
现实中难有一生无忧
命运捉弄谁又能左右
我为岁月斟满一杯酒
岁月赐给我一身的伤口
杯中装满了痛苦和忧愁
酒醒之后继续往前走
哦继续往前走`;

/*变量 ：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 '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;
}

/*函数 ：关键帧动画状态切换*/
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); /*获得歌词数组*/
})();
</script><script>



(function() {
let all = 160;
for(let i = 0; i < all; i++) {
let movBall = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;

    let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);

    movBall.style.cssText += `

      --x0: ${xx}px;

      --y0: ${yy}px;

      --deg: ${360 / all * i}deg;

      background: #${Math.random().toString(16).substr(-6)};

      animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 2}s infinite var(--state);

    `;

    papa.prepend(movBall);

}
let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');

let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

aud.addEventListener('playing',mState,false);

aud.addEventListener('pause',mState,false);
})();

dh.style.animationPlayState = aud.paused ? 'paused' : 'running';

aud.addEventListener('playing', () =>dh.style.animationPlayState = 'running');

aud.addEventListener('pause', () =>dh.style.animationPlayState = 'paused');

</script>

红影 发表于 2023-12-26 15:40

这个是演唱者叫影子吧，看到这两个字，特别感觉像是在说我{:4_173:}

红影 发表于 2023-12-26 15:41

亚伦老师把黑黑的代码使用得很灵活，很赞。
漂亮的制作{:4_187:}

亦是金 发表于 2023-12-26 18:02

第一次听到影子唱歌，唱的真好，喜欢！{:4_189:}

马黑黑 发表于 2023-12-26 22:35

好靓

世外桃源 发表于 2023-12-28 12:01

漂亮的

世外桃源 发表于 2023-12-28 12:02

歌儿好听

世外桃源 发表于 2023-12-28 12:02

欣赏了，感谢楼主分享

查看完整版本: 我为岁月斟满一杯酒-影子