论坛 › 欢乐水吧 › 明月夜

东篱闲人 发表于 2023-9-3 12:11

明月夜

本帖最后由 东篱闲人 于 2023-9-3 14:28 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1951229">
<br /><br /><style>
#papa{ margin: 10px 50px;width: 564px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;height:902px;background: url('https://pic.imgdb.cn/item/64f1d897661c6c8e54711140.jpg') no-repeat center/cover;border: 1px solid;display: grid;position: relative;z-index: 12345; --state: running;}
#mplayer {position:absolute;top:90%;left:85%;font-size:25px;cursor: pointer;color:#fff000;font-family:华文行楷;z-index: 1650;animation: rot 0.4s 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 1.6em 华文新魏;
      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/64f1d835661c6c8e5470fa80.jpg') no-repeat center/cover;}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
40% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
80% {opacity: 1;transform: scale(4);}
100% {opacity: 0;transform:scale(4);}}
#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 1.6em华文新魏; 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/6466b80a0d2dde577731875f.gif" width="100%" height="100%"></div>
<span id="fullscreen"></span>

<div id="lrc" data-lrc=" 明月夜">" 明月夜</div>
<div id="mplayer" ><span id="bf">暂停</span></div>
                        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=188807.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); /*获得歌词数组*/
})();

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

dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.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>
</td></tr></table>

醉美水芙蓉 发表于 2023-9-3 12:24

红影 发表于 2023-9-3 13:20

这个帖子的全屏估计在手机模式下挺好，电脑模式下一全屏就不是全图了呢{:4_173:}

红影 发表于 2023-9-3 13:23

东篱大哥又学个漂亮的制作，很赞{:4_199:}

东篱闲人 发表于 2023-9-3 14:28

红影 发表于 2023-9-3 13:23
东篱大哥又学个漂亮的制作，很赞

就是改变了下图片的比例。。。。

东篱闲人 发表于 2023-9-3 14:29

红影 发表于 2023-9-3 13:20
这个帖子的全屏估计在手机模式下挺好，电脑模式下一全屏就不是全图了呢

这下省事了，不用全屏了。。。

红影 发表于 2023-9-3 20:10

东篱闲人 发表于 2023-9-3 14:28
就是改变了下图片的比例。。。。

哪有这么简单，还要修改歌词字体大小才能适应呢{:4_204:}

红影 发表于 2023-9-3 20:11

东篱闲人 发表于 2023-9-3 14:29
这下省事了，不用全屏了。。。

不使用全屏的话，可以把那几个字移到底图之外呢。不过手机看全屏应该没问题，倒也不用弄掉了你。

东篱闲人 发表于 2023-9-3 20:35

红影 发表于 2023-9-3 20:11
不使用全屏的话，可以把那几个字移到底图之外呢。不过手机看全屏应该没问题，倒也不用弄掉了你。

斩草除根、、、、、

查看完整版本: 明月夜