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

Lancement de react-modern-audio-player v2.0.0 – Plus léger, Ondes sonores et véritablement personnalisable

https://ift.tt/nBTRY2Z

slash9494
/
react-modern-audio-player

🔊 Lecteur audio simple, accessible et flexible

React Modern Audio Player

DEMO

https://codesandbox.io/p/sandbox/basic-nfrpfq

InterfaceFlexible et personnalisable

Progression par waveform avec `wavesurfer.js`

Disposition et placement personnalisables — avec thèmes clair & sombre

Vue complète

Changement de position

Vue particuliere

Installation

npm install --save react-modern-audio-player

Exigences

React 18.0.0 ou supérieur
react-dom 18.0.0 ou supérieur

Pour les projets React 16/17, utilisez la version v1.x de cette bibliothèque.

Démarrage rapide

import AudioPlayer from "react-modern-audio-player";

const playList = [
  {
    name: "name",
    writer: "writer",
    img: "image.jpg",
    src: "audio.mp3",
    id: 1,
  },
];
function Player() {
  return <AudioPlayer playList={playList} />;
}

Next.js / Server Components

Cette bibliothèque inclut la directive 'use client' et peut être importée directement dans Next.js App Router.

Composant serveur — rendre <AudioPlayer> avec des props statiques (pas de hooks, pas de composants composites) :

// app/page.tsx — Composant serveur,

…

Voir sur GitHub

Salut la communauté Dev ! 👋

Je suis ravi d’annoncer la sortie v2.0.0 de react-modern-audio-player.
Cette sortie intervient trois ans après la version initiale.

Après avoir écouté les retours des utilisateurs et des membres de la communauté, j’ai passé les derniers mois à refactorer la bibliothèque pour la rendre plus efficace et conviviale pour les développeurs.

🔗 Liens rapides

GitHub : https://github.com/slash9494/react-modern-audio-player
Démonstration Live : [https://codesandbox.io/p/sandbox/basic-nfrpfq]
NPM : npm install react-modern-audio-player

🚀 Pourquoi v2.0.0 ?

La plupart des lecteurs audio React sont soit trop rigides soit disposent d’API confuses qui rendent le style compliqué. J’ai créé cette bibliothèque pour résoudre un problème précis : fournir un lecteur audio moderne qui reste discret et vous permet de le personnaliser de manière intuitive.

Dans cette mise à jour majeure, je me suis concentré sur trois piliers principaux :

1. ⚡ Optimisation extrême (Taille du bundle)

J’ai audité chaque dépendance et refactoré la logique centrale.

Résultat : la taille du bundle a été considérablement réduite, en faisant l’un des lecteurs audio les plus légers et riches en fonctionnalités disponibles pour React aujourd’hui.
Vos utilisateurs bénéficient d’une expérience plus rapide, et vous obtenez un arbre de dépendances plus propre.

2. 🛠 Personnalisation intuitive

Arrêtez de vous battre avec les surcharges CSS.

La v2.0.0 introduit une structure d’API plus transparente et logique.
Que vous souhaitiez changer la disposition ou appliquer un thème personnalisé, les props et la gestion d’état sont conçus pour être prévisibles et faciles à suivre.

3. 🐛 Stabilité & retour de la communauté

J’ai nettoyé une longue liste de problèmes accumulés.

Correction de divers cas limites de lecture.
Amélioration de l’accessibilité et du support clavier.
Stabilité globale améliorée sur différents navigateurs.

📦 Comment démarrer ?

Pour démarrer, c’est aussi simple que :

npm install react-modern-audio-player

import { AudioPlayer } from 'react-modern-audio-player';

const playList = [/* vos morceaux */];

const App = () => (
  <AudioPlayer playList={playList} />
);