D
Digmarket. Preview
Navigation
Log in Sign up
Home › Free

Music Waveform Equalizer – Lavender Translucent Acrylic

<div class="fp-audio-streaming-waveform-equalizer-ui">
    <div class="fp-audio-streaming-waveform-equalizer-ui-stage">
        <div class="fp-audio-streaming-waveform-equalizer-ui-ambient"></div>
        <div class="fp-audio-streaming-waveform-equalizer-ui-orb-1"></div>
        <div class="fp-audio-streaming-waveform-equalizer-ui-orb-2"></div>

        <div class="fp-audio-streaming-waveform-equalizer-ui-panel">
            <div class="fp-audio-streaming-waveform-equalizer-ui-header">
                <div class="fp-audio-streaming-waveform-equalizer-ui-track-info">
                    <span class="fp-audio-streaming-waveform-equalizer-ui-tag">High-Res Audio</span>
                    <h3 class="fp-audio-streaming-waveform-equalizer-ui-title">Lavender Haze.flac</h3>
                </div>
                <div class="fp-audio-streaming-waveform-equalizer-ui-status-badge">
                    <div class="fp-audio-streaming-waveform-equalizer-ui-pulse-dot"></div>
                    SYNC
                </div>
            </div>

            <div class="fp-audio-streaming-waveform-equalizer-ui-visualizer">
                <canvas class="fp-audio-streaming-waveform-equalizer-ui-canvas"></canvas>
            </div>

            <div class="fp-audio-streaming-waveform-equalizer-ui-footer">
                <span class="fp-audio-streaming-waveform-equalizer-ui-time">01:24</span>
                <div class="fp-audio-streaming-waveform-equalizer-ui-progress-bar">
                    <div class="fp-audio-streaming-waveform-equalizer-ui-progress-fill"></div>
                </div>
                <span class="fp-audio-streaming-waveform-equalizer-ui-time">04:12</span>
            </div>
        </div>
    </div>
</div>
/* ========================================== */
/* 2. CSS STYLES                              */
/* ========================================== */

.fp-audio-streaming-waveform-equalizer-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;
    
    --fp-primary-color: #f8f8f5; 
    --fp-secondary-color: rgba(255, 255, 255, 0.45); 
    --fp-muted-color: #6c5b7b; 
    --fp-soft-color: #e6e6fa; 
    --fp-info-color: #c3b1e1; 
    --fp-warning-color: #d8bfd8;
    --fp-danger-color: #8a2be2; 
    --fp-accent-color: #b57edc; 
    --fp-text-color: #2d1e3e; 

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background: var(--fp-background-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    position: relative;
}

.fp-audio-streaming-waveform-equalizer-ui * {
    box-sizing: inherit;
}

.fp-audio-streaming-waveform-equalizer-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px -10px rgba(45, 30, 62, 0.08);
    border: 1px solid #ffffff;
}

.fp-audio-streaming-waveform-equalizer-ui-ambient {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: radial-gradient(circle at 50% 50%, var(--fp-soft-color) 0%, transparent 60%);
    opacity: 0.6;
    animation: fp-audio-streaming-waveform-equalizer-ui-breathe 6s ease-in-out infinite alternate;
}

@keyframes fp-audio-streaming-waveform-equalizer-ui-breathe {
    0% { transform: scale(0.8); opacity: 0.4; }
    100% { transform: scale(1.2); opacity: 0.8; }
}

.fp-audio-streaming-waveform-equalizer-ui-orb-1,
.fp-audio-streaming-waveform-equalizer-ui-orb-2 {
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
    opacity: 0.5;
}

.fp-audio-streaming-waveform-equalizer-ui-orb-1 {
    top: -10%; left: -10%;
    background: var(--fp-accent-color);
    animation: fp-audio-streaming-waveform-equalizer-ui-orbit-1 12s linear infinite;
}

.fp-audio-streaming-waveform-equalizer-ui-orb-2 {
    bottom: -10%; right: -10%;
    background: var(--fp-info-color);
    animation: fp-audio-streaming-waveform-equalizer-ui-orbit-2 15s linear infinite;
}

@keyframes fp-audio-streaming-waveform-equalizer-ui-orbit-1 {
    0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@keyframes fp-audio-streaming-waveform-equalizer-ui-orbit-2 {
    0% { transform: rotate(0deg) translateX(-40px) rotate(0deg); }
    100% { transform: rotate(-360deg) translateX(-40px) rotate(360deg); }
}

.fp-audio-streaming-waveform-equalizer-ui-panel {
    position: relative;
    z-index: 2;
    width: 85%;
    height: 85%;
    background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 8px 32px 0 rgba(108, 91, 123, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.fp-audio-streaming-waveform-equalizer-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.fp-audio-streaming-waveform-equalizer-ui-track-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-audio-streaming-waveform-equalizer-ui-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fp-muted-color);
}

.fp-audio-streaming-waveform-equalizer-ui-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--fp-text-color);
    margin: 0;
    letter-spacing: -0.02em;
}

.fp-audio-streaming-waveform-equalizer-ui-status-badge {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-accent-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fp-audio-streaming-waveform-equalizer-ui-pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--fp-accent-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--fp-accent-color);
    animation: fp-audio-streaming-waveform-equalizer-ui-pulse 1.5s infinite;
}

@keyframes fp-audio-streaming-waveform-equalizer-ui-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.fp-audio-streaming-waveform-equalizer-ui-visualizer {
    flex: 1;
    position: relative;
    width: 100%;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-audio-streaming-waveform-equalizer-ui-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.fp-audio-streaming-waveform-equalizer-ui-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.fp-audio-streaming-waveform-equalizer-ui-time {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fp-muted-color);
    font-variant-numeric: tabular-nums;
}

.fp-audio-streaming-waveform-equalizer-ui-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(108, 91, 123, 0.1);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.fp-audio-streaming-waveform-equalizer-ui-progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 35%;
    background: var(--fp-accent-color);
    border-radius: 3px;
    box-shadow: 0 0 10px var(--fp-accent-color);
}

@media (max-width: 480px) {
    .fp-audio-streaming-waveform-equalizer-ui-panel {
        width: 90%;
        height: 90%;
        padding: 16px;
    }
    .fp-audio-streaming-waveform-equalizer-ui-title {
        font-size: 1rem;
    }
}
/* ========================================== */
/* 3. JAVASCRIPT LOGIC                        */
/* ========================================== */

(function() {
    document.querySelectorAll('.fp-audio-streaming-waveform-equalizer-ui').forEach(root => {
        const canvas = root.querySelector('.fp-audio-streaming-waveform-equalizer-ui-canvas');
        if (!canvas) return;

        const ctx = canvas.getContext('2d', { alpha: true });
        
        let animationFrameId;
        let width, height;
        let time = 0;

        const style = getComputedStyle(root);
        const colorAccent = style.getPropertyValue('--fp-accent-color').trim() || '#b57edc';
        const colorInfo = style.getPropertyValue('--fp-info-color').trim() || '#c3b1e1';
        const colorDanger = style.getPropertyValue('--fp-danger-color').trim() || '#8a2be2';

        const waves = [
            { baseAmp: 0.15, amp: 0.15, freq: 0.02, phaseSpeed: 0.04, color: colorInfo, width: 2 },
            { baseAmp: 0.3, amp: 0.3, freq: 0.015, phaseSpeed: 0.06, color: colorAccent, width: 3 },
            { baseAmp: 0.1, amp: 0.1, freq: 0.03, phaseSpeed: 0.03, color: colorDanger, width: 1.5, isSpikeLayer: true }
        ];

        let targetSpikeMultiplier = 1;
        let currentSpikeMultiplier = 1;

        function fp_audio_streaming_waveform_equalizer_ui_resize() {
            if (!canvas.parentElement) return;
            const rect = canvas.parentElement.getBoundingClientRect();
            const dpr = window.devicePixelRatio || 1;
            canvas.width = rect.width * dpr;
            canvas.height = rect.height * dpr;
            width = rect.width;
            height = rect.height;
            ctx.scale(dpr, dpr);
        }

        function fp_audio_streaming_waveform_equalizer_ui_loop() {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                window.removeEventListener('resize', fp_audio_streaming_waveform_equalizer_ui_resize);
                document.removeEventListener('visibilitychange', fp_audio_streaming_waveform_equalizer_ui_handleVisibility);
                observer.disconnect();
                return;
            }

            if (document.visibilityState === 'visible') {
                ctx.clearRect(0, 0, width, height);
                const centerY = height / 2;

                if (Math.random() > 0.98) {
                    targetSpikeMultiplier = 2.5 + Math.random() * 2;
                } else {
                    targetSpikeMultiplier = 1;
                }

                currentSpikeMultiplier += (targetSpikeMultiplier - currentSpikeMultiplier) * 0.15;

                waves.forEach(wave => {
                    ctx.beginPath();
                    ctx.strokeStyle = wave.color;
                    ctx.lineWidth = wave.width;
                    
                    if (wave.isSpikeLayer) {
                        ctx.shadowBlur = 12 * currentSpikeMultiplier;
                        ctx.shadowColor = wave.color;
                        ctx.globalAlpha = Math.min(1, 0.4 + (currentSpikeMultiplier * 0.2));
                    } else {
                        ctx.shadowBlur = 0;
                        ctx.globalAlpha = 0.8;
                    }

                    const activeAmp = (height * wave.baseAmp) * (wave.isSpikeLayer ? currentSpikeMultiplier : 1 + (currentSpikeMultiplier * 0.1));

                    for (let x = 0; x <= width; x += 2) {
                        const y = centerY 
                            + Math.sin(x * wave.freq + time * wave.phaseSpeed) * activeAmp
                            + Math.sin(x * (wave.freq * 0.5) - time * (wave.phaseSpeed * 0.5)) * (activeAmp * 0.3);
                        
                        if (x === 0) {
                            ctx.moveTo(x, y);
                        } else {
                            ctx.lineTo(x, y);
                        }
                    }
                    ctx.stroke();
                });

                ctx.globalAlpha = 1; 
                time += 1;
            }

            animationFrameId = requestAnimationFrame(fp_audio_streaming_waveform_equalizer_ui_loop);
        }

        function fp_audio_streaming_waveform_equalizer_ui_handleVisibility() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                }
            } else {
                if (!animationFrameId) {
                    fp_audio_streaming_waveform_equalizer_ui_resize();
                    animationFrameId = requestAnimationFrame(fp_audio_streaming_waveform_equalizer_ui_loop);
                }
            }
        }

        window.addEventListener('resize', fp_audio_streaming_waveform_equalizer_ui_resize);
        document.addEventListener('visibilitychange', fp_audio_streaming_waveform_equalizer_ui_handleVisibility);
        
        setTimeout(() => {
            fp_audio_streaming_waveform_equalizer_ui_resize();
        }, 50);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (!animationFrameId && document.visibilityState === 'visible') {
                        fp_audio_streaming_waveform_equalizer_ui_resize();
                        animationFrameId = requestAnimationFrame(fp_audio_streaming_waveform_equalizer_ui_loop);
                    }
                } else {
                    if (animationFrameId) {
                        cancelAnimationFrame(animationFrameId);
                        animationFrameId = null;
                    }
                }
            });
        }, { threshold: 0.1 });

        observer.observe(root);
    });
})();
Created by Digital Market Created: Apr 21, 2026 • Updated: Apr 26, 2026

Description

This is a premium equalizer card component built specifically for the music and audio technology industry. Developers building audio platforms often struggle with heavy visualization libraries that wreck browser performance and drain battery life on mobile devices. We built this free resource to solve that exact problem by offering a completely sterile DOM structure using only pure HTML, CSS, and Vanilla JavaScript.

Delivering a fast and responsive music application means you cannot afford to bog down the user interface with bulky third party dependencies. This UI component completely removes heavy frameworks like Tailwind, Bootstrap, and GSAP from your stack. It gives you a highly responsive audio visualization card that executes instantly and supports strict Core Web Vitals optimization to keep your PageSpeed scores securely above the 90 point mark.

Technical Architecture & Performance

  • Pure Vanilla Foundation: Engineered exclusively with native web standards to eliminate the performance drag of external package updates.

  • Sterile DOM Architecture: Keeps the markup incredibly flat to guarantee rapid browser rendering and prevent layout shifts during audio playback.

  • Core Web Vitals Focus: Built from the ground up to pass strict Lighthouse audits and meet the demanding performance standards of enterprise streaming platforms.

  • Isolated CSS Styling: Relies on highly specific class names so the component aesthetics never conflict with your primary application architecture.

  • Rapid Integration: Drops easily into any existing project repository without forcing you to configure complex build tools or extra compiler steps.

Design & Aesthetic Impact

The visual interface delivers a highly polished experience tailored for modern music applications. We utilized soft lavender color tones to project a calming and premium translucent acrylic aesthetic. The primary interaction features a smooth sine wave oscillation animation built strictly with native CSS. This visual effect reacts dynamically to represent audio frequencies in a clear and technical manner. It provides users with satisfying playback feedback while maintaining an exceptionally clean and modern UI.

Enterprise Use Cases

  1. Audio Mastering Dashboards: Implement this card inside cloud based production tools to give audio engineers a lightweight visual representation of active track frequencies.

  2. Podcast Hosting Platforms: Deploy the component as a stylized embedded player card that creators can easily share across social media and personal websites.

  3. Royalty Free Music Libraries: Use the equalizer card on search result pages to let video editors preview track pacing and dynamics before licensing the audio.

Technical Details

  • ElementCards
Report Issue

Highlights & Benefits

Copy-Paste Ready

Drop the code straight into your project without configuration.

Zero Dependencies

Built strictly with pure CSS & Vanilla JS for maximum speed.

ADA & WCAG Ready

Constructed with strict adherence to WCAG accessibility standards for perfect contrast and screen-reader support.

Sterile DOM Structure

Utilizes a highly optimized, clean DOM architecture ensuring lightning-fast render and maximum PageSpeed scores.

You need an active subscription or purchase to leave a review for this premium component.
Awaiting product image

Music Waveform Equalizer – Lavender Translucent Acrylic

Category:

Description

This is a premium equalizer card component built specifically for the music and audio technology industry. Developers building audio platforms often struggle with heavy visualization libraries that wreck browser performance and drain battery life on mobile devices. We built this free resource to solve that exact problem by offering a completely sterile DOM structure using only pure HTML, CSS, and Vanilla JavaScript.

Delivering a fast and responsive music application means you cannot afford to bog down the user interface with bulky third party dependencies. This UI component completely removes heavy frameworks like Tailwind, Bootstrap, and GSAP from your stack. It gives you a highly responsive audio visualization card that executes instantly and supports strict Core Web Vitals optimization to keep your PageSpeed scores securely above the 90 point mark.

Technical Architecture & Performance

  • Pure Vanilla Foundation: Engineered exclusively with native web standards to eliminate the performance drag of external package updates.

  • Sterile DOM Architecture: Keeps the markup incredibly flat to guarantee rapid browser rendering and prevent layout shifts during audio playback.

  • Core Web Vitals Focus: Built from the ground up to pass strict Lighthouse audits and meet the demanding performance standards of enterprise streaming platforms.

  • Isolated CSS Styling: Relies on highly specific class names so the component aesthetics never conflict with your primary application architecture.

  • Rapid Integration: Drops easily into any existing project repository without forcing you to configure complex build tools or extra compiler steps.

Design & Aesthetic Impact

The visual interface delivers a highly polished experience tailored for modern music applications. We utilized soft lavender color tones to project a calming and premium translucent acrylic aesthetic. The primary interaction features a smooth sine wave oscillation animation built strictly with native CSS. This visual effect reacts dynamically to represent audio frequencies in a clear and technical manner. It provides users with satisfying playback feedback while maintaining an exceptionally clean and modern UI.

Enterprise Use Cases

  1. Audio Mastering Dashboards: Implement this card inside cloud based production tools to give audio engineers a lightweight visual representation of active track frequencies.

  2. Podcast Hosting Platforms: Deploy the component as a stylized embedded player card that creators can easily share across social media and personal websites.

  3. Royalty Free Music Libraries: Use the equalizer card on search result pages to let video editors preview track pacing and dynamics before licensing the audio.

Related products