DEV Community

How to create a progressive audio player with React hooks

Nico Martin on April 26, 2020

I'm a huge fan of the web as an open platform to distribute software. That's why I'm always looking for new ideas to experiment with upcoming bro...
Collapse
 
woto profile image
Ruslan Kornev • Edited

Damn, I don't now why this project is not so popular. I like to going to sleep with some pop science talks. And this is the rescue to the the glowing phone screen in the dark + I believe it saves battery charge (not sure ๐Ÿ˜Š). Thank you!

Collapse
 
nicomartin profile image
Nico Martin

Well, its getting more and more attention๐Ÿ˜Š
https://twitter.com/nic_o_martin/status/1642625303200579586?t=VXnV8iQIuEyneDGM-kZp5A&s=19

I'm glad you like it!

Collapse
 
haosun95713629 profile image
Hao Sun

The lack of a volume button is a pretty big drawback.

Collapse
 
earvinpiamonte profile image
Noel Earvin Piamonte

Hi Nico, I would just like to ask how do you get the audio source of the YouTube videos? Thanks.

Collapse
 
nicomartin profile image
Nico Martin

Hi Noel,
I've created a little node-backend that uses npmjs.com/package/ytdl-core to extract the audio source.
My "backend" is open source as well: github.com/nico-martin/yt-audio-so...

Collapse
 
earvinpiamonte profile image
Noel Earvin Piamonte

All right. Thank you. I'll definitely check these.
Media Session API is so cool as well. Great posts!

Thread Thread
 
nicomartin profile image
Nico Martin

Thanks! Great to hear!

Collapse
 
adermanjr profile image
Aderman Jr.

Hi, great article!
Can run this project with mp3 files?

Collapse
 
nicomartin profile image
Nico Martin

Hi Aderman

Sure. Behind it you have a native HTML Audio Element. So it works with every format that is supported by your browser.

Collapse
 
adermanjr profile image
Aderman Jr.

Good!

And how i can pass a json list with mp3 and implement previous and next actions? And change automaticaly the next song when one finish?

Thread Thread
 
nicomartin profile image
Nico Martin

You could either load the file via an http request or you could import it at build time (I guess you're using Webpack?).
You would then need to write your own logic what should happen when the song finished. But you could use the onEndedcallback to change the audio file.

Thread Thread
 
adermanjr profile image
Aderman Jr.

Ok. Thank you, man!

Collapse
 
bubbleinpit profile image
Jipeng Li • Edited

Will the hook create duplicate Audio elements while the player component rerenders?

Collapse
 
ayoubkhan558 profile image
Muhammad Ayoub Khan

Not working anymore.