xl__qd 2023-11-27 20:15 采纳率: 100%
浏览 9
已结题

纯js实现酷狗歌曲同步歌词

想用纯js实现 酷狗歌曲 同步 歌词的效果，但想了一下，如果都只是每一句话才有时间间隔，那么单句话之间的快慢如何实现同步呢，网上的实现也没找到这种，都是单句匀速和单句整体变色。

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-11-28 10:00
    关注

    【以下回答由 GPT 生成】

    如何使用纯JS实现酷狗歌曲同步歌词效果？

    首先，要实现酷狗歌曲的同步歌词效果，我们需要获取歌曲的歌词文本，并将其按照一定格式进行解析和处理。然后，我们需要根据歌曲的播放进度，将歌词显示在网页上并进行闪动效果。

    下面是一个实现此功能的示例代码：

    <!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <div id="lyrics-container"></div>

    <script>
        // 假设酷狗歌曲的歌词文本如下：
        const lyricsText = `[00:00.00] 歌词内容...
[00:05.00] 歌词内容...
[00:10.00] 歌词内容...
...
`;

        // 将歌词文本解析成时间和歌词内容的数组
        function parseLyrics(lyricsText) {
            const lines = lyricsText.split('\n');
            const lyrics = [];

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];
                const match = line.match(/^\[(\d{2}):(\d{2}\.\d{2})\](.*)$/);

                if (match) {
                    const minutes = parseInt(match[1]);
                    const seconds = parseFloat(match[2]);
                    const content = match[3];

                    const time = minutes * 60 + seconds;
                    lyrics.push({ time, content });
                }
            }

            return lyrics;
        }

        // 根据酷狗歌曲的播放进度显示歌词
        function displayLyrics(lyrics) {
            const lyricsContainer = document.getElementById('lyrics-container');
            let highlightedLyricIndex = -1;

            setInterval(() => {
                const currentTime = getSongCurrentTime(); // 获取当前播放时间，需自行实现获取当前播放时间的逻辑

                // 找到当前时间所对应的歌词行
                let currentLyricIndex = -1;
                for (let i = 0; i < lyrics.length; i++) {
                    if (lyrics[i].time > currentTime) {
                        break;
                    }
                    currentLyricIndex = i;
                }

                if (currentLyricIndex !== highlightedLyricIndex) {
                    // 更新歌词显示
                    lyricsContainer.innerHTML = '';
                    for (let i = 0; i < lyrics.length; i++) {
                        const lyricElement = document.createElement('div');
                        lyricElement.textContent = lyrics[i].content;

                        if (i === currentLyricIndex) {
                            lyricElement.className = 'highlight';
                        }

                        lyricsContainer.appendChild(lyricElement);
                    }

                    // 更新正在高亮显示的歌词行索引
                    highlightedLyricIndex = currentLyricIndex;
                }
            }, 100);
        }

        // 调用解析和显示歌词的函数
        const lyrics = parseLyrics(lyricsText);
        displayLyrics(lyrics);
    </script>
</body>
</html>

    上述代码中，首先定义了一个歌词文本（lyricsText）的示例，你需要将其替换为你要显示的酷狗歌曲的歌词文本。

    然后，我们使用 parseLyrics() 函数将歌词文本解析成时间和歌词内容的数组。该函数使用正则表达式匹配歌词行的时间和内容，并将其存储在一个对象中，并添加到 lyrics 数组中。

    接下来，我们使用 displayLyrics() 函数显示歌词。该函数会在一个定时器内不断获取当前播放时间，并通过比较当前时间与歌词的时间来确定当前应该显示哪一行歌词。在每次更新歌词显示时，我们会动态创建 <div> 元素来显示歌词，并使用 highlight 类名为当前歌词行添加高亮样式。

    最后，我们调用 parseLyrics() 和 displayLyrics() 函数来进行初始化。

    请注意，以上代码仅供参考，具体实现可能需要根据你的实际需求进行修改和扩展。另外，获取当前播放时间的逻辑需要自行实现，具体方法根据你使用的音频播放器而定。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 6月26日
  • 已采纳回答 6月26日
  • 修改了问题 11月28日
  • 创建了问题 11月27日

悬赏问题

  • ¥20 python忆阻器数字识别
  • ¥15 无法输出helloworld
  • ¥15 高通uboot 打印ubi init err 22
  • ¥20 PDF元数据中的XMP媒体管理属性
  • ¥15 R语言中lasso回归报错
  • ¥15 网站突然不能访问了，上午还好好的
  • ¥15 有没有dl可以帮弄”我去图书馆”秒选道具和积分
  • ¥15 semrush,SEO,内嵌网站，api
  • ¥15 Stata:为什么reghdfe后的因变量没有被发现识别啊
  • ¥15 振荡电路，ADS仿真