滴答 超简单歌词同步模板

马黑黑

Loading ...

马黑黑

完整帖子：有注释

1. <style>
   
2. /* 帖子外层 */
   
3. .outer {
   
4.         left: -214px; /* 水平定位*/
   
5.         width: 1024px; /* 帖子宽度 */
   
6.         height: 577px; /* 帖子高度 */
   
7.         background: #ccc url('/data/attachment/forum/202206/16/130423gisx9ksrr59zk9x6.jpg') no-repeat; /* 帖子背景 */
   
8.         box-shadow: 0 4px 18px #000; /* 盒子阴影  */
   
9.         position: relative; /* 重要 帖子定位依赖 */
   
10. }
    
11. 
    
12. /* 歌词同步显示框 */
    
13. .lrcbox {
    
14.         transform: translate(20px, 20px); /* 定位 */
    
15.         font: bold 1em sans-serif; /* 文本 */
    
16.         color: #fff; /* 字体颜色 */
    
17.         text-shadow: 1px 1px 2px #000; /* 文本阴影 */
    
18.         background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
    
19.         border-radius: 100% 0; /* 盒子边框 */
    
20.         cursor: pointer; /* 手型指针 */
    
21.         position: absolute; /* 关键 歌词显示框依赖于此 */
    
22. }
    
23. </style>
    
24. 
    
25. <div class="outer">
    
26.         <div class="lrcbox">
    
27.                 <p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
    
28.                 <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
    
29.         </div>
    
30. </div>
    
31. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=252786.mp3" autoplay="autoplay" loop="loop"></audio>
    
32. 
    
33. <script>
    
34. //盒子句柄
    
35. let lrcbox = document.querySelector('.lrcbox'),
    
36.         geci = document.querySelector('#geci'),
    
37.         aud = document.querySelector('#aud'),
    
38.         meter = document.querySelector('#meter');
    
39. let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
    
40. //歌词数组
    
41. let lrcAr = [
    
42.         ['0.20','作词 : 高地'],
    
43.         ['1.35','作曲 : 高地'],
    
44.         ['1.50','演唱 : 侃侃'],
    
45.         ['26.56','滴答滴答滴答滴答'],
    
46.         ['32.62','时针它不停在转动'],
    
47.         ['38.38','滴答滴答滴答滴答'],
    
48.         ['44.29','小雨它拍打着水花'],
    
49.         ['50.13','滴答滴答滴答滴答'],
    
50.         ['56.01','是不是还会牵挂他'],
    
51.         ['61.87','滴答滴答滴答滴答'],
    
52.         ['67.78','有几滴眼泪已落下'],
    
53.         ['76.77','滴答滴答滴答滴答'],
    
54.         ['82.31','寂寞的夜和谁说话'],
    
55.         ['88.15','滴答滴答滴答滴答'],
    
56.         ['93.98','伤心的泪儿谁来擦'],
    
57.         ['99.94','滴答滴答滴答滴答'],
    
58.         ['105.85','整理好心情再出发'],
    
59.         ['111.68','滴答滴答滴答滴答'],
    
60.         ['117.42','还会有人把你牵挂'],
    
61.         ['149.82','滴答滴答滴答滴答'],
    
62.         ['155.53','寂寞的夜和谁说话'],
    
63.         ['161.45','滴答滴答滴答滴答'],
    
64.         ['167.10','伤心的泪儿谁来擦'],
    
65.         ['173.11','嘀嗒嘀嗒嘀嗒嘀嗒'],
    
66.         ['179.01','整理好心情再出发'],
    
67.         ['184.81','嘀嗒嘀嗒嘀嗒嘀嗒'],
    
68.         ['190.60','还会有人把你牵挂']
    
69. ];
    
70. //歌词框单击事件
    
71. lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
    
72. //audio进度监听事件
    
73. aud.addEventListener('timeupdate', () => {
    
74.         meter.value = prog(aud.duration, aud.currentTime);
    
75.         let tt = aud.currentTime;
    
76.         for(j=0; j<lrcAr.length; j++){
    
77.                 if(tt >= lrcAr[j][0]){
    
78.                         geci.innerHTML = lrcAr[j][1];
    
79.                 }
    
80.         }
    
81. })
    
82. </script>
    

复制代码

代码：

马黑黑

/* 歌词同步显示框 */
.lrcbox {
        transform: translate(20px, 20px); /* 定位 */
        font: bold 1em sans-serif; /* 文本 */
…………

论坛里，文本大小用 1.2em 感觉会好一点

红影

这个进度条和歌词都放在一片小绿叶上，好看

红影

这个很巧妙，貌似不用给出歌词盒子的大小，也不用给出进度条的位置。
歌词占的位置就是歌词长短决定的？进度条自动可以在歌词下面？

小辣椒

这个黒黑说很简单，晚上我做一个套用

加林森

谢谢。学习了！

马黑黑

加林森 发表于 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
学习黑黑老师新制作！

马黑黑

小辣椒 发表于 2022-6-16 16:55
这个黒黑说很简单，晚上我做一个套用

确实简单

加林森

马黑黑 发表于 2022-6-16 18:10
除去歌词，这个算简单了

明白的。

小辣椒

先上来看看代码，晚上做一个

黑黑做的非常漂亮

小辣椒

这个歌词后面出来的绿的背景很漂亮的

马黑黑

小辣椒 发表于 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”

嗯嗯，看到了，那个绿叶是变化的。要是长长短短的歌词，变化就更明显了呢

“是自然布局”，那么把两个顺序换换，位置也就换了吧。