Audio Players

<div class="uk-car-voice">
    <div class="uk-car-voice-header">
        <div class="uk-car-voice-icon"><i class="fas fa-car-side"></i></div>
        <div class="uk-car-voice-info">
            <div class="uk-car-voice-title">Driver Assistant</div>
            <div class="uk-car-voice-status">Connected via Bluetooth</div>
        </div>
        <div class="uk-car-voice-live"><span></span> LIVE</div>
    </div>
    
    <div class="uk-car-voice-transcript">
        <i class="fas fa-quote-left"></i>
        "Navigating to the nearest charging station..."
    </div>

    <div class="uk-car-voice-controls">
        <button class="uk-car-voice-btn"><i class="fas fa-volume-down"></i></button>
        <button class="uk-car-voice-btn play"><i class="fas fa-pause"></i></button>
        <button class="uk-car-voice-btn"><i class="fas fa-volume-up"></i></button>
        <div class="uk-car-voice-progress"><div class="uk-car-voice-fill" style="width:65%;"></div></div>
        <span class="uk-car-voice-time">0:12 / 0:18</span>
    </div>
</div>

<style>
    .uk-car-voice {
        background: #0f172a;
        border-radius: 1.25rem;
        padding: 1.5rem;
        color: #fff;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    }
    .uk-car-voice-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .uk-car-voice-icon {
        width: 48px; height: 48px;
        border-radius: 1rem;
        background: rgba(255,255,255,0.1);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.25rem;
        color: #60a5fa;
    }
    .uk-car-voice-info { flex: 1; }
    .uk-car-voice-title { font-weight: 700; font-size: 1rem; }
    .uk-car-voice-status { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
    .uk-car-voice-live {
        font-size: 0.65rem;
        font-weight: 700;
        color: #ef4444;
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(239, 68, 68, 0.1);
        padding: 4px 8px;
        border-radius: 999px;
    }
    .uk-car-voice-live span {
        width: 6px; height: 6px;
        background: #ef4444;
        border-radius: 50%;
        animation: pulse-red 1.5s infinite;
    }
    @keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    
    .uk-car-voice-transcript {
        background: rgba(255,255,255,0.05);
        border-left: 3px solid #60a5fa;
        padding: 1rem;
        border-radius: 0 0.5rem 0.5rem 0;
        font-size: 0.88rem;
        line-height: 1.6;
        color: #e2e8f0;
        margin-bottom: 1.5rem;
        font-style: italic;
    }
    .uk-car-voice-transcript i { color: #60a5fa; margin-right: 0.5rem; }
    
    .uk-car-voice-controls {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .uk-car-voice-btn {
        background: transparent;
        border: 0;
        color: #94a3b8;
        cursor: pointer;
        font-size: 0.9rem;
    }
    .uk-car-voice-btn:hover { color: #fff; }
    .uk-car-voice-btn.play {
        width: 40px; height: 40px;
        border-radius: 50%;
        background: #60a5fa;
        color: #0f172a;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.9rem;
    }
    .uk-car-voice-btn.play:hover { background: #93c5fd; }
    .uk-car-voice-progress {
        flex: 1;
        height: 4px;
        background: rgba(255,255,255,0.1);
        border-radius: 999px;
        overflow: hidden;
        margin: 0 0.5rem;
    }
    .uk-car-voice-fill {
        height: 100%;
        background: #60a5fa;
        border-radius: 999px;
    }
    .uk-car-voice-time {
        font-size: 0.7rem;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
</style>

<div class="uk-audio-custom">
    <div class="uk-audio-cover"><i class="fas fa-music"></i></div>
    <div class="uk-audio-main">
        <div class="uk-audio-info">
            <div class="uk-audio-title">Midnight City Lights</div>
            <div class="uk-audio-artist">M83 · 4:03</div>
        </div>
        <div class="uk-audio-progress">
            <span class="uk-audio-time">0:00</span>
            <div class="uk-audio-bar"><div class="uk-audio-fill" style="width:35%;"></div></div>
            <span class="uk-audio-time">4:03</span>
        </div>
    </div>
    <div class="uk-audio-actions">
        <button class="uk-audio-btn"><i class="fas fa-backward"></i></button>
        <button class="uk-audio-btn uk-audio-btn-play"><i class="fas fa-play"></i></button>
        <button class="uk-audio-btn"><i class="fas fa-forward"></i></button>
    </div>
</div>

<style>
    .uk-audio-custom {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
    }
    .uk-audio-cover {
        width: 56px; height: 56px;
        border-radius: 0.65rem;
        background: linear-gradient(135deg, #eef2f8, #dbeafe);
        color: #1e3a8a;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    .uk-audio-main { flex: 1; min-width: 0; text-align: left; }
    .uk-audio-title {
        font-size: 0.88rem;
        font-weight: 700;
        color: #0b1b2f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .uk-audio-artist {
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: 2px;
    }
    .uk-audio-progress {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.6rem;
    }
    .uk-audio-time {
        font-size: 0.68rem;
        color: #94a3b8;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }
    .uk-audio-bar {
        flex: 1;
        height: 4px;
        background: #e2e8f0;
        border-radius: 999px;
        overflow: hidden;
    }
    .uk-audio-fill {
        height: 100%;
        background: #1e3a8a;
        border-radius: 999px;
    }
    .uk-audio-actions {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
    }
    .uk-audio-btn {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: #475569;
        cursor: pointer;
        font-size: 0.8rem;
        transition: all 0.15s;
    }
    .uk-audio-btn:hover { background: #f1f5f9; color: #1e3a8a; }
    .uk-audio-btn-play {
        background: #1e3a8a;
        color: #fff;
    }
    .uk-audio-btn-play:hover { background: #0f2a5c; color: #fff; }
</style>

<div class="uk-audio-playlist">
    <div class="uk-audio-playlist-head">
        <div class="uk-audio-playlist-title">Up Next</div>
        <span class="uk-audio-playlist-count">3 tracks</span>
    </div>
    <div class="uk-audio-track active">
        <div class="uk-audio-track-num"><i class="fas fa-volume-up"></i></div>
        <div class="uk-audio-track-info">
            <div class="uk-audio-track-title">Midnight City Lights</div>
            <div class="uk-audio-track-artist">M83</div>
        </div>
        <div class="uk-audio-track-time">4:03</div>
    </div>
</div>

<style>
    .uk-audio-playlist {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
    }
    .uk-audio-playlist-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.15rem;
        border-bottom: 1px solid #f1f5f9;
    }
    .uk-audio-playlist-title {
        font-weight: 800;
        font-size: 0.9rem;
        color: #0b1b2f;
    }
    .uk-audio-playlist-count {
        font-size: 0.72rem;
        color: #94a3b8;
        background: #f1f5f9;
        padding: 2px 10px;
        border-radius: 999px;
    }
    .uk-audio-track {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: background 0.15s;
        border-bottom: 1px solid #f8fafc;
    }
    .uk-audio-track:last-child { border-bottom: 0; }
    .uk-audio-track:hover { background: #f8fafc; }
    .uk-audio-track.active { background: #eef2f8; }
    .uk-audio-track-num {
        width: 24px;
        text-align: center;
        font-size: 0.75rem;
        color: #94a3b8;
        font-weight: 700;
        flex-shrink: 0;
    }
    .uk-audio-track.active .uk-audio-track-num { color: #1e3a8a; }
    .uk-audio-track-info { flex: 1; min-width: 0; text-align: left; }
    .uk-audio-track-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: #0b1b2f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .uk-audio-track.active .uk-audio-track-title { color: #1e3a8a; }
    .uk-audio-track-artist {
        font-size: 0.72rem;
        color: #94a3b8;
    }
    .uk-audio-track-time {
        font-size: 0.75rem;
        color: #94a3b8;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }
</style>

<div class="uk-podcast">
    <div class="uk-podcast-header">
        <div class="uk-podcast-cover"><i class="fas fa-microphone"></i></div>
        <div class="uk-podcast-info">
            <div class="uk-podcast-episode">Episode 42</div>
            <div class="uk-podcast-title">Building products people love</div>
            <div class="uk-podcast-meta">Design Talks · 45 min</div>
        </div>
    </div>
    <div class="uk-podcast-controls">
        <button class="uk-podcast-btn"><i class="fas fa-backward"></i></button>
        <button class="uk-podcast-btn uk-podcast-btn-play"><i class="fas fa-play"></i></button>
        <button class="uk-podcast-btn"><i class="fas fa-forward"></i></button>
        <div class="uk-podcast-progress">...</div>
        <button class="uk-podcast-btn uk-podcast-btn-speed">1.5×</button>
    </div>
</div>

<style>
    .uk-podcast {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.25rem;
    }
    .uk-podcast-header {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 1.25rem;
    }
    .uk-podcast-cover {
        width: 72px; height: 72px;
        border-radius: 0.85rem;
        background: linear-gradient(135deg, #1e3a8a, #6366f1);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }
    .uk-podcast-info { flex: 1; text-align: left; }
    .uk-podcast-episode {
        font-size: 0.7rem;
        font-weight: 700;
        color: #1e3a8a;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 4px;
    }
    .uk-podcast-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #0b1b2f;
        line-height: 1.35;
    }
    .uk-podcast-meta {
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: 4px;
    }
    .uk-podcast-controls {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }
    .uk-podcast-btn {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: #475569;
        cursor: pointer;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    .uk-podcast-btn:hover { background: #f1f5f9; color: #1e3a8a; }
    .uk-podcast-btn-play {
        width: 40px; height: 40px;
        background: #1e3a8a;
        color: #fff;
    }
    .uk-podcast-btn-play:hover { background: #0f2a5c; color: #fff; }
    .uk-podcast-progress { flex: 1; }
    .uk-podcast-bar {
        height: 4px;
        background: #e2e8f0;
        border-radius: 999px;
        overflow: hidden;
    }
    .uk-podcast-fill {
        height: 100%;
        background: #1e3a8a;
        border-radius: 999px;
    }
    .uk-podcast-times {
        display: flex;
        justify-content: space-between;
        font-size: 0.68rem;
        color: #94a3b8;
        font-variant-numeric: tabular-nums;
        margin-top: 4px;
    }
    .uk-podcast-btn-speed {
        width: auto;
        padding: 0 8px;
        height: 24px;
        border-radius: 6px;
        background: #f1f5f9;
        font-weight: 700;
        font-size: 0.7rem;
    }
</style>

<div class="uk-audio-min">
    <button class="uk-audio-min-play"><i class="fas fa-play"></i></button>
    <div class="uk-audio-min-bar">
        <div class="uk-audio-min-fill" style="width:25%;"></div>
    </div>
    <span class="uk-audio-min-time">1:23 / 4:35</span>
    <button class="uk-audio-min-btn"><i class="fas fa-volume-up"></i></button>
</div>

<style>
    .uk-audio-min {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
    }
    .uk-audio-min-play {
        width: 28px; height: 28px;
        border-radius: 50%;
        background: #1e3a8a;
        color: #fff;
        border: 0;
        cursor: pointer;
        font-size: 0.65rem;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .uk-audio-min-bar {
        flex: 1;
        height: 4px;
        background: #e2e8f0;
        border-radius: 999px;
        overflow: hidden;
    }
    .uk-audio-min-fill {
        height: 100%;
        background: #1e3a8a;
    }
    .uk-audio-min-time {
        font-size: 0.7rem;
        color: #64748b;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }
    .uk-audio-min-btn {
        background: transparent;
        border: 0;
        color: #64748b;
        cursor: pointer;
        font-size: 0.8rem;
        padding: 4px;
        border-radius: 4px;
    }
    .uk-audio-min-btn:hover { color: #1e3a8a; }
</style>

<div class="uk-audio-vol">
    <button class="uk-audio-vol-play"><i class="fas fa-pause"></i></button>
    <div class="uk-audio-vol-info">
        <div class="uk-audio-vol-title">Currently Playing</div>
        <div class="uk-audio-vol-track">Sunset Boulevard — The Midnight</div>
    </div>
    <div class="uk-audio-vol-controls">
        <i class="fas fa-volume-down"></i>
        <input type="range" class="uk-audio-vol-slider" min="0" max="100" value="65">
        <i class="fas fa-volume-up"></i>
    </div>
</div>

<style>
    .uk-audio-vol {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.85rem 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.85rem;
    }
    .uk-audio-vol-play {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: #1e3a8a;
        color: #fff;
        border: 0;
        cursor: pointer;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    .uk-audio-vol-info { flex: 1; min-width: 0; text-align: left; }
    .uk-audio-vol-title {
        font-size: 0.7rem;
        font-weight: 700;
        color: #1e3a8a;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .uk-audio-vol-track {
        font-size: 0.82rem;
        color: #0b1b2f;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .uk-audio-vol-controls {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
        color: #94a3b8;
        font-size: 0.75rem;
    }
    .uk-audio-vol-slider {
        width: 80px;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: #e2e8f0;
        border-radius: 999px;
        outline: 0;
        cursor: pointer;
    }
    .uk-audio-vol-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 12px; height: 12px;
        border-radius: 50%;
        background: #1e3a8a;
        cursor: pointer;
    }
</style>