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 许可证,所以请随意查看和贡献!