滴答 超简单歌词同步模板
本帖最后由 马黑黑 于 2022-6-16 13:11 编辑 <br /><br /><style>/* 帖子外层 */
.outer {
left: -214px; /* 水平定位*/
width: 1024px; /* 帖子宽度 */
height: 577px; /* 帖子高度 */
background: #ccc url('/data/attachment/forum/202206/16/130423gisx9ksrr59zk9x6.jpg') no-repeat; /* 帖子背景 */
box-shadow: 0 4px 18px #000; /* 盒子阴影*/
position: relative; /* 重要 帖子定位依赖 */
}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(20px, 20px); /* 定位 */
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://music.163.com/song/media/outer/url?id=252786.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 = [
['0.20','作词 : 高地'],
['1.35','作曲 : 高地'],
['1.50','演唱 : 侃侃'],
['26.56','滴答滴答滴答滴答'],
['32.62','时针它不停在转动'],
['38.38','滴答滴答滴答滴答'],
['44.29','小雨它拍打着水花'],
['50.13','滴答滴答滴答滴答'],
['56.01','是不是还会牵挂他'],
['61.87','滴答滴答滴答滴答'],
['67.78','有几滴眼泪已落下'],
['76.77','滴答滴答滴答滴答'],
['82.31','寂寞的夜和谁说话'],
['88.15','滴答滴答滴答滴答'],
['93.98','伤心的泪儿谁来擦'],
['99.94','滴答滴答滴答滴答'],
['105.85','整理好心情再出发'],
['111.68','滴答滴答滴答滴答'],
['117.42','还会有人把你牵挂'],
['149.82','滴答滴答滴答滴答'],
['155.53','寂寞的夜和谁说话'],
['161.45','滴答滴答滴答滴答'],
['167.10','伤心的泪儿谁来擦'],
['173.11','嘀嗒嘀嗒嘀嗒嘀嗒'],
['179.01','整理好心情再出发'],
['184.81','嘀嗒嘀嗒嘀嗒嘀嗒'],
['190.60','还会有人把你牵挂']
];
//歌词框单击事件
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>
完整帖子：有注释<style>
/* 帖子外层 */
.outer {
left: -214px; /* 水平定位*/
width: 1024px; /* 帖子宽度 */
height: 577px; /* 帖子高度 */
background: #ccc url('/data/attachment/forum/202206/16/130423gisx9ksrr59zk9x6.jpg') no-repeat; /* 帖子背景 */
box-shadow: 0 4px 18px #000; /* 盒子阴影*/
position: relative; /* 重要 帖子定位依赖 */
}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(20px, 20px); /* 定位 */
font: bold 1em 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://music.163.com/song/media/outer/url?id=252786.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 = [
['0.20','作词 : 高地'],
['1.35','作曲 : 高地'],
['1.50','演唱 : 侃侃'],
['26.56','滴答滴答滴答滴答'],
['32.62','时针它不停在转动'],
['38.38','滴答滴答滴答滴答'],
['44.29','小雨它拍打着水花'],
['50.13','滴答滴答滴答滴答'],
['56.01','是不是还会牵挂他'],
['61.87','滴答滴答滴答滴答'],
['67.78','有几滴眼泪已落下'],
['76.77','滴答滴答滴答滴答'],
['82.31','寂寞的夜和谁说话'],
['88.15','滴答滴答滴答滴答'],
['93.98','伤心的泪儿谁来擦'],
['99.94','滴答滴答滴答滴答'],
['105.85','整理好心情再出发'],
['111.68','滴答滴答滴答滴答'],
['117.42','还会有人把你牵挂'],
['149.82','滴答滴答滴答滴答'],
['155.53','寂寞的夜和谁说话'],
['161.45','滴答滴答滴答滴答'],
['167.10','伤心的泪儿谁来擦'],
['173.11','嘀嗒嘀嗒嘀嗒嘀嗒'],
['179.01','整理好心情再出发'],
['184.81','嘀嗒嘀嗒嘀嗒嘀嗒'],
['190.60','还会有人把你牵挂']
];
//歌词框单击事件
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>
代码：
/* 歌词同步显示框 */
.lrcbox {
transform: translate(20px, 20px); /* 定位 */
font: bold 1em sans-serif; /* 文本 */
…………
论坛里，文本大小用 1.2em 感觉会好一点 这个进度条和歌词都放在一片小绿叶上，好看{:4_187:} 这个很巧妙，貌似不用给出歌词盒子的大小，也不用给出进度条的位置。
歌词占的位置就是歌词长短决定的？进度条自动可以在歌词下面？ 这个黒黑说很简单，晚上我做一个套用 谢谢。学习了！{:4_178:} 本帖最后由 马黑黑 于 2022-6-16 18:19 编辑
加林森 发表于 2022-6-16 17:59
谢谢。学习了！
除去歌词，这个算简单了 红影 发表于 2022-6-16 14:48
这个进度条和歌词都放在一片小绿叶上，好看
放哪都行的，可以加工一下 红影 发表于 2022-6-16 14:56
这个很巧妙，貌似不用给出歌词盒子的大小，也不用给出进度条的位置。
歌词占的位置就是歌词长短决定的？进 ...
lrcbox装载两个元素，p和meter，道理上其长度由p和meter共同决定，最短时是meter，歌词变长了则由依据 p 的长度。
由于是自然布局，文档流的先后决定了元素的位置，p在前，所以meter在下一行。 醉美水芙蓉 发表于 2022-6-16 17:04
学习黑黑老师新制作！
{:4_190:} 小辣椒 发表于 2022-6-16 16:55
这个黒黑说很简单，晚上我做一个套用
确实简单 马黑黑 发表于 2022-6-16 18:10
除去歌词，这个算简单了
明白的。{:4_191:} 先上来看看代码，晚上做一个{:4_187:}
黑黑做的非常漂亮 这个歌词后面出来的绿的背景很漂亮的 小辣椒 发表于 2022-6-16 18:30
这个歌词后面出来的绿的背景很漂亮的
这个背景很容易弄出来的：设置背景色，再设置边框样式
border-radius: 0 100% 或 100% 0 这个很小巧的啊 马黑黑 发表于 2022-6-16 18:11
放哪都行的，可以加工一下
没想到它们天然有隐藏的边框，要不是那绿叶，根本都不知道呢。 马黑黑 发表于 2022-6-16 18:18
lrcbox装载两个元素，p和meter，道理上其长度由p和meter共同决定，最短时是meter，歌词变长了则由依据 p...
“其长度由p和meter共同决定，最短时是meter”
嗯嗯，看到了，那个绿叶是变化的。要是长长短短的歌词，变化就更明显了呢{:4_173:}
“是自然布局”，那么把两个顺序换换，位置也就换了吧。