Home
wavy kits
Custom Audio Player

Custom Audio Player

🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js)

A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode.

✨ Features:

🎵 Play, pause, and mute/unmute controls

📈 Interactive progress bar with seek functionality

🔊 Dynamic volume slider with live preview

🖼️ Album art and track details display

⌨️ Keyboard support — toggle play/pause with the spacebar

🌓 Fully responsive and dark-mode compatible

This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

This tailwind example is contributed by wavy kits, on 10-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Other Landing Page

Author wavy kits

311

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Audio Player with SVGs</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
    <div class="max-w-md w-full">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6 text-center rtl:text-right">Custom Audio Player</h1>
       
        <div
            x-data="{
                isPlaying: false,
                isMuted: false,
                volume: 0.7,
                currentTime: 0,
                duration: 0,
                progress: 0,
                currentTrack: {
                    title: 'Summer Vibes',
                    artist: 'Ocean Waves',
                    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
                },
                init() {
                    this.duration = this.$refs.audio.duration || 0;
                },
                togglePlay() {
                    if (this.$refs.audio.paused) {
                        this.$refs.audio.play();
                        this.isPlaying = true;
                    } else {
                        this.$refs.audio.pause();
                        this.isPlaying = false;
                    }
                },
                updateProgress() {
                    this.currentTime = this.$refs.audio.currentTime;
                    this.duration = this.$refs.audio.duration || 0;
                    this.progress = this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
                },
                seek(event) {
                    const rect = this.$refs.progressBar.getBoundingClientRect();
                    const percent = (event.clientX - rect.left) / rect.width;
                    this.$refs.audio.currentTime = percent * this.duration;
                },
                toggleMute() {
                    this.isMuted = !this.isMuted;
                    this.$refs.audio.muted = this.isMuted;
                    if (this.isMuted) {
                        this.$refs.audio.volume = 0;
                    } else {
                        this.$refs.audio.volume = this.volume;
                    }
                },
                updateVolume() {
                    this.$refs.audio.volume = this.volume;
                    this.isMuted = this.volume === 0;
                },
                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}`;
                },
                onAudioEnd() {
                    this.isPlaying = false;
                    this.$refs.audio.currentTime = 0; // Reset to start
                }
            }"
            x-init="init"
            @keydown.window.space.prevent="togglePlay"
            class="bg-white dark:bg-gradient-to-br dark:from-slate-800 dark:to-slate-950 rounded-xl shadow-2xl p-6 overflow-hidden"
        >
            
            <audio
                x-ref="audio"
                @timeupdate="updateProgress"
                @loadedmetadata="init"
                @ended="onAudioEnd"
                preload="metadata"
                class="hidden"
            >
                <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3">
                Your browser does not support the audio element.
            </audio>

<div class="flex items-center space-x-4 rtl:space-x-reverse mb-6">
                <div class="w-16 h-16 bg-blue-500 rounded-lg overflow-hidden shadow-lg">
                    <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
                         alt="Album Art" class="w-full h-full object-cover">
                </div>
                <div class="flex-1">
                    <h2 class="text-gray-900 dark:text-white font-semibold text-lg" x-text="currentTrack.title">Song Title</h2>
                    <p class="text-gray-500 dark:text-gray-400" x-text="currentTrack.artist">Artist Name</p>
                </div>
            </div>
           
            
            <div class="w-full mb-4">
                <div
                    x-ref="progressBar"
                    @click="seek($event)"
                    class="relative w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden cursor-pointer group"
                >
                    <div
                        class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
                        :style="`width: ${progress}%`"
                    ></div>
                    <div
                        class="absolute top-1/2 w-4 h-4 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity"
                        :style="`left: ${progress}%`"
                    ></div>
                </div>
            </div>
           
            
            <div class="flex justify-between text-gray-500 dark:text-gray-400 text-sm mb-6 rtl:flex-row-reverse">
                <span x-text="formatTime(currentTime)">0:00</span>
                <span x-text="formatTime(duration)">0:00</span>
            </div>
           
            
            <div class="flex items-center justify-between">
                
                <button
                    @click="togglePlay"
                    class="text-white bg-blue-600 hover:bg-blue-500 transition-colors rounded-full w-16 h-16 flex items-center justify-center shadow-lg"
                >
                    
                    <svg x-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                        <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.648c1.295.742 1.295 2.545 0 3.286L7.279 20.99c-1.25.717-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
                    </svg>
                    
                    <svg x-show="isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 ml-1" style="display: none;">
                        <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 00-.75.75v12a.75.75 0 00.75.75h.75a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H6.75zm5.25 0a.75.75 0 00-.75.75v12a.75.75 0 00.75.75h.75a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75h-.75z" clip-rule="evenodd" />
                    </svg>
                </button>
               
                
                <div class="flex items-center space-x-2 rtl:space-x-reverse">
                    <button
                        @click="toggleMute"
                        class="text-gray-500 dark:text-gray-400 hover:text-blue-400 transition-colors"
                        :class="{ 'text-blue-400': isMuted }"
                    >
                        
                        <svg x-show="!isMuted && volume > 0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
                        </svg>
                        
                        <svg x-show="isMuted || volume == 0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="display: none;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
                        </svg>
                    </button>
                   
                    <div class="relative w-[100px] h-[6px] bg-gray-200 dark:bg-gray-700 rounded-full">
                        <div
                            class="absolute top-0 left-0 h-full bg-blue-500 rounded-full w-full origin-left"
                            :style="`transform: scaleX(${volume})`"
                        ></div>
                        <div
                            class="absolute top-1/2 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 shadow-lg z-10"
                            :style="`left: ${volume * 100}%`"
                        ></div>
                        <input
                            type="range"
                            min="0"
                            max="1"
                            step="0.01"
                            x-model="volume"
                            @input="updateVolume"
                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
                        >
                    </div>
                </div>
            </div>
        </div>
       
        <div class="mt-6 text-center text-gray-500 dark:text-gray-400">
            <p>Get More Components | Template from <a href="https://wavykits.com" target="_blank" style="color:#00f">WavyKits</a></p>
        </div>
    </div>
</body>
</html>

Related Examples

Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

2.8k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

9 months ago

1.6k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

9 months ago

937
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

8 months ago

1.2k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

8 months ago

1.6k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

7 months ago

344
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

6 months ago

1.5k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

5 months ago

1.4k
about video
about kelaplus video

Author:
Omer fils ELENGA

4 months ago

503
ServerHub Interface

Author:
МОЙДОЫР

3 weeks ago

305
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.5k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

1 month ago

293

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components