论坛 › 音乐沙龙 › 杯中装不下眼泪 - 李乐乐

亚伦影音工作室 发表于 2023-4-20 15:30

杯中装不下眼泪 - 李乐乐

本帖最后由 亚伦影音工作室 于 2023-4-20 15:31 编辑 <br /><br /><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/fs/7b2b8f5eb40da94ca519e0295d894d91.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;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 320px; height: 320px;left: 20%; z-index: 20;top:15%;overflow:hidden;}

#an{position: absolute;
      top:0%; left:0%;
      width: 100%;
      height:100%;
   }
@keyframes cover1{   0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 {   0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
</style>

<div id="papa">
<div id="mydiv">*</div>

<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>



<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/641c7117a682492fcc45c008.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music270634580.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;}}});
        mplayer.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("mplayer");
    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-20 15:56

好听，感谢分享！

焱鑫磊 发表于 2023-4-20 16:17

分享老师佳作！{:4_187:}

红影 发表于 2023-4-20 16:41

这么多飘飞的粒子，真漂亮。欣赏亚伦老师好帖{:4_187:}

绿叶清舟 发表于 2023-4-20 21:10

漂亮的制作，欣赏{:4_199:}

亚伦影音工作室 发表于 2023-4-20 21:25

绿叶清舟 发表于 2023-4-20 21:10
漂亮的制作，欣赏

谢谢鼓励！

绿叶清舟 发表于 2023-4-20 21:33

亚伦影音工作室 发表于 2023-4-20 21:25
谢谢鼓励！

客气了，谢谢你的精彩才是啊

查看完整版本: 杯中装不下眼泪 - 李乐乐