论坛 › 欢乐水吧 › 小猫按钮 如果我告别-小铃铃

亚伦影音工作室 发表于 2024-12-4 14:07

小猫按钮 如果我告别-小铃铃

本帖最后由 亚伦影音工作室 于 2024-12-5 17:55 编辑 <br /><br /><style>
#papa { margin: 180px 0 20px calc(50% - 721px); background:#800 url('https://pic.imgdb.cn/item/6741e1d6d29ded1a8c237051.webp')no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#tz { margin: 0px auto; bottom: 0px;width: 840px; height: 300px; border: 0px solid gray; position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 300 4em/0em 华文隶书; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); }
#vid {z-index: 2;
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: lighten;
}

#mypic {top:60%; left:13%;z-index: 40;
display: block;position: absolute;
    width: 110px; height: 160px;
    background: url(https://pic.imgdb.cn/item/674fea38d0e0a243d4dd0c6e.png)no-repeat center/220px 160px;
animation: heart-burst steps(2) 2s infinite;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -220px 0;}
}


</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音"></div>
<div id="mypic" ></div>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/97/V-139799-78BE6C44.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/7a/c9/46/af9206cf7bbf39811244e19c928a942b/audio.mp3" autoplay loop></audio>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
   
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};

aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `如果我告别-小铃铃
作词：小米
作曲：甜仔
编曲：迟青松
混音：彭思文
如果我告别
有谁把我等待
你是否理解
你是否能明白
如果我告别
有谁把我等待
你是否理解
你是否会关怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀
如果我告别
有谁把我等待
你是否理解
你是否能明白
如果我告别
有谁把我等待
你是否理解
你是否会关怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀
`;
getAr(lrc);
</script>

<script>
mypic.onclick = () => aud.paused ?(aud.play(),vid.play()):(aud.pause(),vid.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');   
</script>

亚伦影音工作室 发表于 2024-12-4 14:11

https://pic.imgdb.cn/item/674fea38d0e0a243d4dd0c6e.png

这是猫的长图。用在播放器当按钮还不错!

梦油 发表于 2024-12-4 14:15

欣赏佳作，问候亚伦。

红影 发表于 2024-12-4 16:10

这样的长图好，可以点击时直接控制了，比控制动图要方便，而且更自然{:4_187:}

红影 发表于 2024-12-4 16:15

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

小辣椒 发表于 2024-12-4 20:46

亚伦这个播放器设计简单，但很实用，而且漂亮{:4_199:}

秋思梦景 发表于 2024-12-5 06:25

问候老师早上好！精美音画佳作，精心制作分享。向您学习！{:4_187:}{:5_116:}

世外桃源 发表于 2024-12-5 13:46

问好楼主，欣赏佳作

世外桃源 发表于 2024-12-5 13:46

感谢分享

查看完整版本: 小猫按钮 如果我告别-小铃铃