RepeatPlayer React

一个功能强大的React媒体播放器组件，支持AB重复播放、录音、歌词同步和高级播放控制。

功能特点

• 🎵 音频播放: 支持MP3等音频格式
• 🔁 AB重复播放: 设置A、B点进行片段重复播放
• 📝 歌词同步: 支持LRC格式歌词文件，实时同步显示
• 🎙️ 录音功能: 为AB片段录制音频进行对比学习
• ⚡ 变速播放: 0.5x - 3.0x 播放速度调节
• 📱 响应式设计: 使用Tailwind CSS，支持各种屏幕尺寸
• 🎯 智能滚动: 自动滚动到当前播放歌词行
• 🔧 高度可定制: 支持自定义样式和回调函数

安装

npm install repeat-player-react

基本用法

import React from 'react'
import { RepeatPlayer } from 'repeat-player-react'

function App() {
  const handleAudioFileChange = (file: File | null) => {
    console.log('音频文件:', file)
  }

  const handleLyricsFileChange = (file: File | null) => {
    console.log('歌词文件:', file)
  }

  return (
    <RepeatPlayer
      audioFile={audioFile}
      lyricsFile={lyricsFile}
      onAudioFileChange={handleAudioFileChange}
      onLyricsFileChange={handleLyricsFileChange}
    />
  )
}

API 文档

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | audioFile | File \| null | - | 音频文件 | | lyricsFile | File \| null | - | LRC歌词文件 | | txtContent | string \| null | - | 纯文本内容 | | onAudioFileChange | (file: File \| null) => void | - | 音频文件变化回调 | | onLyricsFileChange | (file: File \| null) => void | - | 歌词文件变化回调 | | onTxtContentChange | (content: string \| null) => void | - | 文本内容变化回调 | | defaultRate | number | 1.0 | 默认播放速度 | | minRate | number | 0.5 | 最小播放速度 | | maxRate | number | 3.0 | 最大播放速度 | | showVideo | boolean | true | 是否显示视频元素 | | abHistory | ABHistoryRecord[] | [] | AB播放历史记录 | | onABHistoryChange | (history: ABHistoryRecord[]) => void | - | AB历史变化回调 | | onTimeUpdate | (currentTime: number, duration: number) => void | - | 播放时间更新回调 | | onLineChange | (lineIndex: number, lineText: string) => void | - | 歌词行变化回调 | | onRepeatStart | () => void | - | 重复播放开始回调 | | onRepeatEnd | () => void | - | 重复播放结束回调 | | onPlay | () => void | - | 播放开始回调 | | onPause | () => void | - | 暂停回调 | | onStop | () => void | - | 停止回调 | | className | string | - | 自定义CSS类名 | | showFileUpload | boolean | true | 是否显示文件上传区域 | | autoPlay | boolean | false | 是否自动播放 |

类型定义

interface ABHistoryRecord {
  id: number
  name: string
  startTime: number
  endTime: number
  createdAt: Date
  recording?: string | null
}

interface PlayerState {
  isPlaying: boolean
  currentTime: number
  duration: number
  currentRate: number
  volume: number
  currentLineIndex: number
  isRepeating: boolean
  dotA: number
  dotB: number
  isASet: boolean
  isBSet: boolean
  // ... 更多状态
}

高级功能

AB重复播放

<RepeatPlayer
  abHistory={abHistory}
  onABHistoryChange={setAbHistory}
  onRepeatStart={() => console.log('开始重复播放')}
  onRepeatEnd={() => console.log('结束重复播放')}
/>

录音功能

组件会自动为每个AB历史记录提供录音功能：

• 点击录音按钮开始录音
• 录音时MP3播放会自动暂停
• 录音完成后可以播放对比

歌词同步

<RepeatPlayer
  lyricsFile={lrcFile}
  onLineChange={(index, text) => {
    console.log(`当前播放: ${index + 1} - ${text}`)
  }}
/>

样式定制

组件使用Tailwind CSS，你可以通过className属性添加自定义样式：

<RepeatPlayer
  className="my-custom-player"
  // 其他属性...
/>

许可证

MIT

贡献

欢迎提交Issue和Pull Request！

更新日志

v1.0.0

• 初始版本发布
• 支持音频播放和AB重复
• 支持LRC歌词同步
• 支持录音功能
• 支持变速播放
• 支持多种播放控制模式