Marias- Music Player

Ship 1!! I added all the tracks to the album, CINEMA, yay. I wanted the playlist to fit the theme of the album itself, so I made a few Google searches for what CSS hex codes would match up well. After my brief research, this is the result. I also added backgrounds to both of the music players because the black background felt too empty. The styling definitely leveled it up. I updated the music player coloring for the Submarine music player because it felt too basic compared to CINEMA. In my second ship, I plan to add The Marías’ third studio album, so stay tuned! 👀

Update: I added the CINEMA music player ^_^. I absolutely love the linear color gradient I have going on on this music player. I’m thinking about changing the font to a more retro one tbh. All I have to do next is add the music to this file, and I’ll be done! Problem I don’t know how to post a full image of the music player, which is why I have to take two screenshots.

Update Lovely CSS style revamp to the home page of my music player! I customized each album’s background to fit the album’s theme :). I also made the actual music player icon spin. I’m not sure what the deal is with videos on Stardance; I can never see uploaded videos on the website. Hopefully, everyone viewing this devlog can interact with the video to see my update in action!

I thought of a way to make this project bigger than previously anticipated. Originally, I wanted to make a music player for only the album, Submarine, but I felt unfulfilled when I completed the player. By adding a homepage, I can add as many albums as I like, while sustaining the original music player idea. Update I added a homepage to my music player. It features the freshman and sophomore studio albums from The Marías. I want to add a feature to play a sample of each song, and the album covers redirect a user to the corresponding music player.

Small Update After adding all the songs from the album, Submarine, to the playlist, I got the idea to add floating lyrics of each song adjacent to the music player. I felt that the player by itself was too static on the screen. The lyrics will provide some life to the website! I am currently playing around with the style of the lyrics; I’m thinking about changing the lyric font, but I’m not 100% sure yet. This project has been so fun to code after a long day.

Update - A LOT has happened since the last devlog, which was about 2 days ago. I have implemented a sidebar with a playlist so the user can select any song from the album, Submarine. The user can either click the 3 lines to see this menu or scroll to the right and choose a song of their choice from there. I have added the audio from the songs Ride, Hamptons, Echo, Run Your Mouth, Real Life, and Blur. Future Plans - I want to add their first studio album, CINEMA, to this website. I’m thinking that the back arrow on the top left of the box will redirect the user to a homepage. This homepage will display both playlists, and the user will be able to select either Submarine or CINEMA. If you all have any suggestions, let me know! This journey has been fun so far. Issues I have been having internet troubles, so staying consistent has been hard these past 2 days.

Updated and Polished music player I made the player muchhh bigger and added a box shadow lighter than the linear gradient background colors. I added a play, pause, and progress bar beneath the song title and credits text. Bug - When I click the player button to pause the song, the icon doesn’t switch to the pause icon. Future plans- I want to add the complete Submarine album by The Marías to the music player. I’m not sure how to do that, as I had to follow a JavaScript tutorial to get this far. Since that is my goal, I’ll figure it out by the next devlog.

I remembered the first music project I did as a tribute to the group, “The Marías”. It was super simple and only played the instrumental of the song “Paranoia”. In this project, I want to play a complete album. So far, I have created the foundation of the music player! It will be cleaned up in the next devlog.