祝花潮的父亲们节日快乐！（黑黑的歌词同步套用一个）
<style>/* 帖子外层 */
.outer {
left: -300px; /* 水平定位*/
top:150px;
width: 1193px; /* 帖子宽度 */
height: 796px; /* 帖子高度 */
background: #ccc url('https://pic.imgdb.cn/item/62ab252f09475431296ea64e.gif') no-repeat; /* 帖子背景 */
box-shadow: 0 4px 18px #000; /* 盒子阴影*/
position: relative; /* 重要 帖子定位依赖 */
}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(900px, 650px); /* 定位 */
font: bold 1.2em sans-serif; /* 文本 */
color: #fff; /* 字体颜色 */
text-shadow: 1px 1px 2px #000; /* 文本阴影 */
background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
border-radius: 100% 0; /* 盒子边框 */
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
}
</style>
<div class="outer">
<div class="lrcbox">
<p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div>
<audio id="aud" src="https://s1.ananas.chaoxing.com/sv-w9/audio/23/5c/d0/f31068b194dd18846ade4f1c52396121/audio.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
geci = document.querySelector('#geci'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr = [
['00.15','老父亲--歌手刘和刚'],
['18.15','祝论坛的父亲们节日快乐！ '],
['28.36','LRC编辑：小辣椒 '],
['43.08','想想你的背影'],
['47.36','我感受了坚韧'],
['52.31','抚摸你的双手'],
['57.59','我摸到了艰辛'],
['62.47','不知不觉你鬓角露了白发'],
['71.90','不声不响你眼角上添了皱纹'],
['81.56','我的老父亲'],
['86.29','我最疼爱的人'],
['91.09','人间的甘甜有十分'],
['95.87','你只尝了三分'],
['100.58','这辈子做你的儿女'],
['105.44','我没有做够'],
['110.09','央求你呀下辈子'],
['114.80','还做我的父亲'],
['119.97','谢谢黑黑的教程分享'],
['139.13','听听你的叮嘱'],
['143.41','我接过了自信'],
['148.30','凝望你的目光'],
['153.45','我看到了爱心'],
['158.26','有老有小你手里捧着孝顺'],
['167.67','再苦再累你脸上挂着温馨'],
['177.24','我的老父亲'],
['182.08','我最疼爱的人'],
['186.74','生活的苦涩有三分'],
['191.76','你却吃了十分'],
['196.63','这辈子做你的儿女'],
['201.59','我没有做够'],
['206.42','央求你呀下辈子'],
['211.16','还做我的父亲'],
['216.16','我的老父亲'],
['220.73','我最疼爱的人'],
['225.52','生活的苦涩有三分'],
['230.29','你却吃了十分'],
['235.15','这辈子做你的儿女'],
['239.85','我没有做够'],
['244.73','央求你呀下辈子'],
['249.34','还做我的父亲'],
['254.34','我的老父亲'],
['274.68','谢谢欣赏']
];
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
geci.innerHTML = lrcAr;
}
}
})
</script>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
学习黑黑的代码{:4_187:} 时间紧张，最简单的图做一个，直接套用黑黑的{:4_170:} 好制作！意境挺好，画面精美，布局得当。 马黑黑 发表于 2022-6-16 21:02
好制作！意境挺好，画面精美，布局得当。
这个确实简单，一个图一个歌词同步。 小辣椒 发表于 2022-6-16 21:06
这个确实简单，一个图一个歌词同步。
嗯，容易控制 马黑黑 发表于 2022-6-16 21:06
嗯，容易控制
这个播放器很喜欢，后面的小绿叶会随歌词长短改变，设置的特别好 漂亮的制作，有创意！{:4_199:} 小辣椒 发表于 2022-6-16 21:09
这个播放器很喜欢，后面的小绿叶会随歌词长短改变，设置的特别好
你可以深加工 马黑黑 发表于 2022-6-16 21:22
你可以深加工
刚才在做的时候就在想的，后来想想套用太轻松了{:4_170:} 小辣椒 发表于 2022-6-16 21:27
刚才在做的时候就在想的，后来想想套用太轻松了
将来各方面比较正常了再说 亲爱的真快啊，做的又快又好。那个动图设计得也特别好，那个烟袋还一亮一亮的呢，很赞{:4_199:} 借亲爱的好帖同祝天下父亲们节日快乐{:4_187:} 加林森 发表于 2022-6-16 21:19
漂亮的制作，有创意！
谢谢队长欣赏和支持{:4_187:} 马黑黑 发表于 2022-6-16 21:28
将来各方面比较正常了再说
我也是想修改自己的风格做，但水平不够，而且花时间，就直接套用了{:4_173:} 小辣椒 发表于 2022-6-16 21:37
我也是想修改自己的风格做，但水平不够，而且花时间，就直接套用了
也做的很好了呢 红影 发表于 2022-6-16 21:30
亲爱的真快啊，做的又快又好。那个动图设计得也特别好，那个烟袋还一亮一亮的呢，很赞
这个图图网络的就做了几个图层，求速度，加了2个效果上去，赶快今天完成，已经9点多了。。。。 小辣椒 发表于 2022-6-16 21:36
谢谢队长欣赏和支持
好歌好制作，我还没有想好制作这个父亲节呢。 马黑黑 发表于 2022-6-16 21:38
也做的很好了呢
黑黑一直是鼓励的{:4_173:}