小喇叭播放器《冬雪飘落》任夏
本帖最后由 亚伦影音工作室 于 2024-12-3 01:12 编辑 <br /><br /><style>#papa { margin: 180px 0 20px calc(50% - 721px); background:#800 url('https://pic.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg')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 4.2em/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:80%; left:3%;z-index: 40;
display: block;position: absolute;
width: 154px; height: 154px;
background: url(https://pic.imgdb.cn/item/674d708dd0e0a243d4dbe47f.png) 0 0 no-repeat;
animation: heart-burst steps(4) 1s infinite;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -616px 0;}
}
#per{top:80%; left:30%;z-index: 40;
display: block;position: absolute;}
</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/14/01/V-140185-2C72CFDE.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/07/32/e8/80dd54041cde4d05aa3d3a62eaee00c1/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 = `作词：任夏
作曲：任夏/曲多美
编曲：王文达
吉他：黄耀增
和声编写/和声：谌宥
人声编辑：迟色
混音：浓汤宝
制作人：亚伦
冬雪飘落
监制：熊磊/王腾飞
宣发策划：姜雪/万畅/陈建华
宣发：星云计划x 一米星空
艺人经纪：韦耀
发行人：韦琪
发行公司：万象星云
冬雪飘落
天慢慢变凉
夜慢慢变长
我一想到你
却突然的忧伤
常常问自己
这样累不累
好想知道你现在
把心交给了谁
冬雪飘落 它轻轻对我说
说你身边 已有人代替我
回头看看我们也曾无话不说
怎么最后走着走着却散了
冬雪飘落 它轻轻对我说
说你现在 已不再需要我
明明我们之间谁都没有犯错
可惜到最后却成了彼此
余生的过客
常常问自己
这样累不累
好想知道你现在
把心交给了谁
冬雪飘落 它轻轻对我说
说你身边 已有人代替我
回头看看我们也曾无话不说
怎么最后走着走着却散了
冬雪飘落 它轻轻对我说
说你现在 已不再需要我
明明我们之间谁都没有犯错
可惜到最后却成了彼此
余生的过客
冬雪飘落 它轻轻对我说
说你身边 已有人代替我
回头看看我们也曾无话不说
怎么最后走着走着却散了
冬雪飘落 它轻轻对我说
说你现在 已不再需要我
明明我们之间谁都没有犯错
可惜到最后却成了彼此
余生的过客`;
getAr(lrc);
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-2 19:30 编辑
https://pic.imgdb.cn/item/674d708dd0e0a243d4dbe47f.png
利用一个长图制作一个动态播放器按钮。 新颖、漂亮的小播，谢谢亚伦老师精彩分享{:4_191:} 亚伦这个png的喇叭制作很漂亮{:4_178:} 欣赏亚伦精彩的小播制作{:4_187:} 哈哈，这个图图有点像千羽的 长图模拟动态小播，这个构思好{:4_199:} 这个画面制作得好美啊。欣赏亚伦老师好帖{:4_199:} 好听好看 感谢分享
页:
[1]