9 ms·

React Modern Audio Player

66 points by musgravite 4y ago

musgravite 4y ago
A new react audio player has been published it focuses on simple use and customizable UI check out this repo
- speajus 4y 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 4y ago
    thanks to your good feedback!
- greenhearth 4y ago
  Looks awesome. Great job!
  - musgravite 4y ago
    thanks!
lioeters 4y ago
Code: https://github.com/slash9494/react-modern-audio-player https://github.com/slash9494/react-modern-audio-player Demo: https://codesandbox.io/s/basic-91y82y?file=/src/App.tsx 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!
- graftak 4y ago
  A button in the top right (two overlapping rectangles) opens the view in a new tab.
- musgravite 4y 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
neon_electro 4y 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 4y 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
pier25 4y ago
What's the total size including waveform.js?
- lioeters 4y 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 4y ago
    oof
    - lioeters 4y ago
      Total of 316 K minified JS & CSS. Kinda heavy.
      - nawgz 4y 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 4y 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.
        nawgz 4y ago
        Am I missing something or are you joking? Its an audio player
        pier25 4y ago
franciscop 4y 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 4y 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 https://github.com/milesegan/minimoon
  - franciscop 4y 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 https://imgur.com/OWL56Hw Artist view (new): https://imgur.com/HSdwUqw https://imgur.com/HSdwUqw Prev version: https://imgur.com/x0m01DF 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.*
svnpenn 4y ago
Alternative, no deps: https://developer.mozilla.org/docs/Web/HTML/Element/audio https://developer.mozilla.org/docs/Web/HTML/Element/audio
albertzeyer 4y ago
That looks good. One thing I found difficult when implementing my own music player (https://github.com/albertz/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).

66 points by musgravite 4y ago

musgravite 4y ago

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

speajus 4y 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 4y ago
  thanks to your good feedback!
greenhearth 4y ago
Looks awesome. Great job!
- musgravite 4y ago
  thanks!

lioeters 4y ago

Code: https://github.com/slash9494/react-modern-audio-player https://github.com/slash9494/react-modern-audio-player Demo: https://codesandbox.io/s/basic-91y82y?file=/src/App.tsx 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!

graftak 4y ago
A button in the top right (two overlapping rectangles) opens the view in a new tab.
musgravite 4y 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

neon_electro 4y 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 4y 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

pier25 4y ago

What's the total size including waveform.js?

lioeters 4y 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 4y ago
  oof
  - lioeters 4y ago
    Total of 316 K minified JS & CSS. Kinda heavy.
    - nawgz 4y 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 4y 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.
        nawgz 4y ago
        Am I missing something or are you joking? Its an audio player
        pier25 4y ago

franciscop 4y 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 4y 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 https://github.com/milesegan/minimoon
- franciscop 4y 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 https://imgur.com/OWL56Hw Artist view (new): https://imgur.com/HSdwUqw https://imgur.com/HSdwUqw Prev version: https://imgur.com/x0m01DF 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.*

svnpenn 4y ago

Alternative, no deps: https://developer.mozilla.org/docs/Web/HTML/Element/audio https://developer.mozilla.org/docs/Web/HTML/Element/audio

albertzeyer 4y ago

That looks good. One thing I found difficult when implementing my own music player (https://github.com/albertz/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).