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
 
greggcbs profile image
GreggHume

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

Collapse
 
dumboprogrammer profile image
Tawhid

Napster lacked good moderation

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
 
mdelong42 profile image
Matt DeLong

Sounds like this has been done before and illegal

Collapse
 
roman_22c01bcfb71 profile image
Roman

If you want to find this project just go to madza.dev/music

Collapse
 
madza profile image
Madza

Thanks for checking it out! βœ¨πŸ’―

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
 
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
 
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
 
ambriel profile image
Ambriel Goshi

thank you

Collapse
 
madza profile image
Madza

My pleasure πŸ‘βœ¨

Collapse
 
zirkelc profile image
Chris Cook

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

Collapse
 
madza profile image
Madza • Edited

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

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
 
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
 
andrewbaisden profile image
Andrew Baisden

Cool guide.

Collapse
 
madza profile image
Madza

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

Collapse
 
exenestecnico profile image
Ernesto

Loved the Crawling remix

Collapse
 
madza profile image
Madza • Edited

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

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
 
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
 
ikembakwem profile image
Ikechukwu Mbakwem

This is kinda cool, well done (Y)

Collapse
 
madza profile image
Madza

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

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
 
brunoj profile image
Bruno

nice stuff

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘πŸ’―

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
 
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
 
madza profile image
Madza

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

Collapse
 
appdesign profile image
App Design

amazing job!

Collapse
 
madza profile image
Madza

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
 
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
 
ivis1 profile image
Ivan Isaac

Very helpful.

Collapse
 
madza profile image
Madza

Happy it helped πŸ‘βœ¨

Collapse
 
caominhdev profile image
Cao Quα»‘c Minh

Nice

Collapse
 
madza profile image
Madza

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