论坛 › 欢乐水吧 › 你暧昧成瘾我走了心

亚伦影音工作室 发表于 2024-2-12 17:21

你暧昧成瘾我走了心

本帖最后由 亚伦影音工作室 于 2024-4-16 09:58 编辑 <br /><br /><style>
#papa{ margin: 10px -300px;width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;height: 640px;background:#333 url('https://pic.imgdb.cn/item/658d19f6c458853aef55c1ac.jpg') no-repeat center/cover;border: 1px solid;display: grid;position: relative;z-index: 12345; --state: running;}
#mplayer {position:absolute; width: 250px; height: 55px;left: 8%; z-index: 120;top:65%;z-index: 1650;animation: rott 3s linear infinite;}
@keyframes rot{0% {opacity: 1;transform: scale(1);}100% {opacity: 1;transform:scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(250%);}}
https://pic.imgdb.cn/item/658d19f6c458853aef55c1ac.jpg
#an{position: absolute;
      top:0%; left:0%;
      width: 100%;
      height:100%; z-index: 120;
   }
@keyframes rott{0% {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}}
#pp { position: absolute; top: 75%;width: 100%; left:5px; z-index: 4;animation: rott 6s linear infinite;}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: #000000;
      position: absolute;z-index: 6;
      left: 50%;
      transform: translate(50%);
      top: 41%;
      font: bold 35px/1.5 黑体,sans-serif;
      transform: perspective(200px)rotate(360deg)rotateY(40deg);
letter-spacing: 2px;
      color: #00ff00;

        -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent,transparent 25% , #000080);
-webkit-background-clip: text;
      white-space: pre;
      -webkit-background-clip: text;
            filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;border-bottom: 4px dashed #880000;
      overflow: hidden;
      white-space: pre;
    background: linear-gradient(28deg, #FB0000 31%,#Ffffff 53%,#Fff000 70%);
   
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(0deg)}}
@keyframes cover2 { 0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(0deg)}}

#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 1660}
</style>
<div id="papa">

<canvas id="pp" title="亚伦影音" ></canvas>

<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="mplayer"><img height="100%" id="an" src="https://pic.imgdb.cn/item/64ee76b5661c6c8e546b61ba.gif" width="100%" /></div>
                        <audio id="aud" src="https://bzgz.club/view.php/54124e5c2d98a6e5acbf4d4d61eef2ca.mp3" autoplay="" loop=""></audio>
</div>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
你暧昧成瘾我走了心
作词：雨袂独舞
作曲：赵洋
演唱：赵洋
出品：亚伦影音
那夜你衣领上的红色唇印
让我突然之间如梦初醒
为何你把假装深情的眼神
害我为了爱而一意孤行
原来你是不该触碰的感情
如今回忆都随眼泪飘零
我拼命地付出用心的经营
爱的底线依旧被你刷新
你暧昧成瘾我却走了心
我不该被诺言蒙蔽眼睛
从此那伤痕会反复提醒
你赐的苦酒我先干为敬
你暧昧成瘾我却走了心
原来爱是一场痛苦旅行
你不必开口再解释说明
反正我让悲剧牢牢锁定
原来你是不该触碰的感情
如今回忆都随眼泪飘零
我拼命地付出用心的经营
爱的底线依旧被你刷新
你暧昧成瘾我却走了心
我不该被诺言蒙蔽眼睛
从此那伤痕会反复提醒
你赐的苦酒我先干为敬
你暧昧成瘾我却走了心
原来爱是一场痛苦旅行
你不必开口再解释说明
反正我让悲剧牢牢锁定
你暧昧成瘾我却走了心
我不该被诺言蒙蔽眼睛
从此那伤痕会反复提醒
你赐的苦酒我先干为敬
你暧昧成瘾我却走了心
原来爱是一场痛苦旅行
你不必开口再解释说明
反正我让悲剧牢牢锁定
反正我让悲剧牢牢锁定
`;

/*变量 ：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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.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;
                }
      }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

/*函数 ：频谱*/
(function() { ypData = ;
let total = 120,idx = 0;
      let ctx =pp.getContext('2d');
      let w =pp.width =1164, h = pp.height = 120;
      let slice = w / total, vmax = Math.max.apply(null, ypData);
       aud.loop = false;
      ctx.strokeStyle = '#00ff00';
      ctx.fillStyle = '#ffffff';
      ctx.font = '14px sans-serif';
      ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
      ctx.shadowBlur = 1;
      ctx.shadowColor = '#000';
      ctx.fillText('play', 80, 50);
      
      aud.addEventListener('ended', () => { idx = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                draw();
                idx ++;
                if(idx > ypData.length - 1) idx = 0;
      });

      let draw = () => {
                let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
                ctx.clearRect(0,0,w,h);
                ctx.beginPath();
                Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
                ctx.stroke();
                ctx.fillText(toMin(aud.currentTime) + ' / ' + toMin(aud.duration), 160, 20);
      }
      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 fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
</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"),
aud= document.getElementById('aud'),
    button = document.getElementById("mplayer");
    button.onclick = function() {
      if (this.value == '停') {
         image.play();aud.play();
            this.value = '播';
      } else {
            image.stop(); aud.pause();
            this.value = '停';
      }
    };


</script>

亦是金 发表于 2024-2-12 18:00

欣赏学习！亚伦龙年快乐！{:4_177:}

红影 发表于 2024-2-12 20:16

好奇妙的同步歌词，漂亮{:4_199:}

红影 发表于 2024-2-12 20:19

暧昧成瘾的男人可以直接蹬了，只是让人心里有那么多的不甘和愤懑。
以前玩的论坛就有一个这样的人，一个又一个的网络情侣，简直就是共享单车一样的男人。这样的男人应该踹死{:4_173:}

红影 发表于 2024-2-12 20:20

欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2024-2-12 20:26

红影 发表于 2024-2-12 20:19
暧昧成瘾的男人可以直接蹬了，只是让人心里有那么多的不甘和愤懑。
以前玩的论坛就有一个这样的人，一个又 ...

世态炎凉！各色各样人物！

红影 发表于 2024-2-12 20:45

亚伦影音工作室 发表于 2024-2-12 20:26
世态炎凉！各色各样人物！

想起了以前的一个人，忍不住有感慨，让亚伦老师见笑了{:4_173:}

醉美水芙蓉 发表于 2024-2-13 08:02

查看完整版本: 你暧昧成瘾我走了心