Скачать или смотреть Build an Offline Music Player in JavaScript | Save Playlist & Recent Songs (HTML + CSS)

In this video, you’ll learn how to build a fully functional Music Player App from scratch using HTML, CSS, and Vanilla JavaScript.This app can load songs directly from your local folder, and includes advanced features like playlists, favorites, and recently played tracks — all saved using Local Storage.

🎧 What You’ll Learn:
Build a beautiful and responsive Music Player UI using HTML & CSS
Load music files directly from a folder (no backend required)
Add controls: Play, Pause, Next, Previous, and Seek bar
Save playlists, favorite songs, and recently played using Local Storage
Design a clean, mobile-friendly interface with smooth animations

:root {
--background: #111827; /* Gray 900 */
--sidebar: #1f2937; /* Gray 800 */
--player: rgba(17, 24, 39, 0.7); /* Gray 900 with transparency */
--accent: #14b8a6; /* Teal 500 */
--accent-hover: #0d9488; /* Teal 600 */
--text-primary: #f9fafb; /* Gray 50 */
--text-secondary: #9ca3af; /* Gray 400 */
--favorite: #facc15; /* Yellow 400 */
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Inter', sans-serif;
background-color: var(--background);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.animated-background {
background: linear-gradient(-45deg, #111827, #374151, #1e3a8a, #111827);
background-size: 400% 400%;
animation: gradient 30s ease infinite;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}

.player-button:hover {
transform: scale(1.1);
color: white;
}

.player-button:active {
transform: scale(0.95);
}

.song-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}

.song-item.playing {
background-color: rgba(20, 184, 166, 0.2);
border-left: 3px solid var(--accent);
}

#progressBar::-webkit-slider-thumb,
#volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: var(--text-primary);
border-radius: 50%;
cursor: pointer;
transition: background 0.2s;
}

#progressBar::-webkit-slider-thumb {
margin-top: -6px;
}

#volume-slider::-webkit-slider-thumb {
margin-left: -6px;
}

#progressBar:hover::-webkit-slider-thumb,
#volume-slider:hover::-webkit-slider-thumb {
background: var(--accent);
}

.spinner {
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
width: 16px;
height: 16px;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

#sidebar {
transition: transform 0.3s ease-in-out;
}

#sidebar.translate-x-full {
transform: translateX(100%);
}

@media (min-width: 768px) {
#sidebar.translate-x-full {
transform: translateX(0);
}
}

#toast {
transition: opacity 0.3s, transform 0.3s;
}

.album-art-placeholder {
background-color: #374151;
}

.volume-control-container:hover #volume-slider-wrapper {
display: flex;
}

🚀 Key Features:
✅ Load songs directly from your device
✅ Create & manage playlists
✅ Mark favorites and view recently played songs
✅ Auto-save data using Local Storage
✅ Works fully offline


🧠 Tech Stack:
Frontend: HTML, CSS, JavaScript
Storage: Local Storage API


Code & DemoSource code / demo: https://project-sell-ten.vercel.app

Docs on File System Access API: https://developer.mozilla.org/en-US/d...

Full project files : https://github.com/Fullstack-Vaishnavi

Useful links & resources

TailwindCSS — https://tailwindcss.com

Github Developer Pack 2 lakh of free tools
   • Github Student Developer Pack  


Useful Links & ResourcesHTML — https://developer.mozilla.org/en-US/d...
CSS — https://developer.mozilla.org/en-US/d...
JavaScript — https://developer.mozilla.org/en-US/d...


💡 If you found this helpful — please LIKE 👍, SUBSCRIBE 🔔, and comment on what feature you’d like next (e.g., page navigation, bookmarks, dark mode).


📌 Hashtags
#MusicPlayerApp #JavaScript #HTML #CSS #WebDevelopment #Frontend #MusicApp