|
|

楼主 |
发表于 2024-6-17 18:13
|
显示全部楼层
帖子代码
- <style>
- #tz { margin: 30px 0 30px calc(50% - 561px); width: 960px; height: 600px; background: #eee; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; pointer-events: none; }
- #tz::before, #tz::after { content: ''; position: absolute; }
- #tz::before { content: attr(data-lrc); bottom: 0; width: 100%; height: 60px; background: repeating-linear-gradient(to right, red, green, blue, green, red) center/200px; -webkit-background-clip: text; color: transparent; font: normal 2em sans-serif; display: grid; place-items: center; }
- #tz::after { left: calc(50% - 70px); top: 10px; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; pointer-events: auto; }
- .vid { position: absolute; width: 960px; height: 540px; }
- .vid:nth-of-type(2) { right: 5px; top: 5px; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 60px black; cursor: pointer; pointer-events: auto; }
- </style>
- <div id="tz" data-lrc="HUACHAO PLAYER">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2164190769" autoplay loop></audio>
- <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6c5933022.mp4" autoplay loop muted disablePictureInPicture></video>
- <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec3ab75a31.mp4" autoplay loop muted disablePictureInPicture></video>
- </div>
- <script>
- var curkey = 0;
- var vids = document.querySelectorAll('.vid');
- aud.ontimeupdate = () => {
- if(curkey > lrcAr.length - 1) return;
- if(aud.currentTime >= lrcAr[curkey][0]) {
- tz.dataset.lrc = lrcAr[curkey][1];
- curkey ++;
- }
- };
- aud.onseeked = () => curkey = 0;
- tz.onclick = () => {
- aud.paused ? aud.play() : aud.pause();
- vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
- };
- vids[1].oncontextmenu = (e) => e.preventDefault();
- let lrcAr = [ [0.1,"Never give up this feeling"], [3.53,"Never give up on love"], [7.7,"You can give up on me"], [11.29,"But never give up our love"], [15.73,"In our bodies and in our bones"], [19.23,"We both sing in deeper tones"], [23.16,"Into the fire we both run to hide"], [29.87,"And you let the sun call my name"], [34.11,"And we dance in her flames"], [37.75,"So warm"], [39.52,"I feel love love love"], [43.27,"Do you feel love"], [46.23,"You got me burning"], [50.63,"But I can't stop"], [53.51,"It feels like I need it"], [65.45,"But I can't stop"], [68.71,"It feels like I need it"], [81.2,"Never give up this feeling"], [84.83,"Never give up on love"], [88.64,"You can give up on me"], [92.16,"But never give up on love"], [95.94,"Never give up this feeling"], [99.56,"Never give up on love"], [103.4,"You can give up on me"], [106.91,"But never give up on love"], [109.8,"Do you feel love?"], [112.68,"You got me burning"], [117.12,"But I can't stop"], [120.23,"It feels like I need it"], [125.4,"Never give up this feeling"], [129.27,"Never give up on love"], [132.01,"But I can't stop"], [134.99,"It feels like I need it"], [140.3,"I believe in bleeding for love"], [147.56,"I believe in bleeding for love"], [155.09,"Never give up this feeling"], [158.74,"Never give up on love"], [162.6,"You can give up on me"], [166.13,"But never give up on love"], [169.95,"You can give up on me"], [173.3,"Just never give up on love"] ];
- </script>
复制代码 【说明】本帖歌词同步显示的实现无JS插件依赖,就是没有逐字模拟同步;歌词数组有无第三个子数组元素不影响。
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
南无月
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|