music player website

Ship #1

@shuaiyf on music player website · about 1 month ago

Web Music Player
A simple web music player made using HTML and CSS, able to play five pre-downloaded songs! Includes a home page where users can use a song to play by title or artist. Simple animations (spinning vinyl disc and scrolling text!) are featured in the music player page.

Challenges, etc.
First project in HTML! I had no experience prior to making this and so it was a little daunting and a little confusing, but it worked out pretty well in the end :) Followed a (tutorial)[https://youtu.be/JtrFzoL1joI?si=4XzKUBnZ152NrrPh] for the basics of a music player, then added the rest myself (including the home page). Consulted a LOT of https://www.html.am/ and https://www.w3schools.com/html/. Overall, I’m really happy with how the project turned out!

3 devlogs
10h
4.10x multiplier
41 Stardust

Try project → See source code →

Open comments for this post

@shuaiyf on music player website · about 1 month ago

1h 11m 9s logged

⋆˚꩜｡Devlog 3: Officially done with my first HTML project! Added comments and re-organised some of my code, added a README file, now waiting for site to deploy before shipping :)

Open comments for this post

@shuaiyf on music player website · about 1 month ago

6h 58m 30s logged

⋆˚꩜｡Devlog 2: Pretty much finished the project! Added a home page featuring five songs and redesigned the user interface for the actual music player; added animations such as the spinning disc and the moving text. Had a lot of fun working on this project! It was a great introduction to HTML for me. Next steps: cleaning up the code, organizing and adding comments, etc.!

Open comments for this post

@shuaiyf on music player website · about 2 months ago

1h 49m 18s logged

⋆˚꩜｡Devlog 1: Started to work on a web music player! This is my first time working with HTML and CSS seriously, excited to learn more and see how far I can take this project. Started with a basic tutorial that included the play button and the seek bar; next steps would definitely be to personalise it a lot more and add more features!