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!
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.
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.
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.
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:
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).
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!
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
A button in the top right (two overlapping rectangles) opens the view in a new tab.
A new react audio player has been published it focuses on simple use and customizable UI check out this repo
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.
thanks to your good feedback!
Looks awesome. Great job!
thanks!
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.
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
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.
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
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.*
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).
Alternative, no deps:
https://developer.mozilla.org/docs/Web/HTML/Element/audio
What's the total size including waveform.js?
oof
Total of 316 K minified JS & CSS. Kinda heavy.
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
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.
Am I missing something or are you joking? Its an audio player
So? Do you always use all audio players on all websites you visit?
Yeah it's a lot...
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.