DEV Community

Cover image for How I Built a Music Player to Showcase my own Tracks 🎡😍

How I Built a Music Player to Showcase my own Tracks 🎡😍

Madza on May 15, 2022

A while ago I built my portfolio and I wrote a custom audio player to showcase my tracks. Since then quite a few people have been interested in its...
Collapse
 
greggcbs profile image
GreggHume •

You should fork this and make a page where anyone can upload their music - no accounts, nothing like that and all music uploaded is downloadable by the public.

Would be nice to have an open area where music can be shared and downloaded.

Collapse
 
marissab profile image
Marissa B •

Isn't that what Napster tried to do and got slammed for it because people were uploading copyrighted tracks?

Collapse
 
dumboprogrammer profile image
Tawhid •

Napster lacked good moderation

Collapse
 
greggcbs profile image
GreggHume •

why cant everyone just stick to the script and be responsible :( that is a valid point.

Collapse
 
madza profile image
Madza •

That's another aspect that must be taken into consideration πŸ˜‰πŸ’―

Collapse
 
madza profile image
Madza •

Thanks for the idea, might consider it πŸ‘πŸ˜‰
Currently there is npm package, where users can create self hosted solutions for it πŸ˜‰

Collapse
 
michaeltharrington profile image
Michael Tharrington •

This is just so freaking cool!

Also, your beats are dope. The bass on "Persistence" is really doing it for me.

Thanks for sharing!!

Collapse
 
madza profile image
Madza •

Thank you so much for taking a listen β€οΈπŸ’―πŸŽ΅

Collapse
 
crinklywrappr profile image
Daniel Fitzpatrick •

This post breaks my browser lol.

Collapse
 
madza profile image
Madza •

Haha, this made my day βœ¨πŸ˜‰

Collapse
 
alesbe profile image
alesbe •

Awesome post! I really liked the wireframe structure, made it so clear to understand!
One question, it was difficult to manage all the states storing everything in the parent component? Did you thought about trying Redux? Thanks!

Collapse
 
madza profile image
Madza •

The default useState hooks were more than enough for this project πŸ‘βœ¨
Imho, redux or other external libs would be overkill πŸ˜‰

Thank you for the kind words, means a lot πŸ’―πŸ‘

Collapse
 
mtwn105 profile image
Amit Wani •

This is so detailed. Amazing!

Collapse
 
madza profile image
Madza •

Thank you so much πŸ‘πŸ˜‰
Glad to hear you liked it ✨πŸ₯³

Collapse
 
mtwn105 profile image
Amit Wani •

I hope you win the hackathon! πŸ’–

Thread Thread
 
madza profile image
Madza •

There are so many much more talented writers than me! πŸ˜‰
My biggest win is to be in the same pool of the entries with them πŸš€πŸŽ‰

Collapse
 
snelson1 profile image
Sophia Nelson •

nice stuff

Collapse
 
madza profile image
Madza •

Thank you so much πŸ˜‰πŸ‘

Collapse
 
masonharper profile image
Mason Marper •

Nice post

Collapse
 
madza profile image
Madza •

Glad you liked it πŸ‘βœ¨

Collapse
 
ambriel profile image
Ambriel Goshi •

thank you

Collapse
 
madza profile image
Madza •

My pleasure πŸ‘βœ¨

Collapse
 
brunoj profile image
Bruno •

nice stuff

Collapse
 
madza profile image
Madza •

Thanks a lot πŸ‘πŸ’―

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Cool guide.

Collapse
 
madza profile image
Madza •

Thank you so much, Andrew πŸ‘πŸ’―

Collapse
 
zirkelc profile image
Chris Cook •

Really a great post! πŸ‘πŸ»

Collapse
 
madza profile image
Madza • • Edited

Means the world, thank you πŸ˜πŸ’―πŸ‘

Collapse
 
spaboi profile image
SPABOI •

I love the color theme. It’s a cool project. Keep up the good work!

Collapse
 
madza profile image
Madza •

Thank you so much! πŸ’―πŸ‘

Collapse
 
zzz6519003 profile image
Snowmanzzz(Zhengzhong Zhao) •

must need a lot of power to follow through out XD

Collapse
 
madza profile image
Madza •

Hahah, its not that complicated once you get going πŸ˜‰πŸ‘

Collapse
 
ooling profile image
Sam oo LΓ­ng •

Can't say anything much but that's awesome!
Thanks for sharing! πŸ™‚

Collapse
 
madza profile image
Madza •

Thanks for the support! πŸ‘βœ¨πŸ’―

Collapse
 
bobbyiliev profile image
Bobby •

Great post Madza! Well done as always!

Collapse
 
madza profile image
Madza •

Thank you so much, Bobby! πŸ‘βœ¨πŸ’―

Collapse
 
moose_said profile image
Mostafa Said •

Great work Madza! I really hope you win the writathon ❀

Collapse
 
madza profile image
Madza •

Thanks a lot, Mostafa! βœ¨πŸ‘
My inner win was to get this article done, hopefully other devs will find this useful πŸŽ‰πŸŽŠ

Collapse
 
exenestecnico profile image
Ernesto •

Loved the Crawling remix

Collapse
 
madza profile image
Madza • • Edited

Thanks for the listening πŸ’―β€οΈπŸ‘

Collapse
 
ikembakwem profile image
Ikechukwu Mbakwem •

This is kinda cool, well done (Y)

Collapse
 
madza profile image
Madza •

Thank you a lot! πŸ‘βœ¨πŸ’―

Collapse
 
androbro profile image
koen de vulder •

Thanks for sharing this! very clean and structured way of explaining. Kudos!

Collapse
 
madza profile image
Madza •

My pleasure πŸ’―β€ Thanks a lot πŸ‘πŸ˜‰

Collapse
 
madza profile image
Madza •

Thank you so much, Leonid βœ¨πŸ‘
Music projects has always taken special place in my heart πŸ˜πŸ’―

Collapse
 
tahsin52225 profile image
Tahsin Ahmed •

Nice one , Will surely try out myself - Thank you for sharing

Collapse
 
madza profile image
Madza •

Awesome to hear β€πŸ‘ Thanks a lot! πŸ’―πŸ˜‰

Collapse
 
foxonthe1 profile image
Fox Scarlett •

This is great. Well coded and well presented. Your portfolio looks excellent. Inspiring! Thanks!

Collapse
 
madza profile image
Madza •

Awesome to hear πŸ‘βœ¨

Collapse
 
ivis1 profile image
Ivan Isaac •

Very helpful.

Collapse
 
madza profile image
Madza •

Happy it helped πŸ‘βœ¨

Collapse
 
marcio199226 profile image
oskar •

Nice maybe I will use it as media player for my pwa app ytd.surge.sh for peoples who wants share their tracks through my app github.com/marcio199226/ytd/tree/v...

Collapse
 
madza profile image
Madza •

Thanks for reading πŸ‘βœ¨πŸ’―

Collapse
 
appdesign profile image
App Design •

amazing job!

Collapse
 
madza profile image
Madza •

Thanks a lot πŸ‘πŸ’―

Collapse
 
caominhdev profile image
Cao Quα»‘c Minh •

Nice

Collapse
 
madza profile image
Madza •

Thanks a lot πŸ‘βœ¨πŸ’―