论坛 › 欢乐水吧 › 人间烟火 - 程响

亚伦影音工作室 发表于 2023-4-24 15:22

人间烟火 - 程响

本帖最后由 亚伦影音工作室 于 2023-4-24 16:27 编辑 <br /><br /><style>
#papa { margin: 10px -300px; width: 1164px; height: 620px; background: gray url(https://file.moyublog.com/d/file/2021-02-17/46dd4216d82c5aeec2b105b2f4b14182.jpg) center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文行楷; color:#0000; z-index: 21; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background: linear-gradient(0deg, #1E9600 0%,#FFF200 50%,#FF0000 100%);background-size: 10vmin 125%;background-position: center center; filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#dt{position: absolute;
   width:500px; height:680px;left: 40%; z-index: 20;top:-10%;overflow:hidden;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
   }
#an{position: absolute;
   width:100%; height:100%;left: 0%; top:0%;
   }
@keyframes cover1{0% {opacity: 0;transform: translatex(-600px);}
20% {opacity: 1;transform: scale(1,1);}
21% {opacity: 1;transform: scale(1,1);}
40% {opacity: 1;transform: scale(1,0);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
70% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
80% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
100% {opacity: 0.8;transform: translatex(300px)scale(.6);}
}
@keyframes cover2 {0% {opacity: 0;transform: translatex(0px);}
30% {opacity: 1;transform: scale(1,1);}
40% {opacity: 1;transform: scale(0,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
60% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
100% {opacity: 0.8;transform: translatex(300px)scale(.6);}
        }
</style>
<div id="papa">
<div id="mydiv"></div>

<div id="lrc" data-lrc="特效歌词尝试">特效歌词尝试</div>
<div id="dt">
<img id="an" src="https://www.kumeiwp.com/sub/filestores/2023/04/22/6df0d506d612882362669a3eef7ceb2e.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music213671654.mp3" autoplay loop></audio>

<script>
(function() {
        let mKey = 0, mFlag = true;
        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;};
        let averAdd = 0, offset = 0;
        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 geci = `人间烟火 - 程响
词：宁缺 曲：宁缺


出品·亚伦影音·
一人后来过江南 烟雨锁惆怅
听得乌篷轻摇浆 竟不知所想
画船萧鼓声声唱 几曲断人肠
谁家墙头有梅 自芬芳
人间一场烟火 你曾盛开过
刻几人在心窝 从此孤独活
江南花已凋落 怎堪再斟酌
可怜良辰无多 竟似无人说
你撑纸伞回头望 千年乌衣巷
问君青丝有几丈 能把风月量
谁言杯酒醉他乡 红尘皆可忘
凭栏数尽孤帆 泪两行
人间一场烟火 你曾盛开过
刻几人在心窝 从此孤独活
江南花已凋落 怎堪再斟酌
可怜良辰无多 竟似无人说
人间一场烟火 你曾盛开过
刻几人在心窝 从此孤独活
江南花已凋落 怎堪再斟酌
可怜良辰无多 竟似无人说
可怜良辰无多 竟似无人说
可怜良辰无多 再难与人说
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
        lrc.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</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("an"),
    button = document.getElementById("lrc");
    if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();
            this.value = '.';
      } else {
            image.stop();
            this.value = '';
      }
    };
}

</script>
<style>
#mydiv {
      margin: 0px auto;
      width: 1164px;
      height: 620px;
      
      overflow: hidden;
      cursor: pointer;
      position: relative;
      --state: paused;
}
.dot {
      position: absolute;
      left: 40%;
      bottom: -10px;
      width:200PX;opacity:0;
      height:210PX;
      border-radius: 0%;
      background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')0 0/100% 100%;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); filter:hue-rotate(360deg);opacity:1;}}
</style>
<script>
Array.from({length: 100}).forEach( (item,key) => {
      let sp = document.createElement('span');
      let ww = Math.random() * 5 + 2;
      sp.className = 'dot';
      sp.style.cssText += `
                --deg: ${-100 + Math.random() * 200}deg;
               
               
                animation: ani 10s ${Math.random() * key - 2}s infinite alternate var(--state);
      `;
      mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>


<audio id="audio" src="https://365.tf/assets/qblog/km1.mp3"></audio>
    <script>
      document.addEventListener("click", function() {
      document.getElementById("audio").play();
      });
    </script>

红影 发表于 2023-4-24 17:03

又是一种特效歌词，言论老师每每创新，很赞{:4_199:}

老谟深虑 发表于 2023-4-24 18:51

      欣赏老师的精美音画，这个代码制作的真好！

查看完整版本: 人间烟火 - 程响