MUDIO π΅
δΈζ | English
MUDIO is a music website inspired by Spotify, aiming to provide users with a rich music experience. Users can enjoy classical music on various devices, search users' favorite song by keyword , and create personalized playlists through the membership system.
https://mudio-enjoy-music.web.app/
MUDIO requires login to create personalized playlists. The following is the test account and password.
Account | Password |
---|---|
user@user.com | user123 |
After entering the homepage, click on the play button to play the music stored in Firebase Storage.
playandpause.mp4
While playing music, the progress bar and current time changes in sync with the song's playback. You can also drag the progress bar to change the song's playback progress.
footer.mp4
While playing the default music which shows on homepage, you can click the previous button and next tracks button according to your preferences.
nextandprev.mp4
After clicking the random icon, the tracks will be played randomly.
randomfunction.mp4
After clicking the search option in the left-side menu, you can enter keywords in the search box to find tracks in albums. And you can simply click on the track to play it directly.
search.mp4
After clicking the "Create Playlist" option in the left-side menu, a form will pop up in the center of the screen. Fill in the required information and submit the form. The information and photo will be saved to Firebase's Firestore Database. Once the upload is successful, you can go to the "Your Music Library" option in the left-side menu to find the created playlists and view their detailed content.
addplaylist.mp4
In the desktop version, you can click the volume button in the bottom-right corner to adjust the volume level.
volume.mp4
By clicking the user profile picture in the top-right corner and selecting the "Profile" option, you can browse the data and profile picture that the user created during registration.
memberpage.mp4
Whether you click into an album or an artist section, you will find relevant information and tracks listed for users to reference and listen to.
albumandartist.mp4
The responsive page design ensures an optimal user experience for users on tablets and mobile devices as well.
RWD.mp4
π©βπ» Gema Luo
π§ gemaluowenjun@gmail.com