音乐播放、歌词滚动

春秋半夏2025-07-11 14:27

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

在线预览：sa-blog.online/home

歌词获取

目前使用的工具：github.com/jitwxs/163M...

代码

gitee.com/yin-chunyan...

ai

typescript 复制代码

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/ 在该网站上生成个性的曲线