音乐播放、歌词滚动

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

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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui