Audio Player in HTML5

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<div class="container">
  <div class="player-card">
    <div class="album-art" id="albumArt">
      <ion-icon name="musical-notes"></ion-icon>
      <div class="wave-animation" id="waveAnimation"></div>
    </div>

    <div class="track-info">
      <div class="track-title" id="trackTitle">No Track Loaded</div>
      <div class="track-artist" id="trackArtist">Upload a song to start</div>
    </div>

    <div class="progress-container">
      <div class="progress-bar" id="progressBar">
        <div class="progress" id="progress"></div>
      </div>
      <div class="time-info">
        <span id="currentTime">0:00</span>
        <span id="duration">0:00</span>
      </div>
    </div>

    <div class="controls">
      <button class="control-btn" id="prevBtn" disabled>
        <ion-icon name="play-skip-back"></ion-icon>
      </button>
      <button class="control-btn play-btn" id="playBtn" disabled>
        <ion-icon name="play" id="playIcon"></ion-icon>
      </button>
      <button class="control-btn" id="nextBtn" disabled>
        <ion-icon name="play-skip-forward"></ion-icon>
      </button>
    </div>

    <div class="volume-container">
      <ion-icon name="volume-medium"></ion-icon>
      <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
      <ion-icon name="volume-high"></ion-icon>
    </div>

    <div class="upload-section">
      <button class="upload-btn" onclick="document.getElementById('fileInput').click()">
        <ion-icon name="cloud-upload"></ion-icon>
        Upload Music
      </button>
      <input type="file" id="fileInput" accept="audio/*" multiple>
    </div>
  </div>
</div>
<audio id="audio"></audio>

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            max-width: 500px;
            width: 100%;
        }

        .player-card {
            background: #ffffff;
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .album-art {
            width: 100%;
            height: 280px;
            background: linear-gradient(135deg, #FFBF00 0%, #ff9500 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }

        .album-art ion-icon {
            font-size: 80px;
            color: rgba(255, 255, 255, 0.9);
        }

        .wave-animation {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            display: none;
        }

        .wave-animation.active {
            display: block;
        }

        .wave-bar {
            position: absolute;
            bottom: 0;
            width: 4px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 4px 4px 0 0;
            animation: wave 1s ease-in-out infinite;
        }

        @keyframes wave {
            0%, 100% { height: 20px; }
            50% { height: 50px; }
        }

        .track-info {
            text-align: center;
            margin-bottom: 30px;
        }

        .track-title {
            font-size: 22px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .track-artist {
            font-size: 16px;
            color: #666;
        }

        .progress-container {
            margin-bottom: 30px;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            margin-bottom: 12px;
        }

        .progress {
            height: 100%;
            background: #FFBF00;
            border-radius: 3px;
            width: 0%;
            position: relative;
            transition: width 0.1s linear;
        }

        .progress::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            background: #FFBF00;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(255, 191, 0, 0.4);
        }

        .time-info {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #666;
        }

        .controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .control-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #666;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .control-btn:hover {
            color: #FFBF00;
            transform: scale(1.1);
        }

        .control-btn ion-icon {
            font-size: 28px;
        }

        .play-btn {
            width: 70px;
            height: 70px;
            background: #FFBF00;
            border-radius: 50%;
            color: #ffffff;
            box-shadow: 0 8px 24px rgba(255, 191, 0, 0.3);
        }

        .play-btn:hover {
            background: #ff9500;
            color: #ffffff;
            transform: scale(1.05);
        }

        .play-btn ion-icon {
            font-size: 36px;
        }

        .volume-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 30px;
        }

        .volume-container ion-icon {
            font-size: 24px;
            color: #666;
        }

        .volume-slider {
            flex: 1;
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            outline: none;
            -webkit-appearance: none;
            cursor: pointer;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            background: #FFBF00;
            border-radius: 50%;
            cursor: pointer;
        }

        .volume-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: #FFBF00;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }

        .upload-section {
            text-align: center;
        }

        .upload-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #FFBF00 0%, #ff9500 100%);
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 16px rgba(255, 191, 0, 0.3);
        }

        .upload-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 191, 0, 0.4);
        }

        .upload-btn ion-icon {
            font-size: 22px;
        }

        #fileInput {
            display: none;
        }

        .no-track {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            padding: 40px 0;
        }

        .no-track ion-icon {
            font-size: 60px;
            color: #ccc;
        }

        .no-track p {
            color: #999;
            font-size: 16px;
        }

        @media (max-width: 480px) {
            .player-card {
                padding: 30px 25px;
            }

            .album-art {
                height: 240px;
            }

            .track-title {
                font-size: 20px;
            }

            .track-artist {
                font-size: 14px;
            }
        }

      const audio = document.getElementById('audio');
        const playBtn = document.getElementById('playBtn');
        const playIcon = document.getElementById('playIcon');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const progress = document.getElementById('progress');
        const progressBar = document.getElementById('progressBar');
        const currentTimeEl = document.getElementById('currentTime');
        const durationEl = document.getElementById('duration');
        const volumeSlider = document.getElementById('volumeSlider');
        const fileInput = document.getElementById('fileInput');
        const trackTitle = document.getElementById('trackTitle');
        const trackArtist = document.getElementById('trackArtist');
        const waveAnimation = document.getElementById('waveAnimation');

        let playlist = [];
        let currentTrackIndex = 0;

        // Create wave animation bars
        for (let i = 0; i < 30; i++) {
            const bar = document.createElement('div');
            bar.className = 'wave-bar';
            bar.style.left = `${i * 3.33}%`;
            bar.style.animationDelay = `${i * 0.05}s`;
            bar.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
            waveAnimation.appendChild(bar);
        }

        // File upload handler
        fileInput.addEventListener('change', function(e) {
            const files = Array.from(e.target.files);
            if (files.length > 0) {
                playlist = files;
                currentTrackIndex = 0;
                loadTrack(currentTrackIndex);
                enableControls();
            }
        });

        function loadTrack(index) {
            if (playlist.length === 0) return;
            
            const file = playlist[index];
            const url = URL.createObjectURL(file);
            audio.src = url;
            
            const fileName = file.name.replace(/\.[^/.]+$/, "");
            trackTitle.textContent = fileName;
            trackArtist.textContent = 'Local File';
            
            audio.load();
        }

        function enableControls() {
            playBtn.disabled = false;
            if (playlist.length > 1) {
                prevBtn.disabled = false;
                nextBtn.disabled = false;
            }
        }

        // Play/Pause
        playBtn.addEventListener('click', () => {
            if (audio.paused) {
                audio.play();
                playIcon.setAttribute('name', 'pause');
                waveAnimation.classList.add('active');
            } else {
                audio.pause();
                playIcon.setAttribute('name', 'play');
                waveAnimation.classList.remove('active');
            }
        });

        // Previous track
        prevBtn.addEventListener('click', () => {
            currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
            loadTrack(currentTrackIndex);
            audio.play();
            playIcon.setAttribute('name', 'pause');
        });

        // Next track
        nextBtn.addEventListener('click', () => {
            currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
            loadTrack(currentTrackIndex);
            audio.play();
            playIcon.setAttribute('name', 'pause');
        });

        // Update progress bar
        audio.addEventListener('timeupdate', () => {
            const percent = (audio.currentTime / audio.duration) * 100;
            progress.style.width = percent + '%';
            currentTimeEl.textContent = formatTime(audio.currentTime);
        });

        // Update duration
        audio.addEventListener('loadedmetadata', () => {
            durationEl.textContent = formatTime(audio.duration);
        });

        // Seek functionality
        progressBar.addEventListener('click', (e) => {
            const width = progressBar.clientWidth;
            const clickX = e.offsetX;
            const duration = audio.duration;
            audio.currentTime = (clickX / width) * duration;
        });

        // Volume control
        volumeSlider.addEventListener('input', (e) => {
            audio.volume = e.target.value / 100;
        });

        // Set initial volume
        audio.volume = 0.7;

        // Auto-play next track
        audio.addEventListener('ended', () => {
            if (currentTrackIndex < playlist.length - 1) {
                nextBtn.click();
            } else {
                playIcon.setAttribute('name', 'play');
                waveAnimation.classList.remove('active');
            }
        });

        // Format time helper
        function formatTime(seconds) {
            if (isNaN(seconds)) return '0:00';
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
        }

        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && !playBtn.disabled) {
                e.preventDefault();
                playBtn.click();
            }
        });