react-lrcplayer

带LRC歌词的简易播放器

功能

• 标题副标题显示
• 封面展示
• 歌词动画
• 定义歌词行数
• 原生audio播放器
• lrc歌词同步显示（需提前转换为json）

本项目基于React开发，仅在React Vite环境测试通过。

体验：https://os.arsrna.cn/demo/nodejs/lrcplayer

DEMO

克隆本项目，并执行

npm i
npm start

打开localhost:5173即可测试demo

用法

安装

npm i react-lrcplayer

引入

import { LRCPlayer,createLrcObj } from 'react-lrcplayer';
// 全局引用样式
import 'react-lrcplayer/dist/index.css';

示例

在页面中（以example/App.tsx的vite环境为例）：

 <LRCPlayer
        src={src}
        cover={cover}
        title="希林娜依高,HOYO-MiX - 烬火 Emberfire"
        subTitle="《原神》动画短片「烬中歌」插曲"
        lrc={lrc}
        placeholder="无歌词"
        offset="-0.3"
        animate={{
          type: "slide",
          duration: 8,
        }}
        nextLrc={{
          display: true,
          number: 2
        }}
    />

API

参数	类型	内容	默认值	必填
src	file / string	音频文件URL地址	undefined	是
cover	file / string	封面图片文件URL	undefined	是
title	string / React DOM	播放器标题	""	否
subTitle	string / React DOM	副标题	""	否
lrc	object	lrc对象，内容见下文	undefined	是
offset	number	偏移量，正数为延后，负数为提前	0	否
animate	object	动画设置，内容见下文	{ type: "fade", duration: 0.5 }	否
nextLrc	object	下句歌词显示设置，内容见下文	{ display:false, number:5 }	否

lrc

此参数表示歌词对象，本框架已内置lrc转为对象的功能，如下LRC：

可以直接调用 createLrcObj(lrc歌词原内容)来实现转换

[00:26.446]天气晴 风平浪静 沙滩上混乱的脚印
[00:32.499]钓鱼竿 两份孤单 会飞的落汤鸡
[00:37.725]是故事的开局

转换为对象即为

[{
    "t": 26.446,
    "c": "天气晴 风平浪静 沙滩上混乱的脚印"
  },{
    "t": 32.499,
    "c": "钓鱼竿 两份孤单 会飞的落汤鸡"
  },{
    "t": 37.725,
    "c": "是故事的开局"
}]

参数	类型	内容
t	number	进入时间点
c	string	对应歌词内容

animate

参数	类型	内容	默认值	必填
type	string	动画类型（划入: slide，淡入: fade，无: none）	fade	否
duration	number	动画持续时间，单位秒	0.5	否

nextLrc

参数	类型	内容	默认值	必填
display	boolean	是否显示	true	否
number	number	显示句数	2	否