论坛 › 欢乐水吧 › 诺言 郭有才

亚伦影音工作室 发表于 2024-6-3 14:08

诺言 郭有才

本帖最后由 亚伦影音工作室 于 2025-5-28 06:51 编辑 <br /><br /><style>
#papa{margin: 150px -300px;width: 1164px;height: 620px;background:#222 url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/1.jpg)no-repeat center/cover;
position: relative;overflow: hidden;z-index: 12345;}
#pinpu{position: absolute; width: 100%; height: 350px; z-index: 9; top:45%;left:0%;z-index: 4;mix-blend-mode: lighten;}
#pinpu img{width: 100%;height: 350px;}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 460px;transform: translate(-50%);font:normal 3em 华文新魏; font-weight:400;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }

#bfqbj {margin: 20px 0px;width: 600px;height: 86px;background: url(https://pic.imgdb.cn/item/663248920ea9cb140397e28c.png)no-repeat center/420px 120px;position: absolute;overflow: hidden;z-index: 1;}
#dt{position: absolute;top:20px; left:240px;width: 70px;height: 70px;z-index:3;}
#dt img{width: 100%;}
#yinpin{position: absolute;top:10px; left:100px;width: 150px;height: 50px;z-index:2; filter:invert(90%)hue-rotate(120deg)}
#yinpin img{width: 100%;height: 50px;}

#mplayer {z-index: 80;
        position: absolute;
        top:0px; left:0px;
        bottom: 0px;
        width: 30px;
        height: 30px;
       
        opacity: 1;
        transition: .4s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #00ff00;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 422px;bottom: -20px;
        border-width: 7px 7px;
        border-color: transparent transparent transparent #00ff00;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 3px;
        height: 11px;bottom: -18.5px;
                left: 437.8px; border-color: #00ff00;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      color: #ffffff;font-size: 12px;
      bottom: 35px;
      left:305px;}
#prog {position: absolute;z-index: 80;
      width: 160px;
      height: 1px;
      cursor: pointer;
         bottom: 28px;
left:305px;
border-radius: 2px;}
#bt{ --w: 60%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:300px;top:65px;font-size: 12px; z-index: 2; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id="papa">
<div id="pinpu"><img id="pinpuImg" src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" ></div>
<div id="bfqbj">
<div id="yinpin"><img id="tu1" src="https://pic.imgdb.cn/item/66483855d9c307b7e951b66a.gif" ></div>
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/66324e000ea9cb1403a64408.webp" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div id="bt">亚伦影音- 诺言 - 郭有才 </div>
</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/6d/43/30/b6947b54c3dd9519ea07928df9e2e5ac/audio.mp3" loop autoplay></audio>

<script >
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),image.play(),image1.play(),image2.play() ): (aud.pause(),image.stop(),image1.stop(),image2.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };
bt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => bt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bt.style.animationPlayState = 'paused');

</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 = '';   image1.style.opacity = ''; image2.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("tu");
var image1= document.getElementById("tu1");
var image2= document.getElementById("pinpuImg");
</script>
<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); /*获得歌词数组*/
})();
</script>

梦江南 发表于 2024-6-3 14:09

沙发欣赏老师佳作！下午好！

梦油 发表于 2024-6-3 14:20

欣赏佳作，问候亚伦。

马黑黑 发表于 2024-6-3 18:18

清爽，高端，漂亮

老谟深虑 发表于 2024-6-3 18:34

         欣赏老师的佳作，点赞！

红影 发表于 2024-6-3 19:24

漂亮的制作，欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2024-6-3 20:19

马黑黑 发表于 2024-6-3 18:18
清爽，高端，漂亮

老师才是人才，我是学生！

马黑黑 发表于 2024-6-4 07:55

亚伦影音工作室 发表于 2024-6-3 20:19
老师才是人才，我是学生！

言重了

梦油 发表于 2024-6-4 09:13

欣赏佳作，问候亚伦。

查看完整版本: 诺言 郭有才