@xm1769315774/music-player v1.0.0-beta.1

music-player

一个美观且功能强大的React音乐播放器组件，支持歌词显示、播放列表、进度条控制等功能。

特性

• 🎵 支持多种播放模式（顺序播放、随机播放、单曲循环）
• 📝 支持歌词显示和同步
• 📱 响应式设计，支持移动端
• 🎨 可自定义主题颜色
• 📋 支持播放列表管理
• 🔊 音量控制
• ⌨️ 键盘快捷键支持

安装

npm install music-player
# 或者
yarn add music-player
# 或者
pnpm add music-player

使用示例

import { MusicPlayer } from 'music-player';

const App = () => {
  const playlist = [
    {
      name: '歌曲名称',
      artist: '歌手名称',
      url: '音频文件地址.mp3',
      cover: '封面图片地址.jpg',
      lrc: '[00:00.00]歌词时间轴格式',
      theme: '#ebd0c2' // 可选的主题色
    }
    // 更多歌曲...
  ];

  return (
    <MusicPlayer
      audio={playlist}
      autoplay={false}
      loop="all"
      order="list"
      preload="auto"
      theme="#ebd0c2"
      mini={false}
      fixed={false}
      listFolded={false}
      listMaxHeight="24rem"
    />
  );
};

export default App;

组件属性

播放列表数据格式

interface AudioItem {
  name: string;      // 歌曲名称
  artist: string;    // 歌手名称
  url: string;       // 音频文件地址
  cover: string;     // 封面图片地址
  lrc?: string;      // 歌词（可选）
  theme?: string;    // 主题色（可选）
}

歌词格式

支持标准的 LRC 歌词格式：

[00:00.00]歌词第一行
[00:04.01]歌词第二行
[00:08.02]歌词第三行
// ...

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})