React Modern Audio Player | HN Mirror

Y	Hacker News new \| ask \| show \| jobs

	React Modern Audio Player (npmjs.com)
	66 points by musgravite 1349 days ago

7 comments

lioeters 1349 days ago

Code: https://github.com/slash9494/react-modern-audio-player

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!

musgravite 1348 days ago

yeah, panel is a little bit narrow so you can fold left sidebar and code panel and I'm also going to develop responsive UI of mobile size

graftak 1348 days ago

A button in the top right (two overlapping rectangles) opens the view in a new tab.

musgravite 1349 days ago

A new react audio player has been published it focuses on simple use and customizable UI check out this repo

speajus 1349 days ago

That looks really cool. I've wanted to build a thing like that for a while, so glad I don't have to. Great job, nice doc, code looks well thought out.

musgravite 1348 days ago

thanks to your good feedback!

greenhearth 1349 days ago

Looks awesome. Great job!

musgravite 1348 days ago

thanks!

neon_electro 1349 days ago

CMD/CTRL+f'd "access(ibility)", appreciate you making that a priority for this library! Can you eventually document how it's accessible? Would love to see that in the future.

musgravite 1348 days ago

Each time deployed, I make an effort to update a document I think it is also very cool that someone update a document if I miss updating document

franciscop 1349 days ago

I am finishing on my free time a complete desktop music player using React+Tauri, and this looks amazing! It's just the piece I'm missing most/have lest developed, so I will definitely try it, and at the very least look inside to see the pieces.

cageface 1349 days ago

Have you published the code yet?

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.

https://github.com/milesegan/minimoon

franciscop 1348 days ago

No, but I want a more "minimal" one from what I'm seeing. I actually started with Electron and raw HTML+CSS+JS, but at some point I discovered Tauri+React and switched over and now I'm very happy programming there. It does have some major/minor limitations compared to Electron*, but also 10MB (which can apparently be reduced even further) vs 200MB and a pretty nice dev experience makes it worth it for me.

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.*

albertzeyer 1349 days ago

That looks good.

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).

svnpenn 1349 days ago

Alternative, no deps:

https://developer.mozilla.org/docs/Web/HTML/Element/audio

pier25 1349 days ago

What's the total size including waveform.js?

lioeters 1349 days ago

  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 tmp

pier25 1349 days ago

oof

lioeters 1349 days ago

Total of 316 K minified JS & CSS. Kinda heavy.

nawgz 1349 days ago

Isn’t an average mp3 for a 3min song close to 3MB? It seems to me that this type of tool already assumes you have some bandwidth available

pier25 1349 days ago

What if the user is on mobile and doesn't intend to play the audio?

And that is on top of the rest of the page.

pier25 1349 days ago

Yeah it's a lot...

lioeters 1348 days ago

It's true, even without the wave visualizer, it's 244Kb minified for an audio player. Apparently some people don't agree, but I think it's too much.