Releasing react-modern-audio-player v2.0.0 – Lighter, Waveforms, and Truly Customizable

发布 react-modern-audio-player v2.0.0 – 更轻量、波形显示与真正在手的自定义能力
https://ift.tt/nBTRY2Z

GitHub
slash9494 / react-modern-audio-player
🔊 简单、可访问且灵活的音频播放器

React Modern Audio Player

许可证
版本
下载

DEMO
可自定义的 UI
波形显示进度，使用 wavesurfer.js
自定义布局与主题（亮色/暗色）

完整视图
位置变更
特定视图

安装
npm install –save react-modern-audio-player

需求
React 18.0.0 或更高版本
react-dom 18.0.0 或更高版本
对于 React 16/17 的项目，请使用此库的 v1.x 版本。

快速开始
import AudioPlayer from “react-modern-audio-player”;

const playList = [
{
name: “name”,
writer: “writer”,
img: “image.jpg”,
src: “audio.mp3”,
id: 1,
},
];

function Player() {
return ;
}

Next.js / 服务端组件
本库包含 ‘use client’ 指令，可以直接在 Next.js App Router 中导入使用。
服务端组件 — 使用静态属性渲染（无 Hooks、无复合组件）：

// app/page.tsx — 服务器组件

查看更多 GitHub
View on GitHub

Hi Dev Community! 👋
我很高兴地宣布react-modern-audio-player 的 v2.0.0 版本发布。
本版本在初始发布后已过去三年。

在聆听用户和社区成员的反馈后，我在过去几个月进行了重构，使库更高效且便于开发者使用。

快捷链接
GitHub: https://ift.tt/xbZc2oB
Live Demo: [https://codesandbox.io/p/sandbox/basic-nfrpfq]
NPM: npm install react-modern-audio-player

为何是 v2.0.0？
大多数 React 音频播放器要么过于刚性，要么 API 过于混乱，给样式化带来噩梦。我创建这个库，旨在解决一个具体问题：提供一个现代化的音频播放器，能够保持简单易用，又让你直观地进行自定义。

在这一重大更新中，聚焦三大支柱：
1. 极致优化（打包大小）
我对每个依赖项进行了审计并重构了核心逻辑。
结果：打包大小显著减小，成为目前为止可用于 React 的最轻量级但功能丰富的音频播放器之一。你的用户将获得更快的体验，你也将获得更清晰的依赖树。

2. 直观的自定义能力
停止与 CSS 覆盖作斗争。
v2.0.0 引入了更透明且合乎逻辑的 API 结构。
无论你想改变布局还是应用自定义主题，属性和状态管理都被设计成可预测且易于遵循。

3. 稳定性与社区反馈
清理了一长串积压的问题。
修复了多种播放边缘情况。
提升了可访问性和键盘支持。
在不同浏览器上的整体稳定性提升。

如何开始？
开始就像这样简单：
npm install react-modern-audio-player

代码演示
import { AudioPlayer } from ‘react-modern-audio-player’;

const playList = [
/* 你的曲目 */
];

const App = () => (

);

💬 我很愿意听取你的反馈！作为开源维护者，你的反馈是推动这个项目成长的动力。
你在音频播放器中期望有哪些功能？
你觉得自定义是否如我所设想的直觉易用？
请在 GitHub 上查看，如果觉得有用，给一个星星会很棒！

编码愉快！ 🎧

HI-FI News
via DEV Community: react https://dev.to/t/react

2026年4月11日 16:53（发布时间）

April 11, 2026 at 04:53PM

Login