音乐播放、歌词滚动歌曲进度、歌名、歌词、切换歌曲在线预览：http://sa-blog.online/home 歌词获

歌曲进度、歌名、歌词、切换歌曲

歌词获取

代码

ai

import { useEffect, useState } from 'react'
import style from './player-lyrics.module.css';

type LyricLine = {
  time: number // 秒
  text: string
}

function parseLrc(lrc: string): LyricLine[] {
  return lrc
    .split('\n')
    .map((line) => {
      const match = line.match(/\[(\d+):(\d+\.\d+)](.*)/)
      if (!match) return null
      const [, min, sec, text] = match
      return {
        time: parseInt(min) * 60 + parseFloat(sec),
        text: text.trim(),
      }
    })
    .filter((item): item is LyricLine => !!item)
}

export const PlayerLyrics = ({ lyrics, audio }: { lyrics: string, audio: HTMLAudioElement | null }) => {
  const [lyricsList, setLyricsList] = useState<LyricLine[]>([])
  useEffect(() => {
    setLyricsList(parseLrc(lyrics))
  }, [lyrics])
  useEffect(() => {

  }, [audio])
  return <div>

  </div>
}
这是歌词播放组件，要求根据音乐播放滚动歌词

具体要求：
1、歌词高度21px 字体大小12px 字体颜色#fff
2、当前播放歌词正常，之后的歌词模糊并降低透明度
3、歌词切换要有切换歌词的效果不要那么生硬可以用flipInX等动画
4、一行歌词会很长，我设置的180px、如果太长就根据 播放音乐的当前歌词的进度去调整位置
5、歌词一次最多2条
6、你可以用motion/react
7、css单独给我，我会放到./player-lyrics.module.css中
8、style.className使用小驼峰命名
9、歌词与歌词间有时长，我希望歌词播放呢根据这个时长添加歌词进度改变歌词颜色类似于蒙版的感觉
10、歌词切换的时候判断一下，如果当前歌词和下一句歌词间距太短就不要添加过渡效果了；目前有一种乱飞的感觉
11、歌词间隔时间短就不需要动画，如果歌词太长根据进度调整歌词水平位置展示后面内容，同样的如果间隔太短不需要处理

css-transition cubic-bezier

easingwizard.com/ 在该网站上生成个性的曲线

补充

根据音乐播放的时间和歌词数据的时间匹配

歌词进度，这里没有那么细，歌词与歌词之间有时长间隔我就当前一句歌词，到下一句歌词的总时长，也就是这句歌词的播放总时长再根据音乐播放时间做这么个进度；

这样做就不会很精准的卡上文字，有些歌曲还有大的停顿和高音等等