Modern JavaScript Project : Audio player using css javascript example

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Media Interface</title>
    <style>
        :root {
            --bg-base: #09090b;
            --surface: rgba(24, 24, 27, 0.6);
            --surface-hover: rgba(39, 39, 42, 0.8);
            --border: rgba(255, 255, 255, 0.08);
            --text-primary: #fafafa;
            --text-secondary: #a1a1aa;
            --accent: #6366f1;
            --track-bg: rgba(255, 255, 255, 0.1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

body {
            background-color: var(--bg-base);
            color: var(--text-primary);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            padding: 2rem;
        }

.ambient-bg {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80vw;
            height: 80vh;
            border-radius: 50%;
            background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
            opacity: 0.15;
            filter: blur(80px);
            z-index: 0;
            transition: background 1s ease, transform 2s ease;
            pointer-events: none;
        }

.ambient-bg.pulse {
            transform: translate(-50%, -50%) scale(1.1);
            opacity: 0.25;
        }

.app-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 900px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            background: var(--surface);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border: 1px solid var(--border);
            border-radius: 32px;
            padding: 2.5rem;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

.player-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

.artwork-container {
            width: 240px;
            height: 240px;
            border-radius: 50%;
            padding: 8px;
            background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
            margin-bottom: 2rem;
            position: relative;
        }

.artwork {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #333, #111, #333, #111, #333);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
            transition: transform 0.5s ease;
        }

.artwork::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: repeating-radial-gradient(
                transparent,
                transparent 4px,
                rgba(0,0,0,0.1) 5px,
                rgba(0,0,0,0.1) 6px
            );
        }

.artwork-center {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--accent);
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 15px rgba(0,0,0,0.5);
            transition: background 0.5s ease;
        }

.artwork-hole {
            width: 16px;
            height: 16px;
            background: var(--bg-base);
            border-radius: 50%;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
        }

.spin {
            animation: spin 6s linear infinite;
        }

.paused {
            animation-play-state: paused;
        }

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

.track-info {
            margin-bottom: 2rem;
            width: 100%;
        }

.track-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            letter-spacing: -0.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.track-artist {
            color: var(--text-secondary);
            font-size: 1rem;
            font-weight: 500;
        }

.progress-container {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

.time {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
            width: 40px;
        }

.progress-bar {
            flex: 1;
            height: 6px;
            background: var(--track-bg);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

.progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--accent);
            width: 0%;
            border-radius: 3px;
            transition: background 0.5s ease;
        }

.controls {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

.control-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease;
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }

.control-btn:hover {
            color: var(--text-primary);
            background: var(--surface-hover);
            transform: scale(1.05);
        }

.control-btn:active {
            transform: scale(0.95);
        }

.play-btn {
            width: 64px;
            height: 64px;
            background: var(--text-primary);
            color: var(--bg-base);
        }

.play-btn:hover {
            background: #ffffff;
            color: var(--bg-base);
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(255,255,255,0.1);
        }

.playlist-section {
            display: flex;
            flex-direction: column;
            border-left: 1px solid var(--border);
            padding-left: 2rem;
        }

.playlist-header {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.playlist {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            overflow-y: auto;
            padding-right: 0.5rem;
            max-height: 400px;
        }

.playlist::-webkit-scrollbar {
            width: 4px;
        }

.playlist::-webkit-scrollbar-track {
            background: transparent;
        }

.playlist::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 4px;
        }

.playlist-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: transparent;
            border: 1px solid transparent;
        }

.playlist-item:hover {
            background: rgba(255, 255, 255, 0.03);
            transform: translateX(5px);
        }

.playlist-item.active {
            background: var(--surface-hover);
            border-color: var(--border);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

.item-index {
            width: 30px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
            display: flex;
            align-items: center;
        }

.item-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

.item-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-primary);
        }

