论坛 › 音乐沙龙 › 十里桃花碾作尘 - 王馨

亚伦影音工作室 发表于 2023-4-23 21:15

十里桃花碾作尘 - 王馨

本帖最后由 亚伦影音工作室 于 2023-4-23 21:18 编辑 <br /><br /><style>
#papa { margin: 10px -300px; width: 1164px; height: 620px; background: gray url(https://pic1.imgdb.cn/item/6444c9130d2dde57775e0f46.jpg) center/cover no-repeat; box-shadow:0 0px 0px 3px #fff000; 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:#ff0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); 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)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:540px; height:620px;left: 10%; z-index: 20;top:0%;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: 1;clip-path:inset(0% 100% 0% 100% round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(200%);}
20% {
opacity: 1;clip-path: inset(0% 0 0% 0 round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(800%);}

}
@keyframes cover2 {0% {
opacity: 1;clip-path:inset(0% 100% 0% 100% round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(200%);}
20% {
opacity: 1;clip-path: inset(0% 0 0% 0 round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(800%);}
}
</style>
<div id="papa">
<div id="mydiv"></div>

<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="dt">
<img id="an" src="https://www.kumeiwp.com/sub/filestores/2023/04/22/0d7c1626e1a24f2df2185a4aad010493.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music91598950.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>



点击歌词即可暂停

冬天的雨 发表于 2023-4-23 23:14

画面漂亮，歌曲好听，谢谢分享{:4_187:}

红影 发表于 2023-4-23 23:17

这张玫瑰绽放的图图好像前面一个帖子里也用过呢。漂亮的制作，欣赏亚伦老师好帖{:4_187:}

亚伦影音工作室 发表于 2023-4-23 23:34

红影 发表于 2023-4-23 23:17
这张玫瑰绽放的图图好像前面一个帖子里也用过呢。漂亮的制作，欣赏亚伦老师好帖

有没看出不一样吗？点歌词！

红影 发表于 2023-4-24 20:12

亚伦影音工作室 发表于 2023-4-23 23:34
有没看出不一样吗？点歌词！

嗯嗯，点歌词可以让所有动态暂停{:4_204:}

查看完整版本: 十里桃花碾作尘 - 王馨