React Modern Audio Player
npmjs.com
npmjs.com
Demo: https://codesandbox.io/s/basic-91y82y?file=/src/App.tsx
---
Looking good!
For the demo, I don't know if there's a way to change the layout of CodeSandbox, but the preview panel currently is too naroow. The player overflows without horizontal scroll bar, making player elements invisible and impossible to click.
Anyway, I'm looking forward to playing with this library. I've been searching for a good React audio player with playlist support. The wave form view is cool too!
I'm working on a desktop music player too, but using Electron right now because I'm using the browser to play the audio and Chromium supports more formats.
I might semi-open-source it at some point (code-readable and compile your own, or pay $4-10 for the binary) but here is the direction I'm taking so far:
General view (new): https://imgur.com/OWL56Hw
Artist view (new): https://imgur.com/HSdwUqw
Prev version: https://imgur.com/x0m01DF
The two major things I have left (which I had in my previous player) are the "randomize/linear", add lyrics, and hopefully fix the limitations.
*limitations (I've found so far, and because I don't know Rust): trickier to read file metadata (so I've made the new one organize around files/folder names), trickier to put in the tray, and I believe impossible to make the player the default program.*
One thing I found difficult when implementing my own music player (https://github.com/albertz/music-player) is to get the playlist right, powerful and efficient, esp when it contains many elements (thousands, maybe millions, or infinite).
mkdir tmp && cd tmp
npm init -y && npm install react-modern-audio-player wavesurfer.js
ls node_modules/react-modern-audio-player/dist
138K index.cjs
106K index.css
ls node_modules/wavesurfer.js/dist
72K wavesurfer.min.js
cd .. && rm -rf tmpAnd that is on top of the rest of the page.