论坛 › 欢乐水吧 › 入了心怎能忘记（DJ 伟然版）【一键可控】

亚伦影音工作室 发表于 2023-8-26 20:41

入了心怎能忘记（DJ 伟然版）【一键可控】

本帖最后由 亚伦影音工作室 于 2023-8-26 20:44 编辑 <br /><br /><style>
#papa{ margin: 10px -300px;width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;height: 620px;background: url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') no-repeat center/cover;border: 1px solid;display: grid;position: relative;z-index: 12345; --state: running;}
#mplayer {position:absolute;top:90%;left:2%;cursor: pointer;font: normal 2.3em/0em 华文隶书;
color:#fff000;z-index: 1650;animation: rot 0.5s linear infinite;}
@keyframes rot{0% {opacity: 1;transform: scale(1);}100% {opacity: 1;transform:scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(250%);}}
#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: 85%;
      font:normal 3em 华文新魏;
      font-weight:200;
      color: #000080;
      white-space: pre;
      -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;
      background: var(--bg);
      
      -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(360deg)}}
@keyframes cover2 { 0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
#img_border{width:100%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: 4;background: url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') no-repeat center/cover;}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
10% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
20% {opacity: 1;transform: scale(4);}
60% {opacity: 1;transform: scale(1)rotateY(-180deg);}
70% {opacity: 1;transform: scale(1)rotateY(-180deg);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
80% {opacity: 1;transform: scale(4)rotateY(-180deg);}
100% {opacity: 0;transform:scale(4)rotateY(-180deg);}
}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: 4;mix-blend-mode: lighten; }
   #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">
<divid="img_border" ></div>
<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/64e9ed69661c6c8e544cbe70.gif" width="100%" height="100%"></div>
<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="mplayer" ><span id="bf">暂停</span></div>
                        <audio id="aud" src="https://www.qqmc.com/mp3/music291522916.mp3" autoplay="" loop=""></audio>
</div>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `入了心怎能忘记（DJ 伟然版）
词：金艾娜
曲：钰柃
唱：金艾娜吴建强
女：嘴上说着不联系
可心里拼命的惦记
男：如果当初保持距离
也许不会轻易爱上你
女：三生有幸遇见你
为爱许下一个无期
男：这颗心被你轻易占据
就连相思也在你梦里
合：入了心的你怎能忘记
守着一份挚爱甘愿沉迷
女：你给了我一段倾城相遇
我苦苦等你今生相许
合：入了心的你怎能忘记
我会永远爱你直到老去
男：在每一个清晨黄昏里
合：守住真心时光中等你
女：嘴上说着不联系
可心里拼命的惦记
男：如果当初保持距离
也许不会轻易爱上你
女：三生有幸遇见你
为爱许下一个无期
男：这颗心被你轻易占据
就连相思也在你梦里
合：入了心的你怎能忘记
守着一份挚爱甘愿沉迷
女：你给了我一段倾城相遇
我苦苦等你今生相许
合：入了心的你怎能忘记
我会永远爱你直到老去
男：在每一个清晨黄昏里
合：守住真心时光中等你
合：入了心的你怎能忘记
守着一份挚爱甘愿沉迷
女：你给了我一段倾城相遇
我苦苦等你今生相许
合：入了心的你怎能忘记
我会永远爱你直到老去
男：在每一个清晨黄昏里
合：守住真心时光中等你
守住真心时光中等你
`;

/*变量 ：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); /*获得歌词数组*/
})();

img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');




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("testImg");
var aud= document.getElementById('aud');
    var mplayer=document.getElementById("bf");
mplayer.onclick = function() {
if ( bf.innerText == '暂停') {
            image.stop();aud.pause();
          bf.innerText="播放";
      } else {
          image.play();aud.play();
            bf.innerText="暂停";
      }
    };

</script>

小辣椒 发表于 2023-8-26 20:43

亚伦这个效果漂亮{:4_199:}

小辣椒 发表于 2023-8-26 20:45

全屏欣赏特别漂亮，美女惊艳了{:4_189:}

小辣椒 发表于 2023-8-26 20:45

谢谢亚伦的精彩制作{:4_187:}

红影 发表于 2023-8-26 20:53

这个制作好棒，欣赏亚伦老师好帖{:4_199:}

醉美水芙蓉 发表于 2023-8-26 21:10

查看完整版本: 入了心怎能忘记（DJ 伟然版）【一键可控】