Dropify is a web service for audio streaming your favorite tracks for your audio listening pleasure. It can also be a way discover new genres and songs that you have never heard before!

To access Dropify, kindly click here

Users can sign up, sign in, and log out seamlessly. Additionally a user can use a demo login to experience the site without having to sign up.

View a list of albums, songs, and artists curated by the creator

Lastly, a user can navigate to a specific show page for an artist or album they click on their corresponding lists. There are tons of links implemented across Dropify to enable the user to seamlessly navigate through the website.

One feature I implemented was an audio player that persisted across all my pages with continuous audio play

This incredible feature enables the user to seamlessly listen to their selected audio content without it being disrupted by user navigation. Considering I have so many routes to all my specific view pages for a single artist and album, this was a very important feature to get dropify fully functional.

Additionally, the audio player itself dynamically updates the content of the song a user plays so they can see the album art, artist, and song info associated.

Furthermore, the user can play, pause, control the volume, loop, and rewind/fast forward by using the slider on the progress bar.

One tricky technical part of the player was to have the progress bar and the timer tick every second depending on the song's current time. I had to use multiple event listeners i.e "ontimeupdate" on the audio api in order to acheive this. Additionally, using a setTimer function to pass a callback to update the value of the progress bar with the song's current time was a major key to my success.