React/NextJS 音频播放器

演示：https://audioplayer.madza.dev

要求

需要 Node.js 18.x / 20+ 版本。

已在 React 18.2.0 和 NextJS 14.1.0 上测试通过。

安装

 npm install @madzadev/audio-player

使用方法

import Player from "@madzadev/audio-player";
import "@madzadev/audio-player/dist/index.css";

const tracks = [
  {
    url: "https://audioplayer.madza.dev/Madza-Chords_of_Life.mp3",
    title: "Madza - Chords of Life",
    tags: ["house"],
  },
  {
    url: "https://audioplayer.madza.dev/Madza-Late_Night_Drive.mp3",
    title: "Madza - Late Night Drive",
    tags: ["dnb"],
  },
  {
    url: "https://audioplayer.madza.dev/Madza-Persistence.mp3",
    title: "Madza - Persistence",
    tags: ["dubstep"],
  },
];

<Player trackList={tracks} />

唯一必需的属性是 trackList，用于音频源。

它需要传入一个由包含 url、title 和 tags 键的对象组成的数组。

选项

你可以使用多个可选属性来配置播放器。

以下是它们的默认值。

<Player
  trackList={tracks}
  includeTags={true}
  includeSearch={true}
  showPlaylist={true}
  sortTracks={true}
  autoPlayNextTrack={true}
/>

颜色方案

你可以通过编辑以下 colors 对象来自定义播放器的设计。

仅包含你想要自定义的属性。

const colors = {
  tagsBackground: "#3e32e4",
  tagsText: "#ffffff",
  tagsBackgroundHoverActive: "#6e65f1",
  tagsTextHoverActive: "#ffffff",
  searchBackground: "#18191f",
  searchText: "#ffffff",
  searchPlaceHolder: "#575a77",
  playerBackground: "#18191f",
  titleColor: "#ffffff",
  timeColor: "#ffffff",
  progressSlider: "#3e32e4",
  progressUsed: "#ffffff",
  progressLeft: "#151616",
  bufferLoaded: "#1f212b",
  volumeSlider: "#3e32e4",
  volumeUsed: "#ffffff",
  volumeLeft: "#151616",
  playlistBackground: "#18191f",
  playlistText: "#575a77",
  playlistBackgroundHoverActive: "#18191f",
  playlistTextHoverActive: "#ffffff",
};

<Player trackList={tracks} customColorScheme={colors} />

最后说明

音频文件可以通过文件路径（例如，public/yourtrack.mp3）存储并访问在你的项目中，也可以使用外部主机并提供直接的源 URL（例如，https://website.com/yourtrack.mp3）。

本项目采用 MIT 许可证，所以请随意查看和贡献！