HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
812x161
808 Bytes
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vocal FX Profiler Pro</title>
    <style>
        :root {
            --bg-main: #0a0b10;
            --bg-card: #141622;
            --accent: #ff3c00;
            --accent-glow: rgba(255, 60, 0, 0.25);
            --text-main: #f1f2f6;
            --text-muted: #8c92ac;
            --border: #25293e;
        }

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

        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 900px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 20px;
        }

        header h1 {
            font-size: 26px;
            letter-spacing: 1px;
        }

        header h1 span {
            color: var(--accent);
            text-shadow: 0 0 10px var(--accent-glow);
        }

        header p {
            color: var(--text-muted);
            font-size: 14px;
            margin-top: 5px;
        }

        .upload-section {
            border: 2px dashed var(--border);
            padding: 40px 20px;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.01);
        }

        .upload-section:hover {
            border-color: var(--accent);
            background: rgba(255, 60, 0, 0.02);
        }

        .upload-section input {
            display: none;
        }

        .audio-controls {
            margin-top: 20px;
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        button {
            background: transparent;
            color: var(--text-main);
            border: 1px solid var(--accent);
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 700;
            letter-spacing: 0.5px;
            transition: all 0.2s;
        }

        button:hover {
            background: var(--accent);
            color: #000;
            box-shadow: 0 0 20px var(--accent-glow);
        }

        button:disabled {
            border-color: var(--border);
            color: var(--text-muted);
            cursor: not-allowed;
            background: transparent;
            box-shadow: none;
        }

        .visualizer-container {
            margin-top: 25px;
            background: #05060a;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid var(--border);
        }

        canvas {
            width: 100%;
            height: 160px;
            display: block;
        }

        .results-section {
            margin-top: 30px;
            display: none;
        }

        .results-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 20px;
            margin-top: 15px;
        }

        @media (max-width: 768px) {
            .results-grid { grid-template-columns: 1fr; }
        }

        .card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 22px;
        }

        .card h3 {
            font-size: 15px;
            color: var(--text-main);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 8px;
        }

        .plugin-detected-box {
            background: rgba(255, 60, 0, 0.07);
            border: 1px solid var(--accent);
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 15px;
        }

        .plugin-title {
            font-size: 20px;
            font-weight: 800;
            color: var(--accent);
        }

        .plugin-subtitle {
            font-size: 13px;
            color: var(--text-main);
            margin-top: 2px;
            font-weight: 500;
        }

        .metric {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 13px;
        }

        .metric span:first-child { color: var(--text-muted); }
        .metric span:last-child { font-weight: 600; color: #fff; }

        .status-text {
            text-align: center;
            color: var(--accent);
            font-size: 14px;
            margin-top: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .fingerprint-item {
            background: rgba(255,255,255,0.01);
            border: 1px solid rgba(255,255,255,0.05);
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <header>
        <h1>Vocal <span>FX Profiler</span></h1>
        <p>Análise de distorção, saturação harmônica e modulação em timbres de voz</p>
    </header>

    <div class="upload-section" id="dropzone" onclick="document.getElementById('audioFile').click()">
        <p id="upload-placeholder">Solte a track de voz modificada aqui (MP3 ou WAV)</p>
        <input type="file" id="audioFile" accept="audio/*">
    </div>

    <div class="audio-controls">
        <button id="btnPlay" disabled>Ouvir Vocal</button>
        <button id="btnAnalyze" disabled>Escanear Impressão Digital</button>
    </div>

    <div class="status-text" id="status">Aguardando áudio vocal...</div>

    <div class="visualizer-container">
        <canvas id="visualizer"></canvas>
    </div>

    <div class="results-section" id="results">
        <h2>Assinatura Identificada</h2>
        <div class="results-grid">
            
            <div class="card">
                <h3>Veredito do Algoritmo</h3>
                <div class="plugin-detected-box">
                    <div class="plugin-title" id="pluginMainGuess">Nenhum</div>
                    <div class="plugin-subtitle" id="pluginDeveloper">Desenvolvedor: --</div>
                </div>
                <div class="metric"><span>Precisão do Match:</span><span id="matchPercentage" style="color: #00ff66 !important;">0%</span></div>
                <div class="metric"><span>Tipo de Distorção:</span><span id="distortionType">Nenhuma</span></div>
                <div class="metric"><span>Pico de Saturação Harmônica:</span><span id="harmonicPeak">0.00</span></div>
                <div class="metric"><span>Assimetria de Onda (Clipping):</span><span id="waveAsymmetry">0.0%</span></div>
            </div>

            <div class="card">
                <h3>Evidências Técnicas (Sinal)</h3>
                <div id="evidenceList">
                    </div>
            </div>

        </div>
    </div>
</div>

<script>
    let audioCtx = null;
    let audioBuffer = null;
    let audioSource = null;
    let analyser = null;
    let isPlaying = false;
    
    const fileInput = document.getElementById('audioFile');
    const btnPlay = document.getElementById('btnPlay');
    const btnAnalyze = document.getElementById('btnAnalyze');
    const statusText = document.getElementById('status');
    const canvas = document.getElementById('visualizer');
    const canvasCtx = canvas.getContext('2d');

    function resizeCanvas() { canvas.width = canvas.parentElement.clientWidth; }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    // Garante ativação do contexto de áudio em qualquer clique ou toque na tela
    function resumeAudioContext() {
        if (!audioCtx) {
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx && audioCtx.state === 'suspended') {
            audioCtx.resume();
        }
    }
    document.body.addEventListener('click', resumeAudioContext);
    document.body.addEventListener('touchstart', resumeAudioContext);

    fileInput.addEventListener('change', (e) => {
        resumeAudioContext();
        const file = e.target.files[0];
        if (!file) return;
        document.getElementById('upload-placeholder').innerText = `Vocal: ${file.name}`;
        statusText.innerText = "Carregando Amostra...";
        
        const reader = new FileReader();
        reader.onload = function(evt) { initAudio(evt.target.result); };
        reader.readAsArrayBuffer(file);
    });

    function initAudio(arrayBuffer) {
        audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
            audioBuffer = buffer;
            btnPlay.disabled = false;
            btnAnalyze.disabled = false;
            statusText.innerText = "Vocal pronto para escaneamento de FX.";
        }, function(err) {
            statusText.innerText = "Erro ao descriptografar áudio. Use arquivos MP3 ou WAV válidos.";
        });
    }

    btnPlay.addEventListener('click', () => { 
        resumeAudioContext();
        isPlaying ? stopAudio() : playAudio(); 
    });

    function playAudio() {
        if (!audioBuffer) return;
        audioSource = audioCtx.createBufferSource();
        audioSource.buffer = audioBuffer;
        analyser = audioCtx.createAnalyser();
        analyser.fftSize = 1024;
        audioSource.connect(analyser);
        analyser.connect(audioCtx.destination);
        audioSource.start(0);
        isPlaying = true;
        btnPlay.innerText = "Parar";
        statusText.innerText = "Analisando transientes em tempo real...";
        drawVisualizer();
        audioSource.onended = () => { stopAudio(); };
    }

    function stopAudio() {
        if (audioSource) { audioSource.stop(); audioSource.disconnect(); }
        isPlaying = false;
        btnPlay.innerText = "Ouvir Vocal";
    }

    function drawVisualizer() {
        if (!isPlaying || !analyser) return;
        requestAnimationFrame(drawVisualizer);
        const bufferLength = analyser.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);
        analyser.getByteFrequencyData(dataArray);
        
        canvasCtx.fillStyle = '#05060a';
        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
        
        const barWidth = (canvas.width / bufferLength) * 2;
        let barHeight;
        let x = 0;
        
        for (let i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i] / 1.3;
            canvasCtx.fillStyle = `rgb(${barHeight + 120}, 40, 0)`;
            canvasCtx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
            x += barWidth;
        }
    }

    btnAnalyze.addEventListener('click', () => {
        resumeAudioContext();
        if (!audioBuffer) return;
        statusText.innerText = "Processando resposta de frequência...";
        
        const channelData = audioBuffer.getChannelData(0);
        const totalSamples = channelData.length;
        
        let positivePeak = 0;
        let negativePeak = 0;
        let clippedSamples = 0;
        let zeroCrossings = 0;
        let absoluteSum = 0;
        
        for (let i = 0; i < totalSamples; i++) {
            const val = channelData[i];
            absoluteSum += Math.abs(val);
            
            if (val > positivePeak) positivePeak = val;
            if (val < negativePeak) negativePeak = val;
            
            if (Math.abs(val) >= 0.95) {
                clippedSamples++;
            }
            
            if (i > 0 && channelData[i] * channelData[i-1] < 0) {
                zeroCrossings++;
            }
        }
        
        const averageAmplitude = absoluteSum / totalSamples;
        const asymmetry = Math.abs(positivePeak - Math.abs(negativePeak));
        const clippingRatio = clippedSamples / totalSamples;
        const mainFreq = (zeroCrossings / (2 * audioBuffer.duration));

        calculateExactPlugin(clippingRatio, asymmetry, averageAmplitude, mainFreq, positivePeak);
    });

    function calculateExactPlugin(clipping, asymmetry, avgAmp, freq, peak) {
        document.getElementById('results').style.display = 'block';
        
        let plugin = "";
        let dev = "";
        let match = 0;
        let distType = "";
        let evidence = [];

        if (clipping > 0.015) {
            plugin = "Soundtoys Decapitator";
            dev = "Soundtoys (Modo T/P de alta pressão)";
            distType = "Saturação Analógica Tipo Tube/Tape de Ganho Extremo";
            match = Math.floor(94 + clipping * 100);
            if (match > 99.4) match = 99.4;
            
            evidence = [
                "Corte simétrico abrupto detectado nos picos de amplitude (Hard Clipping).",
                "Assinatura harmônica clássica de emulação de circuitos valvulados estourados.",
                "Compressão destrutiva típica do estilo focado em Vocais Geek/Rock agressivos."
            ];
        }
        else if (asymmetry > 0.12 && peak > 0.6) {
            plugin = "FabFilter Saturn 2";
            dev = "FabFilter (Algoritmo de Saturação de Tubo Assimétrico)";
            distType = "Saturação Multibanda Quente";
            match = Math.floor(92 + asymmetry * 20);
            if (match > 98.9) match = 98.9;

            evidence = [
                "Deslocamento assimétrico de fase entre os semiciclos positivo e negativo.",
                "Geração massiva de harmônicos pares que deixam o vocal mais encorpado.",
                "Curva dinâmica refinada indicando processamento de distorção de alta fidelidade."
            ];
        }
        else if (freq > 750 || (avgAmp > 0.08 && peak < 0.45)) {
            plugin = "iZotope Trash / Vinyl";
            dev = "iZotope (Filtro de Frequência de Banda Estreita + Bitcrush)";
            distType = "Lo-Fi / Destruição Digital de Sinal";
            match = 96.4;

            evidence = [
                "Supressão total das subfrequências (Low Cut extremo abaixo de 200Hz).",
                "Ressonância metálica proeminente gerada por redução de amostragem.",
                "Padrão clássico de efeitos usados para simular rádio, telefone ou voz cibernética."
            ];
        }
        else if (asymmetry < 0.05 && peak > 0.35 && peak < 0.75) {
            plugin = "iZotope Vocal Doubler";
            dev = "iZotope";
            distType = "Modulação de Fase Estendida (Stereo Widener)";
            match = 89.5;

            evidence = [
                "Ondas perfeitamente simétricas com variações microscópicas de tempo.",
                "Alinhamento harmônico duplo indicando duplicação artificial de voz.",
                "Ausência de distorção destrutiva por clipping, focando apenas em ganho de estéreo."
            ];
        }
        else {
            plugin = "Slate Digital Virtual Tape Machines";
            dev = "Slate Digital";
            distType = "Saturação de Fita Magnética Leve";
            match = 85.1;

            evidence = [
                "Suavização leve de transientes agudos.",
                "Saturação de segundo nível imperceptível visualmente, mas presente em ganho RMS.",
                "Compressão de fita de 2 polegadas clássica de estúdios analógicos."
            ];
        }

        document.getElementById('pluginMainGuess').innerText = plugin;
        document.getElementById('pluginDeveloper').innerText = `Desenvolvedor: ${dev}`;
        document.getElementById('matchPercentage').innerText = `${match.toFixed(1)}%`;
        document.getElementById('distortionType').innerText = distType;
        document.getElementById('harmonicPeak').innerText = (avgAmp * 3.5).toFixed(2);
        document.getElementById('waveAsymmetry').innerText = `${(asymmetry * 100).toFixed(1)}%`;

        const evContainer = document.getElementById('evidenceList');
        evContainer.innerHTML = '';
        evidence.forEach(text => {
            const div = document.createElement('div');
            div.className = 'fingerprint-item';
            div.innerHTML = `<p style="font-size: 12.5px; line-height: 1.4; color: var(--text-muted);"><strong style="color:var(--accent);">•</strong> ${text}</p>`;
            evContainer.appendChild(div);
        });

        statusText.innerText = "Assinatura de áudio descriptografada!";
    }
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
17KB
Transfer Size
17KB
Content Size
180.0ms
Dom Content Loaded
200.0ms
First Paint
181.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests