Brian Lovin
/
Hacker News

React Modern Audio Player

npmjs.com
Daily Digest email

Get the top HN stories in your inbox every day.

lioeters

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

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

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

musgravite

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

speajus

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

thanks to your good feedback!

greenhearth

Looks awesome. Great job!

musgravite

thanks!

neon_electro

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

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

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

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

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

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

pier25

What's the total size including waveform.js?

lioeters

  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

oof

lioeters

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

Daily Digest email

Get the top HN stories in your inbox every day.