MUDIO 🎵

中文 | English

Catalog

• Introduce
• DEMO
  • Test Account
• Stack
• Features
• Contact

Introduce

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.

DEMO

https://mudio-enjoy-music.web.app/

Test Account

MUDIO requires login to create personalized playlists. The following is the test account and password.

Account	Password
user@user.com	user123

Stack

Features

⏯️ Play / Pause

After entering the homepage, click on the play button to play the music stored in Firebase Storage.

playandpause.mp4

🎚️ Drag the progress bar

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

◀️▶️ Next/Prev

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

🔀 Random

After clicking the random icon, the tracks will be played randomly.

randomfunction.mp4

🔍 Search Function

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

➕ Personal Playlist

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

🔊 Volume control

In the desktop version, you can click the volume button in the bottom-right corner to adjust the volume level.

volume.mp4

👤 Member Page

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

📃 Album and Artist Page

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

📱 Responsive Web Design

The responsive page design ensures an optimal user experience for users on tablets and mobile devices as well.

RWD.mp4

Contact

👩‍💻 Gema Luo
📧 gemaluowenjun@gmail.com