react-lrcplayer v2.0.1

带LRC歌词的简易播放器

功能

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

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

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

用法

安装

npm i react-lrcplayer

引入

import { LRCPlayer,createLrcObj } from 'react-lrcplayer';

示例

在页面中：

<LRCPlayer
        src={require("./1/多多poi - 别让我担心.mp3")}
        cover={require("./1/cover.jpg")}
        title="多多poi - 别让我担心"
        subTitle="《原神》2023 周年庆单曲"
        lrc={require("./1/lrc.json")}
        offset={-0.3}
        placeholder="暂无歌词"
        animate={{
          type: "slide",
          duration: 8
        }}
        nextLrc={{
          display: true,
          number: 2
        }}
      />

API

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": "是故事的开局"
}]

animate

nextLrc

常见问题

React is not defined

dependency 默认会安装React，如果没有安装，请手动 npm i react，并 import React from 'react';