.item-artist {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

.item-duration {
            font-size: 0.8rem;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }

.equalizer {
            display: none;
            align-items: flex-end;
            gap: 2px;
            height: 14px;
            width: 14px;
        }

.playlist-item.active .item-index span {
            display: none;
        }

.playlist-item.active .equalizer {
            display: flex;
        }

.eq-bar {
            width: 3px;
            background: var(--accent);
            border-radius: 1px;
            animation: equalize 1s ease-in-out infinite alternate;
            transition: background 0.5s ease;
        }

.eq-bar:nth-child(1) { height: 40%; animation-delay: 0.1s; }
        .eq-bar:nth-child(2) { height: 80%; animation-delay: 0.3s; }
        .eq-bar:nth-child(3) { height: 60%; animation-delay: 0.2s; }

@keyframes equalize {
            0% { height: 20%; }
            100% { height: 100%; }
        }

.equalizer.paused .eq-bar {
            animation-play-state: paused;
            height: 20%;
        }

svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

.play-icon { fill: currentColor; }

@media (max-width: 768px) {
            .app-container {
                grid-template-columns: 1fr;
                gap: 3rem;
                padding: 1.5rem;
            }
            .playlist-section {
                border-left: none;
                border-top: 1px solid var(--border);
                padding-left: 0;
                padding-top: 2rem;
            }
        }
    </style>
</head>
<body>

<div class="app-container">
        <div class="player-section">
            <div class="artwork-container">
                <div class="artwork paused" id="artwork">
                    <div class="artwork-center" id="artwork-center">
                        <div class="artwork-hole"></div>
                    </div>
                </div>
            </div>
            
            <div class="track-info">
                <h2 class="track-title" id="current-title">Loading...</h2>
                <p class="track-artist" id="current-artist">...</p>
            </div>

let currentIndex = 0;
        let isPlaying = false;
        let currentTime = 0;
        let timer = null;

const ui = {
            ambient: document.getElementById('ambient-bg'),
            artwork: document.getElementById('artwork'),
            artworkCenter: document.getElementById('artwork-center'),
            title: document.getElementById('current-title'),
            artist: document.getElementById('current-artist'),
            timeCurrent: document.getElementById('time-current'),
            timeTotal: document.getElementById('time-total'),
            progressFill: document.getElementById('progress-fill'),
            progressBar: document.getElementById('progress-bar'),
            playBtn: document.getElementById('play-btn'),
            playIcon: document.getElementById('play-icon'),
            prevBtn: document.getElementById('prev-btn'),
            nextBtn: document.getElementById('next-btn'),
            playlist: document.getElementById('playlist')
        };

const formatTime = (seconds) => {
            const m = Math.floor(seconds / 60);
            const s = Math.floor(seconds % 60);
            return `${m}:${s < 10 ? '0' : ''}${s}`;
        };

const loadTrack = (index) => {
            currentIndex = index;
            const track = tracks[currentIndex];
            
            currentTime = 0;
            ui.title.textContent = track.title;
            ui.artist.textContent = track.artist;
            ui.timeTotal.textContent = formatTime(track.duration);
            ui.timeCurrent.textContent = formatTime(0);
            ui.progressFill.style.width = '0%';
            
            document.documentElement.style.setProperty('--accent', track.color);
            ui.artworkCenter.style.background = track.color;
            ui.ambient.style.background = `radial-gradient(circle, ${track.color} 0%, transparent 60%)`;
            
            renderPlaylist();
        };

const updateProgress = () => {
            const track = tracks[currentIndex];
            ui.timeCurrent.textContent = formatTime(currentTime);
            const percent = (currentTime / track.duration) * 100;
            ui.progressFill.style.width = `${percent}%`;
        };

const handleNext = () => {
            let nextIndex = currentIndex + 1;
            if (nextIndex >= tracks.length) nextIndex = 0;
            const wasPlaying = isPlaying;
            loadTrack(nextIndex);
            if (wasPlaying) {
                isPlaying = false; 
                togglePlay();
            }
        };

ui.playBtn.addEventListener('click', togglePlay);
        ui.nextBtn.addEventListener('click', handleNext);
        ui.prevBtn.addEventListener('click', handlePrev);

ui.progressBar.addEventListener('click', (e) => {
            const rect = ui.progressBar.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            currentTime = percent * tracks[currentIndex].duration;
            updateProgress();
        });

loadTrack(0);
    </script>
</body>
</html>

Modern JavaScript Project : Audio player using css javascript example

You may like these posts :

Write Your Comment