json格式歌词实现同步滚动
时间: 2023-06-29 15:18:15 浏览: 55
要实现同步滚动,可以按照以下步骤进行:
1. 把歌词以json格式解析出来,形如:
```
[
{
"time": "00:00.00",
"text": "歌词第一行"
},
{
"time": "00:05.00",
"text": "歌词第二行"
},
...
]
```
2. 在页面中显示歌词,可以用一个`<div>`元素来容纳所有的歌词,每一行歌词用一个`<p>`元素来表示。例如:
```
<div class="lyrics">
<p>歌词第一行</p>
<p>歌词第二行</p>
...
</div>
```
3. 用JavaScript监听音乐播放进度,比如每秒钟检查一次当前的播放时间,然后找到对应的歌词行并高亮显示。可以用一个`highlight`类来实现高亮效果,例如:
```
.highlight {
color: red;
}
```
4. 在每个歌词行中加入一个`data-time`属性,记录该行歌词对应的时间。例如:
```
<div class="lyrics">
<p data-time="00:00.00">歌词第一行</p>
<p data-time="00:05.00">歌词第二行</p>
...
</div>
```
5. 在JavaScript中找到当前播放时间对应的歌词行,并添加`highlight`类。例如:
```
function highlightLyrics(currentTime) {
let lyrics = document.querySelectorAll('.lyrics p');
for (let i = 0; i < lyrics.length; i++) {
let time = lyrics[i].getAttribute('data-time');
if (time <= currentTime && (i == lyrics.length - 1 || lyrics[i + 1].getAttribute('data-time') > currentTime)) {
lyrics.forEach((lyric) => {
lyric.classList.remove('highlight');
});
lyrics[i].classList.add('highlight');
break;
}
}
}
```
这样就可以实现同步滚动了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)