祝端午安康

马黑黑

HUACHAO PLAYER

马黑黑

帖子代码（未经严谨测试）

1. <style>
   
2. #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/55.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
   
3. #lrc { position: absolute; left: 20px; top: 20px; font: normal 40px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
   
4. #player { position: absolute; left: calc(50% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: green; --prg: 0%; --btnSize: 50px;}
   
5. #player::before, #player::after { position: absolute; content: ''; }
   
6. #player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover; filter: hue-rotate(180deg); animation: rot 6s linear infinite var(--state);}
   
7. #player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
   
8. .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
   
9. @keyframes rot { to { transform: rotate(360deg); } }
   
10. @keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
    
11. </style>
    
12. 
    
13. <div id="tz">
    
14.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2053633738" autoplay loop></audio>
    
15.         <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/67/5ecc8865bb6d6.mp4" autoplay loop muted></video>
    
16.         <div id="lrc">HUACHAO PLAYER</div>
    
17.         <div id="player" data-time="00:00 00:00"></div>
    
18. </div>
    
19. 
    
20. <script>
    
21. var vids = document.querySelectorAll('.vid');
    
22. var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));
    
23. 
    
24. var lrcKey = 0;
    
25. 
    
26. var showLrc = () => {
    
27.         if(lrcKey >= lrcAr.length) return false;
    
28.         lrc.innerText = lrcAr[lrcKey][1];
    
29.         lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
    
30.         lrcKey ++;
    
31. };
    
32. 
    
33. var mState = () => {
    
34.         tz.style.setProperty('--state',['running','paused'][+aud.paused]);
    
35.         if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    
36. };
    
37. 
    
38. var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');
    
39. 
    
40. aud.onplaying = aud.onpause = () => mState();
    
41. 
    
42. aud.onseeked = () => {
    
43.         for(var j = 0; j < lrcAr.length; j ++) {
    
44.                 if(aud.currentTime < lrcAr[j][0]) {
    
45.                         lrcKey = j - 1;
    
46.                         if(lrcKey < 0) lrcKey = 0;
    
47.                         break;
    
48.                 }
    
49.         }
    
50. };
    
51. 
    
52. aud.ontimeupdate = () => {
    
53.         player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
    
54.         player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
    
55.         if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr[lrcKey][0]) showLrc();
    
56. }
    
57. 
    
58. player.onclick = (e) => {
    
59.         if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
    
60.         if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
    
61. }
    
62. 
    
63. player.onmousemove = (e) => {
    
64.         if(e.offsetY < 0) {
    
65.                 if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
    
66.                         player.title = aud.paused ? '播放' : '暂停';
    
67.                         player.style.cursor = 'pointer';
    
68.                 }
    
69.         }else{
    
70.                 player.title = '调节进度';
    
71.                 player.style.cursor = 'pointer';
    
72.         }
    
73. };
    
74. 
    
75. var lrcAr = [ [2,"余静 - 五月初五端午节", 4], [8.68,"词曲：张博伦",1.7], [10.39,"演唱：余静",5.3], [15.67,"五月初五端午节",4.9], [20.54,"佩香囊 挂艾叶",3.5], [24.06,"糯米粽子多吃些",3.9], [27.93,"龙舟嘛争前列",3.7], [31.67,"五月初 五端午节",3.2], [34.91,"爱国心 楚辞写",4.3], [39.23,"汨罗江边唤屈原",3.9], [43.14,"纪念他忠贞烈",18.9], [62.02,"五月初五端午节",4.0], [65.98,"佩香囊 挂艾叶",4.0], [70.01,"糯米粽子多吃些",3.9], [73.88,"龙舟嘛争前列",3.7], [77.61,"五月初 五端午节",4.3], [81.9,"爱国心 楚辞写",3.2], [85.08,"汨罗江边唤屈原",4.4], [89.52,"纪念他忠贞烈",6]];
    
76. </script>

复制代码

马黑黑

本帖lrc歌词数组，数组元素的第三个子元素，例如 [2,"余静 - 五月初五端午节", 4] 的红色部分，可以不管它的精准度，歌词显示模块没有使用到它。

马黑黑

歌词左右游移的两边边距酱紫设置（假设两边保留 100px）：

#lrc {
    /* 其他代码*/
    left: 100px;
    /* 其他代码*/
}

@keyframes fly { to { left: calc(100% - var(--ww) - 100px); } }

梦油

祝黑黑先生及家人端午安康、万事如意！

马黑黑

梦油 发表于 2024-6-10 16:12
祝黑黑先生及家人端午安康、万事如意！

愤怒的葡萄

祝坛友们端午节快乐！~~~

樵歌

黑黑阖家安康，多吃粽子

马黑黑

樵歌 发表于 2024-6-10 17:54
黑黑阖家安康，多吃粽子

好哒。同样祝你

马黑黑

愤怒的葡萄 发表于 2024-6-10 17:52
祝坛友们端午节快乐！~~~

共同快乐

马黑黑

醉美水芙蓉 发表于 2024-6-10 17:28
哇！新品出炉了！谢谢老师分享！

梦江南

欣赏老师的精彩端午节制作！

梦江南

祝老师端午节安康！

起个网名好难

                               
登录/注册后可看大图

马黑黑

起个网名好难 发表于 2024-6-10 19:53

马黑黑

梦江南 发表于 2024-6-10 19:35
祝老师端午节安康！

谢谢

红影

黑黑把刚讲解的播放器用到实例里了呢，这个还加了歌词，还能添加多个视频呢。
这样一步步都写出来的方式也好，更容易看看学习呢

红影

马黑黑 发表于 2024-6-10 15:36
本帖lrc歌词数组，数组元素的第三个子元素，例如 [2,"余静 - 五月初五端午节", 4] 的红色部分，可以不管它 ...

是的，这个不是同步的，后面的那部分的确不起作用。做好的歌词可以不用去微调了

马黑黑

红影 发表于 2024-6-10 20:51
是的，这个不是同步的，后面的那部分的确不起作用。做好的歌词可以不用去微调了

歌词还是同步的，没有逐字模拟同步功能。