| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Hush AI | Voice Audio Studio</title> |
| |
| |
| <script> |
| const manifest = { |
| name: "Hush AI Studio", short_name: "Hush Pro", start_url: ".", display: "standalone", |
| background_color: "#0f172a", theme_color: "#8b5cf6", |
| icons: [{ src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E", sizes: "512x512", type: "image/svg+xml" }] |
| }; |
| const manifestLink = document.createElement('link'); |
| manifestLink.rel = 'manifest'; manifestLink.href = 'data:application/manifest+json;charset=utf-8,' + encodeURIComponent(JSON.stringify(manifest)); |
| document.head.appendChild(manifestLink); |
| if ('serviceWorker' in navigator) { |
| const blob = new Blob(["self.addEventListener('install', (e) => self.skipWaiting()); self.addEventListener('activate', (e) => self.clients.claim()); self.addEventListener('fetch', (e) => {});"], { type: 'application/javascript' }); |
| navigator.serviceWorker.register(URL.createObjectURL(blob)).catch(console.error); |
| } |
| </script> |
|
|
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lamejs/1.2.1/lame.min.js"></script> |
|
|
| <script> |
| tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 50: '#f5f3ff', 100: '#ede9fe', 500: '#8b5cf6', 600: '#7c3aed', 900: '#4c1d95' } } } } } |
| </script> |
| <style> |
| .drag-active { border-color: #8b5cf6 !important; background-color: rgba(139, 92, 246, 0.1) !important; } |
| .hidden { display: none !important; } |
| .spinner { animation: spin 1s linear infinite; } |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
| |
| ::-webkit-scrollbar { width: 6px; height: 6px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } |
| .dark ::-webkit-scrollbar-thumb { background: #334155; } |
| ::-webkit-scrollbar-thumb:hover { background: #64748b; } |
| .dark ::-webkit-scrollbar-thumb:hover { background: #475569; } |
| |
| input[type=range] { -webkit-appearance: none; background: transparent; } |
| input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 8px; background: #cbd5e1; } |
| .dark input[type=range]::-webkit-slider-runnable-track { background: #334155; } |
| input[type=range]::-webkit-slider-thumb { |
| -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; |
| background: currentColor; margin-top: -6px; cursor: pointer; |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.1s; |
| } |
| input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); } |
| |
| #waveform > div::-webkit-scrollbar { height: 6px; } |
| #waveform > div::-webkit-scrollbar-track { background: transparent; border-radius: 8px; } |
| #waveform > div::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5); border-radius: 8px; } |
| .dark #waveform > div::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.6); } |
| #waveform > div::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.8); } |
| .dark #waveform > div::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.9); } |
| |
| #spectrogram { border-top: 1px solid rgba(148, 163, 184, 0.2); margin-top: 4px; } |
| .dark #spectrogram { border-top: 1px solid rgba(51, 65, 85, 0.5); } |
| </style> |
| </head> |
| <body class="bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 min-h-screen font-sans selection:bg-primary-500 selection:text-white pb-12 overflow-x-hidden transition-colors duration-200"> |
| |
| <audio id="ws-audio" class="hidden" crossorigin="anonymous"></audio> |
|
|
| <div class="max-w-7xl mx-auto px-4 pt-8"> |
| |
| <header class="flex flex-col md:flex-row items-center justify-between mb-6 gap-4 pb-4"> |
| <div class="flex items-center gap-4"> |
| <div class="inline-flex items-center justify-center p-3 bg-white dark:bg-primary-900/50 rounded-2xl border border-slate-200 dark:border-primary-500/30 text-primary-600 dark:text-primary-500 shadow-[0_0_15px_rgba(139,92,246,0.2)]"> |
| <i data-lucide="mic-off" class="w-6 h-6"></i> |
| <i data-lucide="sparkles" class="w-4 h-4 absolute transform translate-x-3 -translate-y-3 text-yellow-500 dark:text-yellow-400"></i> |
| </div> |
| <div> |
| <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Hush AI Studio</h1> |
| <p class="text-slate-500 dark:text-slate-400 text-sm flex items-center gap-1"> |
| <i data-lucide="shield-check" class="w-3 h-3 text-emerald-500 dark:text-green-400"></i> Local 16kHz Background Speaker Suppression |
| </p> |
| </div> |
| </div> |
|
|
| <div class="flex items-center gap-4 flex-wrap justify-center"> |
| <label class="flex items-center gap-2 cursor-pointer group bg-white dark:bg-slate-800 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm transition-colors duration-200" title="Processes Left and Right channels independently"> |
| <input type="checkbox" id="stereoCheck" class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-primary-500 focus:ring-primary-500 cursor-pointer"> |
| <span class="text-sm font-medium text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">Preserve Stereo</span> |
| </label> |
|
|
| <label class="flex items-center gap-2 cursor-pointer group bg-white dark:bg-slate-800 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm transition-colors duration-200"> |
| <input type="checkbox" id="normalizeCheck" checked class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-primary-500 focus:ring-primary-500 cursor-pointer"> |
| <span class="text-sm font-medium text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">Auto-Normalize</span> |
| </label> |
|
|
| <div class="flex items-center bg-slate-100 dark:bg-slate-900 rounded-lg p-1 border border-slate-200 dark:border-slate-700 shadow-sm transition-colors duration-200"> |
| <button id="formatWav" class="px-3 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all">WAV</button> |
| <button id="formatMp3" class="px-3 py-1.5 text-xs font-bold rounded-md bg-primary-600 text-white transition-all shadow-sm">MP3</button> |
| </div> |
|
|
| <button id="themeToggle" class="p-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 hover:text-primary-500 transition-colors shadow-sm"> |
| <i data-lucide="sun" class="w-5 h-5 hidden dark:block text-yellow-400"></i> |
| <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i> |
| </button> |
| </div> |
| </header> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> |
| |
| <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4"> |
| <div class="flex justify-between items-center"> |
| <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="cpu" class="w-4 h-4 text-primary-500"></i> Hush Intensity</label> |
| <div class="flex items-center gap-1.5"> |
| <button id="resetNoise" title="Reset to Default" class="p-1 text-slate-400 hover:text-primary-500 dark:hover:text-primary-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button> |
| <span id="noiseLevelValue" class="text-sm text-primary-600 dark:text-primary-400 font-bold bg-primary-50 dark:bg-primary-900/30 px-2 py-0.5 rounded border border-primary-100 dark:border-primary-800/50">100%</span> |
| </div> |
| </div> |
| <input type="range" id="noiseLevel" min="0" max="100" value="100" class="w-full text-primary-500"> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4"> |
| <div class="flex justify-between items-center"> |
| <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="speaker" class="w-4 h-4 text-emerald-500"></i> Bass EQ</label> |
| <div class="flex items-center gap-1.5"> |
| <button id="resetBass" title="Reset to 0dB" class="p-1 text-slate-400 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button> |
| <span id="bassVal" class="text-sm text-emerald-600 dark:text-emerald-400 font-bold bg-emerald-50 dark:bg-emerald-900/30 px-2 py-0.5 rounded border border-emerald-100 dark:border-emerald-800/50">0dB</span> |
| </div> |
| </div> |
| <input type="range" id="eqBass" min="-12" max="12" value="0" step="0.5" class="w-full text-emerald-500"> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4"> |
| <div class="flex justify-between items-center"> |
| <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="audio-waveform" class="w-4 h-4 text-amber-500"></i> Treble EQ</label> |
| <div class="flex items-center gap-1.5"> |
| <button id="resetTreble" title="Reset to 0dB" class="p-1 text-slate-400 hover:text-amber-500 dark:hover:text-amber-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button> |
| <span id="trebleVal" class="text-sm text-amber-600 dark:text-amber-400 font-bold bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded border border-amber-100 dark:border-amber-800/50">0dB</span> |
| </div> |
| </div> |
| <input type="range" id="eqTreble" min="-12" max="12" value="0" step="0.5" class="w-full text-amber-500"> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-slate-800/80 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-4"> |
| <div class="flex justify-between items-center"> |
| <label class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider flex items-center gap-2"><i data-lucide="volume-2" class="w-4 h-4 text-rose-500"></i> Output Gain</label> |
| <div class="flex items-center gap-1.5"> |
| <button id="resetGain" title="Reset to 0dB" class="p-1 text-slate-400 hover:text-rose-500 dark:hover:text-rose-400 transition-colors opacity-60 hover:opacity-100 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700/50"><i data-lucide="rotate-ccw" class="w-3 h-3"></i></button> |
| <span id="gainVal" class="text-sm text-rose-600 dark:text-rose-400 font-bold bg-rose-50 dark:bg-rose-900/30 px-2 py-0.5 rounded border border-rose-100 dark:border-rose-800/50">0dB</span> |
| </div> |
| </div> |
| <input type="range" id="eqGain" min="-12" max="12" value="0" step="0.5" class="w-full text-rose-500"> |
| </div> |
| </div> |
|
|
| <main class="grid lg:grid-cols-[300px_1fr] gap-6"> |
| <aside class="flex flex-col gap-4"> |
| <div class="flex flex-col gap-2"> |
| <div id="dropzone" class="bg-white dark:bg-transparent border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-2xl p-6 text-center cursor-pointer transition-all duration-200 hover:border-primary-500 dark:hover:border-primary-500 dark:hover:bg-slate-800/80 group"> |
| <input type="file" id="fileInput" accept="audio/*" multiple class="hidden"> |
| <i data-lucide="file-audio" id="dropzoneIcon" class="w-8 h-8 mx-auto text-slate-400 group-hover:text-primary-500 transition-colors mb-2"></i> |
| <h3 class="font-semibold text-slate-700 dark:text-white text-sm">Add Audio Files</h3> |
| <p class="text-slate-500 text-xs mt-1">Drag & Drop or Click</p> |
| </div> |
| |
| <div id="dropzoneActions" class="hidden flex justify-between items-center px-2 transition-all duration-200"> |
| <span class="text-xs text-emerald-600 dark:text-emerald-400 font-medium flex items-center gap-1"><i data-lucide="check-circle-2" class="w-3 h-3"></i> <span id="dropzoneIndicatorText">Audio added</span></span> |
| <button id="clearAllBtn" class="text-xs text-red-500 hover:text-red-600 dark:hover:text-red-400 font-medium flex items-center gap-1 transition-colors cursor-pointer z-10"><i data-lucide="trash-2" class="w-3 h-3"></i> Clear All</button> |
| </div> |
| </div> |
|
|
| <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 flex-1 flex flex-col overflow-hidden max-h-[600px] shadow-sm"> |
| <div class="p-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-800/90"> |
| <h3 class="font-semibold text-slate-800 dark:text-white flex items-center gap-2"><i data-lucide="list-video" class="w-4 h-4 text-slate-500"></i> Batch Queue</h3> |
| <span id="queueCount" class="bg-slate-200 dark:bg-slate-700 text-xs px-2 py-0.5 rounded-full text-slate-600 dark:text-slate-300 font-medium">0 files</span> |
| </div> |
| <div id="fileList" class="overflow-y-auto flex-1 p-2 space-y-1"> |
| <div class="p-4 text-center text-slate-400 dark:text-slate-500 text-sm italic empty-state">Queue is empty.</div> |
| </div> |
| |
| <div class="p-4 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/90 space-y-3"> |
| <button id="processBtn" disabled class="w-full flex items-center justify-center gap-2 bg-primary-600 disabled:bg-slate-200 dark:disabled:bg-slate-700 disabled:text-slate-400 dark:disabled:text-slate-500 hover:bg-primary-500 text-white px-4 py-2.5 rounded-xl font-medium transition-all shadow-sm disabled:shadow-none"> |
| <i data-lucide="cpu" class="w-4 h-4"></i> Process |
| </button> |
| <button id="downloadZipBtn" class="hidden w-full flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2.5 rounded-xl font-medium transition-all shadow-[0_0_15px_rgba(16,185,129,0.2)]"> |
| <i data-lucide="archive" class="w-4 h-4"></i> Download ZIP |
| </button> |
| </div> |
| </div> |
| |
| <p class="text-[10px] text-center text-slate-400 dark:text-slate-500 font-mono mt-[-5px]"> |
| Shortcuts: [Space] Play, [←/→] Seek, [Del] Remove |
| </p> |
| </aside> |
|
|
| |
| <section class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 flex flex-col overflow-hidden min-h-[400px] shadow-sm"> |
| |
| <div id="workspaceEmpty" class="flex-1 flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 p-10"> |
| <i data-lucide="activity" class="w-16 h-16 text-slate-300 dark:text-slate-700 mb-4"></i> |
| <p class="text-lg text-slate-500 dark:text-slate-400">Select a file from the queue to edit</p> |
| </div> |
|
|
| <div id="workspaceActive" class="hidden flex-1 flex flex-col"> |
| <div class="p-5 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900/40"> |
| <h2 id="activeFileName" class="text-xl font-bold text-slate-800 dark:text-white truncate max-w-[50%]">filename.wav</h2> |
| |
| <div id="abToggleContainer" class="bg-slate-200 dark:bg-slate-900 p-1 rounded-lg border border-slate-300 dark:border-slate-700 flex items-center shadow-inner"> |
| <button id="btnOriginal" class="px-4 py-1.5 text-xs font-bold rounded-md bg-white dark:bg-slate-700 text-slate-800 dark:text-white transition-all shadow-sm">Original</button> |
| <button id="btnPreview" class="px-4 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all" title="Hear AI noise reduction applied in real-time">Live Preview</button> |
| <button id="btnCleaned" disabled class="px-4 py-1.5 text-xs font-bold rounded-md text-slate-400 dark:text-slate-600 cursor-not-allowed transition-all" title="Must Process first to unlock the final baked file">Processed</button> |
| </div> |
| </div> |
|
|
| <div class="flex-1 flex flex-col justify-center p-6 bg-slate-50 dark:bg-slate-900/20 relative"> |
| <div class="absolute top-4 right-6 flex items-center gap-2 bg-white/90 dark:bg-slate-900/80 px-2 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 z-10 shadow-sm backdrop-blur"> |
| <i data-lucide="zoom-out" class="w-3 h-3 text-slate-400 dark:text-slate-500"></i> |
| <input type="range" id="zoomSlider" min="0" max="200" value="0" title="Adjust Zoom (0 = Fit)" class="w-24 accent-primary-500 h-1 bg-slate-200 dark:bg-slate-700 rounded-lg cursor-pointer"> |
| <i data-lucide="zoom-in" class="w-3 h-3 text-slate-400 dark:text-slate-500"></i> |
| </div> |
|
|
| <div class="w-full relative"> |
| <div id="waveform"></div> |
| <div id="spectrogram"></div> |
| </div> |
|
|
| <div id="timeDisplay" class="absolute bottom-4 right-6 text-xs font-mono text-slate-500 dark:text-slate-400 bg-white/90 dark:bg-slate-900/80 px-2 py-1 rounded shadow-sm border border-slate-200 dark:border-slate-700 z-10">00:00 / 00:00</div> |
| </div> |
|
|
| <div class="p-5 border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/80"> |
| <div class="flex flex-col md:flex-row gap-6 items-center justify-between"> |
| |
| <div class="flex items-center gap-3"> |
| <button id="playBtn" class="w-14 h-14 flex items-center justify-center bg-primary-600 hover:bg-primary-500 text-white rounded-full transition-all shadow-lg hover:scale-105"> |
| <span id="iconPlayWrap" class="flex items-center justify-center ml-1"><i data-lucide="play" class="w-6 h-6 fill-current"></i></span> |
| <span id="iconPauseWrap" class="hidden items-center justify-center"><i data-lucide="pause" class="w-6 h-6 fill-current"></i></span> |
| </button> |
| </div> |
|
|
| <div class="flex items-center gap-2 flex-1 max-w-xl"> |
| <i data-lucide="scissors" class="w-4 h-4 text-slate-400 dark:text-slate-500"></i> |
| <div class="flex items-center gap-2 bg-slate-50 dark:bg-slate-900 p-2 rounded-lg border border-slate-200 dark:border-slate-700 flex-1"> |
| <div class="flex-1 flex flex-col"> |
| <label class="text-[10px] font-semibold text-slate-500 uppercase ml-1">Start (sec)</label> |
| <div class="flex gap-1 mt-0.5"> |
| <input type="number" id="trimStart" step="0.1" min="0" value="0.0" class="w-full bg-white dark:bg-slate-800 text-slate-900 dark:text-white text-sm px-2 py-1 rounded border border-slate-200 dark:border-slate-600 focus:border-primary-500 outline-none font-mono"> |
| <button id="setStartBtn" title="Set to current playhead" class="px-2 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 rounded text-slate-600 dark:text-slate-300 transition-colors"><i data-lucide="map-pin" class="w-3 h-3"></i></button> |
| </div> |
| </div> |
| <div class="w-4 border-t border-slate-300 dark:border-slate-600"></div> |
| <div class="flex-1 flex flex-col"> |
| <label class="text-[10px] font-semibold text-slate-500 uppercase ml-1">End (sec)</label> |
| <div class="flex gap-1 mt-0.5"> |
| <input type="number" id="trimEnd" step="0.1" min="0" value="0.0" class="w-full bg-white dark:bg-slate-800 text-slate-900 dark:text-white text-sm px-2 py-1 rounded border border-slate-200 dark:border-slate-600 focus:border-primary-500 outline-none font-mono"> |
| <button id="setEndBtn" title="Set to current playhead" class="px-2 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 rounded text-slate-600 dark:text-slate-300 transition-colors"><i data-lucide="map-pin" class="w-3 h-3"></i></button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <button id="downloadSingleBtn" class="hidden flex items-center gap-2 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-800 dark:text-white px-4 py-3 rounded-lg text-sm font-medium transition-all border border-slate-300 dark:border-transparent"> |
| <i data-lucide="download" class="w-4 h-4"></i> Save |
| </button> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
|
|
| </section> |
| </main> |
| </div> |
|
|
| |
| <script type="module"> |
| import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'; |
| import Spectrogram from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/spectrogram.esm.js'; |
| |
| |
| if (typeof window.SharedArrayBuffer === 'undefined') { window.SharedArrayBuffer = window.ArrayBuffer; } |
| const originalFetch = window.fetch; |
| window.fetch = async function(...args) { |
| let request = args[0]; |
| let reqUrl = typeof request === 'string' ? request : (request && request.url); |
| if (reqUrl && typeof reqUrl === 'string') { |
| let newUrl = null; |
| if (reqUrl.includes('df_bg.wasm')) newUrl = 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main/df_bg.wasm'; |
| else if (reqUrl.includes('DeepFilterNet3_onnx.tar.gz')) newUrl = 'https://huggingface.co/weya-ai/hush/resolve/main/onnx/advanced_dfnet16k_model_best_onnx.tar.gz'; |
| if (newUrl) args[0] = request instanceof Request ? new Request(newUrl, request) : newUrl; |
| } |
| return originalFetch.apply(this, args); |
| }; |
| |
| |
| const state = { |
| files: [], activeId: null, |
| settings: { format: 'mp3', normalize: true, stereo: false, noiseLevel: 100, bass: 0, treble: 0, gain: 0 }, |
| |
| ProcessorClass: null, |
| assetConfigObj: { |
| cdnUrl: 'https://huggingface.co/weya-ai/hush/resolve/main/onnx', |
| modelUrl: 'https://huggingface.co/weya-ai/hush/resolve/main/onnx/advanced_dfnet16k_model_best_onnx.tar.gz', |
| wasmUrl: 'https://huggingface.co/trysem/DeepFilterNet3/resolve/main/df_bg.wasm' |
| }, |
| |
| dfNetProc: null, wavesurfer: null, playbackMode: 'original', |
| liveCtx: null, mediaNode: null, liveNodes: {} |
| }; |
| |
| |
| lucide.createIcons(); |
| const UI = { |
| dropzone: document.getElementById('dropzone'), fileInput: document.getElementById('fileInput'), |
| dropzoneActions: document.getElementById('dropzoneActions'), dropzoneIndicatorText: document.getElementById('dropzoneIndicatorText'), |
| clearAllBtn: document.getElementById('clearAllBtn'), dropzoneIcon: document.getElementById('dropzoneIcon'), |
| fileList: document.getElementById('fileList'), queueCount: document.getElementById('queueCount'), |
| processBtn: document.getElementById('processBtn'), downloadZipBtn: document.getElementById('downloadZipBtn'), |
| workspaceEmpty: document.getElementById('workspaceEmpty'), workspaceActive: document.getElementById('workspaceActive'), |
| activeFileName: document.getElementById('activeFileName'), playBtn: document.getElementById('playBtn'), |
| iconPlayWrap: document.getElementById('iconPlayWrap'), iconPauseWrap: document.getElementById('iconPauseWrap'), |
| timeDisplay: document.getElementById('timeDisplay'), trimStart: document.getElementById('trimStart'), |
| trimEnd: document.getElementById('trimEnd'), btnOriginal: document.getElementById('btnOriginal'), |
| btnPreview: document.getElementById('btnPreview'), btnCleaned: document.getElementById('btnCleaned'), |
| downloadSingleBtn: document.getElementById('downloadSingleBtn'), themeToggle: document.getElementById('themeToggle'), |
| zoomSlider: document.getElementById('zoomSlider') |
| }; |
| |
| function updateProcessButtonText() { |
| const count = state.files.length; |
| if (count === 0) { |
| UI.processBtn.innerHTML = `<i data-lucide="cpu" class="w-4 h-4"></i> Process`; |
| UI.processBtn.disabled = true; |
| } else if (count === 1) { |
| UI.processBtn.innerHTML = `<i data-lucide="cpu" class="w-4 h-4"></i> Process`; |
| UI.processBtn.disabled = false; |
| } else { |
| UI.processBtn.innerHTML = `<i data-lucide="cpu" class="w-4 h-4"></i> Start Batch Processing`; |
| UI.processBtn.disabled = false; |
| } |
| lucide.createIcons(); |
| } |
| |
| function setProcessButtonState(isProcessing, progressStr = '') { |
| if (isProcessing) { |
| UI.processBtn.disabled = true; |
| UI.processBtn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 spinner"></i> ${progressStr}`; |
| } else { |
| updateProcessButtonText(); |
| } |
| lucide.createIcons(); |
| } |
| |
| |
| window.addEventListener('DOMContentLoaded', async () => { |
| setProcessButtonState(true, "Loading Hush AI..."); |
| try { |
| const dfModule = await import('https://esm.sh/deepfilternet3-noise-filter@1.2.1'); |
| state.ProcessorClass = dfModule.DeepFilterNet3Core || dfModule.DeepFilterNoiseFilterProcessor; |
| |
| state.dfNetProc = new state.ProcessorClass({ |
| sampleRate: 16000, noiseReductionLevel: state.settings.noiseLevel, assetConfig: state.assetConfigObj |
| }); |
| |
| await state.dfNetProc.initialize(); |
| setProcessButtonState(false); |
| } catch (err) { |
| console.error(err); |
| UI.processBtn.innerHTML = `<i data-lucide="alert-triangle" class="w-4 h-4"></i> AI Error`; |
| lucide.createIcons(); |
| } |
| }); |
| |
| |
| UI.themeToggle.onclick = () => { document.documentElement.classList.toggle('dark'); }; |
| |
| document.getElementById('stereoCheck').addEventListener('change', (e) => state.settings.stereo = e.target.checked); |
| document.getElementById('normalizeCheck').addEventListener('change', (e) => state.settings.normalize = e.target.checked); |
| |
| const updateEqLabel = (id, val) => { const v = parseFloat(val); document.getElementById(id).textContent = (v > 0 ? '+' : '') + v + 'dB'; }; |
| |
| document.getElementById('noiseLevel').addEventListener('input', (e) => { |
| state.settings.noiseLevel = parseInt(e.target.value, 10); |
| document.getElementById('noiseLevelValue').textContent = e.target.value + '%'; |
| if (state.dfNetProc && state.liveCtx) state.dfNetProc.noiseReductionLevel = state.settings.noiseLevel; |
| }); |
| document.getElementById('eqBass').addEventListener('input', (e) => { |
| state.settings.bass = parseFloat(e.target.value); updateEqLabel('bassVal', e.target.value); |
| if(state.liveNodes.bass) state.liveNodes.bass.gain.value = state.settings.bass; |
| }); |
| document.getElementById('eqTreble').addEventListener('input', (e) => { |
| state.settings.treble = parseFloat(e.target.value); updateEqLabel('trebleVal', e.target.value); |
| if(state.liveNodes.treble) state.liveNodes.treble.gain.value = state.settings.treble; |
| }); |
| document.getElementById('eqGain').addEventListener('input', (e) => { |
| state.settings.gain = parseFloat(e.target.value); updateEqLabel('gainVal', e.target.value); |
| if(state.liveNodes.gain) state.liveNodes.gain.gain.value = Math.pow(10, state.settings.gain / 20); |
| }); |
| |
| document.getElementById('resetNoise').onclick = () => { |
| state.settings.noiseLevel = 100; document.getElementById('noiseLevel').value = 100; |
| document.getElementById('noiseLevelValue').textContent = '100%'; |
| if (state.dfNetProc && state.liveCtx) state.dfNetProc.noiseReductionLevel = 100; |
| }; |
| document.getElementById('resetBass').onclick = () => { |
| state.settings.bass = 0; document.getElementById('eqBass').value = 0; updateEqLabel('bassVal', 0); |
| if(state.liveNodes.bass) state.liveNodes.bass.gain.value = 0; |
| }; |
| document.getElementById('resetTreble').onclick = () => { |
| state.settings.treble = 0; document.getElementById('eqTreble').value = 0; updateEqLabel('trebleVal', 0); |
| if(state.liveNodes.treble) state.liveNodes.treble.gain.value = 0; |
| }; |
| document.getElementById('resetGain').onclick = () => { |
| state.settings.gain = 0; document.getElementById('eqGain').value = 0; updateEqLabel('gainVal', 0); |
| if(state.liveNodes.gain) state.liveNodes.gain.gain.value = 1; |
| }; |
| |
| const formatWav = document.getElementById('formatWav'); |
| const formatMp3 = document.getElementById('formatMp3'); |
| formatWav.onclick = () => { state.settings.format = 'wav'; formatWav.className = 'px-3 py-1.5 text-xs font-bold rounded-md bg-primary-600 text-white transition-all shadow-sm'; formatMp3.className = 'px-3 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all'; }; |
| formatMp3.onclick = () => { state.settings.format = 'mp3'; formatMp3.className = 'px-3 py-1.5 text-xs font-bold rounded-md bg-primary-600 text-white transition-all shadow-sm'; formatWav.className = 'px-3 py-1.5 text-xs font-bold rounded-md text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white transition-all'; }; |
| |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => UI.dropzone.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); }, false)); |
| ['dragenter', 'dragover'].forEach(e => UI.dropzone.addEventListener(e, () => UI.dropzone.classList.add('drag-active'), false)); |
| ['dragleave', 'drop'].forEach(e => UI.dropzone.addEventListener(e, () => UI.dropzone.classList.remove('drag-active'), false)); |
| UI.dropzone.addEventListener('drop', (e) => handleFiles(e.dataTransfer.files)); |
| UI.dropzone.addEventListener('click', () => UI.fileInput.click()); |
| UI.fileInput.addEventListener('change', (e) => handleFiles(e.target.files)); |
| |
| UI.clearAllBtn.onclick = () => { |
| state.files = []; state.activeId = null; |
| UI.workspaceActive.classList.add('hidden'); UI.workspaceEmpty.classList.remove('hidden'); |
| if (state.wavesurfer) { state.wavesurfer.destroy(); state.wavesurfer = null; } |
| UI.fileInput.value = ''; renderQueue(); teardownLivePipeline(); |
| }; |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; |
| if (!state.activeId) return; |
| switch(e.code) { |
| case 'Space': e.preventDefault(); if (state.wavesurfer) state.wavesurfer.playPause(); break; |
| case 'ArrowLeft': e.preventDefault(); if (state.wavesurfer) state.wavesurfer.skip(-5); break; |
| case 'ArrowRight': e.preventDefault(); if (state.wavesurfer) state.wavesurfer.skip(5); break; |
| case 'Delete': case 'Backspace': e.preventDefault(); removeFile(state.activeId); break; |
| } |
| }); |
| |
| |
| function handleFiles(files) { |
| let added = false; |
| for (let f of files) { |
| const ext = f.name.substring(f.name.lastIndexOf('.')).toLowerCase(); |
| const validExts = ['.mp3', '.wav', '.ogg', '.aac', '.m4a', '.flac', '.wma', '.aiff', '.mp4']; |
| if (!f.type.startsWith('audio/') && !f.type.startsWith('video/') && !validExts.includes(ext)) { |
| console.warn('Skipped non-audio file:', f.name); |
| continue; |
| } |
| const id = 'f_' + Date.now() + Math.random().toString(36).substr(2, 5); |
| state.files.push({ |
| id, file: f, name: f.name, size: f.size, originalUrl: URL.createObjectURL(f), |
| cleanedUrl: null, status: 'pending', duration: 0, startTrim: 0, endTrim: 0 |
| }); |
| added = true; |
| } |
| if (added) { |
| renderQueue(); |
| if (!state.activeId && state.files.length > 0) selectFile(state.files[0].id); |
| } |
| } |
| |
| function renderQueue() { |
| UI.fileList.innerHTML = ''; |
| UI.queueCount.textContent = `${state.files.length} file${state.files.length !== 1 ? 's' : ''}`; |
| |
| if (state.files.length > 0) { |
| UI.dropzoneActions.classList.remove('hidden'); |
| UI.dropzoneIndicatorText.textContent = `${state.files.length} file(s) ready`; |
| UI.dropzone.classList.replace('border-slate-300', 'border-primary-400'); |
| UI.dropzone.classList.replace('dark:border-slate-600', 'dark:border-primary-500'); |
| UI.dropzone.classList.add('bg-primary-50/50', 'dark:bg-primary-900/20'); |
| UI.dropzoneIcon.classList.replace('text-slate-400', 'text-primary-500'); |
| } else { |
| UI.dropzoneActions.classList.add('hidden'); |
| UI.dropzone.classList.replace('border-primary-400', 'border-slate-300'); |
| UI.dropzone.classList.replace('dark:border-primary-500', 'dark:border-slate-600'); |
| UI.dropzone.classList.remove('bg-primary-50/50', 'dark:bg-primary-900/20'); |
| UI.dropzoneIcon.classList.replace('text-primary-500', 'text-slate-400'); |
| UI.fileList.innerHTML = '<div class="p-4 text-center text-slate-400 dark:text-slate-500 text-sm italic empty-state">Queue is empty.</div>'; |
| } |
| |
| state.files.forEach(item => { |
| const el = document.createElement('div'); |
| const isActive = item.id === state.activeId; |
| let icon = '<i data-lucide="clock" class="w-4 h-4 text-slate-400"></i>'; |
| if(item.status === 'processing') icon = '<i data-lucide="loader-2" class="w-4 h-4 text-primary-500 spinner"></i>'; |
| if(item.status === 'done') icon = '<i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500 dark:text-emerald-400"></i>'; |
| |
| el.className = `p-3 rounded-lg flex items-center justify-between cursor-pointer border transition-all ${isActive ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-500/50' : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-500'}`; |
| el.innerHTML = ` |
| <div class="flex items-center gap-3 overflow-hidden">${icon}<span class="text-sm truncate text-slate-700 dark:text-slate-200 ${isActive ? 'font-semibold' : ''}">${item.name}</span></div> |
| <button class="p-1 text-slate-400 hover:text-red-500 dark:hover:text-red-400 remove-btn transition-colors" data-id="${item.id}"><i data-lucide="x" class="w-4 h-4"></i></button> |
| `; |
| el.onclick = (e) => { if(!e.target.closest('.remove-btn')) selectFile(item.id); }; |
| el.querySelector('.remove-btn').onclick = () => removeFile(item.id); |
| UI.fileList.appendChild(el); |
| }); |
| |
| updateProcessButtonText(); |
| const doneCount = state.files.filter(f => f.status === 'done').length; |
| UI.downloadZipBtn.classList.toggle('hidden', doneCount < 1); |
| } |
| |
| function removeFile(id) { |
| state.files = state.files.filter(f => f.id !== id); |
| if (state.activeId === id) { |
| state.activeId = null; |
| UI.workspaceActive.classList.add('hidden'); |
| UI.workspaceEmpty.classList.remove('hidden'); |
| if (state.wavesurfer) state.wavesurfer.destroy(); |
| state.wavesurfer = null; |
| teardownLivePipeline(); |
| } |
| renderQueue(); |
| } |
| |
| |
| async function selectFile(id) { |
| state.activeId = id; renderQueue(); |
| const item = state.files.find(f => f.id === id); |
| |
| UI.workspaceEmpty.classList.add('hidden'); |
| UI.workspaceActive.classList.remove('hidden'); |
| UI.activeFileName.textContent = item.name; |
| |
| if (item.status === 'done') { |
| UI.btnPreview.classList.add('hidden'); |
| |
| UI.btnCleaned.classList.remove('opacity-50', 'cursor-not-allowed', 'text-slate-400', 'dark:text-slate-600'); |
| UI.btnCleaned.classList.add('text-slate-500', 'dark:text-slate-400', 'hover:text-slate-800', 'dark:hover:text-white'); |
| UI.btnCleaned.disabled = false; |
| UI.btnCleaned.title = "Play the final baked output"; |
| |
| UI.downloadSingleBtn.classList.remove('hidden'); |
| setPlaybackMode('cleaned', item); |
| } else { |
| UI.btnPreview.classList.remove('hidden'); |
| |
| UI.btnCleaned.classList.remove('text-slate-500', 'dark:text-slate-400', 'hover:text-slate-800', 'dark:hover:text-white'); |
| UI.btnCleaned.classList.add('opacity-50', 'cursor-not-allowed', 'text-slate-400', 'dark:text-slate-600'); |
| UI.btnCleaned.disabled = true; |
| UI.btnCleaned.title = "Must Process first to unlock the final baked file"; |
| |
| UI.downloadSingleBtn.classList.add('hidden'); |
| setPlaybackMode('original', item); |
| } |
| |
| initWavesurfer(item); |
| } |
| |
| function initWavesurfer(item) { |
| if (state.wavesurfer) state.wavesurfer.destroy(); |
| |
| setProcessButtonState(true, "Loading Audio..."); |
| |
| const isMassive = item.size > 15 * 1024 * 1024; |
| const plugins = []; |
| const specContainer = document.getElementById('spectrogram'); |
| |
| if (!isMassive) { |
| specContainer.innerHTML = ''; |
| plugins.push( |
| Spectrogram.create({ |
| container: '#spectrogram', |
| labels: true, |
| height: 80, |
| splitChannels: false |
| }) |
| ); |
| } else { |
| specContainer.innerHTML = '<div class="flex items-center justify-center h-20 text-xs text-slate-500 bg-slate-900/10 dark:bg-slate-900/40 border border-dashed border-slate-300 dark:border-slate-700 rounded-lg mx-2 mb-2">Spectrogram disabled for massive files to prevent browser memory crash.</div>'; |
| } |
| |
| state.wavesurfer = WaveSurfer.create({ |
| container: '#waveform', waveColor: '#94a3b8', progressColor: '#8b5cf6', |
| cursorColor: '#a78bfa', barWidth: 2, barGap: 1, barRadius: 2, height: 100, normalize: true, |
| plugins: plugins |
| }); |
| |
| const loadUrl = state.playbackMode === 'cleaned' ? item.cleanedUrl : item.originalUrl; |
| state.wavesurfer.load(loadUrl); |
| |
| UI.zoomSlider.value = 0; |
| |
| state.wavesurfer.on('ready', () => { |
| setProcessButtonState(false); |
| const duration = state.wavesurfer.getDuration(); |
| if (item.duration === 0) { item.duration = duration; item.endTrim = duration; } |
| |
| UI.trimStart.max = duration; UI.trimEnd.max = duration; |
| UI.trimStart.value = item.startTrim.toFixed(1); UI.trimEnd.value = item.endTrim.toFixed(1); |
| |
| updateTimeDisplay(); |
| UI.iconPlayWrap.classList.replace('hidden', 'flex'); |
| UI.iconPauseWrap.classList.replace('flex', 'hidden'); |
| }); |
| |
| state.wavesurfer.on('audioprocess', updateTimeDisplay); |
| state.wavesurfer.on('seek', updateTimeDisplay); |
| state.wavesurfer.on('play', () => { UI.iconPlayWrap.classList.replace('flex', 'hidden'); UI.iconPauseWrap.classList.replace('hidden', 'flex'); }); |
| state.wavesurfer.on('pause', () => { UI.iconPauseWrap.classList.replace('flex', 'hidden'); UI.iconPlayWrap.classList.replace('hidden', 'flex'); }); |
| } |
| |
| UI.zoomSlider.addEventListener('input', (e) => { |
| if (state.wavesurfer) state.wavesurfer.zoom(Number(e.target.value)); |
| }); |
| |
| function updateTimeDisplay() { |
| if(!state.wavesurfer) return; |
| const cur = state.wavesurfer.getCurrentTime(), tot = state.wavesurfer.getDuration() || 0; |
| UI.timeDisplay.textContent = `${formatTime(cur)} / ${formatTime(tot)}`; |
| |
| const item = state.files.find(f => f.id === state.activeId); |
| if(item && item.status === 'pending') { |
| if (cur > item.endTrim && state.wavesurfer.isPlaying()) { |
| state.wavesurfer.pause(); state.wavesurfer.setTime(item.startTrim); |
| } |
| } |
| } |
| function formatTime(sec) { const m = Math.floor(sec / 60), s = Math.floor(sec % 60); return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; } |
| |
| UI.playBtn.onclick = () => state.wavesurfer && state.wavesurfer.playPause(); |
| |
| document.getElementById('setStartBtn').onclick = () => { if(state.wavesurfer){ UI.trimStart.value = state.wavesurfer.getCurrentTime().toFixed(1); saveTrim(); }}; |
| document.getElementById('setEndBtn').onclick = () => { if(state.wavesurfer){ UI.trimEnd.value = state.wavesurfer.getCurrentTime().toFixed(1); saveTrim(); }}; |
| UI.trimStart.onchange = saveTrim; UI.trimEnd.onchange = saveTrim; |
| |
| function saveTrim() { |
| const item = state.files.find(f => f.id === state.activeId); |
| if(!item || item.status !== 'pending') return; |
| let start = parseFloat(UI.trimStart.value) || 0, end = parseFloat(UI.trimEnd.value) || item.duration; |
| if(start < 0) start = 0; if(end > item.duration) end = item.duration; if(start >= end) start = end - 0.1; |
| UI.trimStart.value = start.toFixed(1); UI.trimEnd.value = end.toFixed(1); |
| item.startTrim = start; item.endTrim = end; |
| } |
| |
| |
| async function setupLivePipeline() { |
| if (!state.liveCtx) { |
| state.liveCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 }); |
| state.liveNodes = {}; |
| } |
| if (state.liveCtx.state === 'suspended') await state.liveCtx.resume(); |
| |
| const mediaElt = state.wavesurfer.getMediaElement(); |
| if (!mediaElt.audioNodeMap) { |
| state.mediaNode = state.liveCtx.createMediaElementSource(mediaElt); |
| mediaElt.audioNodeMap = state.mediaNode; |
| } else { |
| state.mediaNode = mediaElt.audioNodeMap; |
| } |
| |
| state.mediaNode.disconnect(); |
| if(state.liveNodes.dfNode) state.liveNodes.dfNode.disconnect(); |
| if(state.liveNodes.dcBlock) state.liveNodes.dcBlock.disconnect(); |
| if(state.liveNodes.bass) state.liveNodes.bass.disconnect(); |
| if(state.liveNodes.treble) state.liveNodes.treble.disconnect(); |
| if(state.liveNodes.gain) state.liveNodes.gain.disconnect(); |
| |
| state.liveNodes.dfNode = await state.dfNetProc.createAudioWorkletNode(state.liveCtx); |
| |
| |
| state.liveNodes.dcBlock = state.liveCtx.createBiquadFilter(); |
| state.liveNodes.dcBlock.type = 'highpass'; |
| state.liveNodes.dcBlock.frequency.value = 40; |
| |
| state.liveNodes.bass = state.liveCtx.createBiquadFilter(); state.liveNodes.bass.type = 'lowshelf'; state.liveNodes.bass.frequency.value = 250; state.liveNodes.bass.gain.value = state.settings.bass; |
| state.liveNodes.treble = state.liveCtx.createBiquadFilter(); state.liveNodes.treble.type = 'highshelf'; state.liveNodes.treble.frequency.value = 4000; state.liveNodes.treble.gain.value = state.settings.treble; |
| state.liveNodes.gain = state.liveCtx.createGain(); state.liveNodes.gain.gain.value = Math.pow(10, state.settings.gain / 20); |
| |
| state.mediaNode.connect(state.liveNodes.dfNode); |
| state.liveNodes.dfNode.connect(state.liveNodes.dcBlock); |
| state.liveNodes.dcBlock.connect(state.liveNodes.bass); |
| state.liveNodes.bass.connect(state.liveNodes.treble); |
| state.liveNodes.treble.connect(state.liveNodes.gain); |
| state.liveNodes.gain.connect(state.liveCtx.destination); |
| } |
| |
| function teardownLivePipeline() { |
| if (state.mediaNode && state.liveCtx) { |
| state.mediaNode.disconnect(); |
| state.mediaNode.connect(state.liveCtx.destination); |
| } |
| } |
| |
| |
| UI.btnOriginal.onclick = () => setPlaybackMode('original', state.files.find(f=>f.id===state.activeId)); |
| UI.btnPreview.onclick = () => setPlaybackMode('preview', state.files.find(f=>f.id===state.activeId)); |
| UI.btnCleaned.onclick = () => { if(!UI.btnCleaned.disabled) setPlaybackMode('cleaned', state.files.find(f=>f.id===state.activeId)); }; |
| |
| async function setPlaybackMode(mode, item) { |
| if (!item || !state.wavesurfer) return; |
| state.playbackMode = mode; |
| |
| const baseClass = 'px-4 py-1.5 text-xs font-bold rounded-md transition-all shadow-sm '; |
| const activeClass = 'bg-white dark:bg-slate-700 text-slate-800 dark:text-white'; |
| const inactiveClass = 'text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white'; |
| |
| UI.btnOriginal.className = baseClass + (mode === 'original' ? activeClass : inactiveClass); |
| UI.btnPreview.className = baseClass + (mode === 'preview' ? 'bg-fuchsia-600 text-white' : inactiveClass); |
| |
| if (item.status === 'done') { |
| UI.btnCleaned.className = baseClass + (mode === 'cleaned' ? 'bg-primary-600 text-white' : inactiveClass); |
| } |
| |
| if (mode === 'original') state.wavesurfer.setOptions({ waveColor: '#94a3b8', progressColor: '#cbd5e1' }); |
| else if (mode === 'preview') state.wavesurfer.setOptions({ waveColor: '#d946ef', progressColor: '#fdf4ff' }); |
| else if (mode === 'cleaned') state.wavesurfer.setOptions({ waveColor: '#4c1d95', progressColor: '#8b5cf6' }); |
| |
| const curTime = state.wavesurfer.getCurrentTime(); |
| const wasPlaying = state.wavesurfer.isPlaying(); |
| if (wasPlaying) state.wavesurfer.pause(); |
| |
| try { |
| if (mode === 'preview') { |
| await setupLivePipeline(); |
| if(state.wavesurfer.getMediaElement().src !== item.originalUrl) await state.wavesurfer.load(item.originalUrl); |
| } else { |
| teardownLivePipeline(); |
| const targetUrl = mode === 'cleaned' ? item.cleanedUrl : item.originalUrl; |
| if(state.wavesurfer.getMediaElement().src !== targetUrl) await state.wavesurfer.load(targetUrl); |
| } |
| state.wavesurfer.setTime(curTime); |
| if(wasPlaying) state.wavesurfer.play(); |
| } catch(e) { |
| console.error(e); |
| alert("Could not switch playback mode."); |
| } |
| } |
| |
| |
| UI.processBtn.onclick = async () => { |
| const pending = state.files.filter(f => f.status === 'pending'); |
| if (pending.length === 0) return; |
| |
| setProcessButtonState(true, "Preparing Hush AI..."); |
| |
| |
| const nativeAudioCtx = new (window.AudioContext || window.webkitAudioContext)(); |
| |
| try { |
| for (let i = 0; i < pending.length; i++) { |
| const item = pending[i]; item.status = 'processing'; renderQueue(); |
| const tag = `(${i+1}/${pending.length})`; |
| |
| |
| const offlineProcL = new state.ProcessorClass({ sampleRate: 16000, noiseReductionLevel: state.settings.noiseLevel, assetConfig: state.assetConfigObj }); |
| await offlineProcL.initialize(); |
| |
| let offlineProcR = null; |
| if (state.settings.stereo) { |
| offlineProcR = new state.ProcessorClass({ sampleRate: 16000, noiseReductionLevel: state.settings.noiseLevel, assetConfig: state.assetConfigObj }); |
| await offlineProcR.initialize(); |
| } |
| |
| setProcessButtonState(true, `Decoding Audio ${tag}...`); |
| await new Promise(r => setTimeout(r, 10)); |
| |
| const arrayBuffer = await item.file.arrayBuffer(); |
| let decodedBuffer = await nativeAudioCtx.decodeAudioData(arrayBuffer); |
| const nativeRate = decodedBuffer.sampleRate; |
| |
| if (item.endTrim > 0 && (item.startTrim > 0 || item.endTrim < decodedBuffer.duration)) { |
| const startSample = Math.floor(item.startTrim * nativeRate); |
| let endSample = Math.floor(item.endTrim * nativeRate); |
| if (endSample > decodedBuffer.length) endSample = decodedBuffer.length; |
| const len = endSample - startSample; |
| const trimmed = nativeAudioCtx.createBuffer(decodedBuffer.numberOfChannels, len, nativeRate); |
| for(let c=0; c<decodedBuffer.numberOfChannels; c++) { |
| trimmed.copyToChannel(decodedBuffer.getChannelData(c).subarray(startSample, endSample), c); |
| } |
| decodedBuffer = trimmed; |
| } |
| |
| const isStereoFile = decodedBuffer.numberOfChannels > 1; |
| const processStereo = state.settings.stereo && isStereoFile; |
| const channels = processStereo ? 2 : 1; |
| |
| |
| const renderLen = Math.ceil(decodedBuffer.duration * 16000); |
| const offlineCtx = new OfflineAudioContext(channels, renderLen, 16000); |
| const sourceNode = offlineCtx.createBufferSource(); |
| let pipelineTail = null; |
| |
| if (processStereo) { |
| sourceNode.buffer = decodedBuffer; |
| const splitter = offlineCtx.createChannelSplitter(2); |
| const merger = offlineCtx.createChannelMerger(2); |
| sourceNode.connect(splitter); |
| |
| const dfNodeL = await offlineProcL.createAudioWorkletNode(offlineCtx); |
| const dfNodeR = await offlineProcR.createAudioWorkletNode(offlineCtx); |
| |
| splitter.connect(dfNodeL, 0, 0); |
| splitter.connect(dfNodeR, 1, 0); |
| dfNodeL.connect(merger, 0, 0); |
| dfNodeR.connect(merger, 0, 1); |
| |
| pipelineTail = merger; |
| } else { |
| if (isStereoFile) { |
| const mono = offlineCtx.createBuffer(1, decodedBuffer.length, nativeRate); |
| const data = mono.getChannelData(0), left = decodedBuffer.getChannelData(0), right = decodedBuffer.getChannelData(1); |
| for (let j = 0; j < decodedBuffer.length; j++) data[j] = (left[j] + right[j]) / 2; |
| decodedBuffer = mono; |
| } |
| sourceNode.buffer = decodedBuffer; |
| const dfNode = await offlineProcL.createAudioWorkletNode(offlineCtx); |
| sourceNode.connect(dfNode); |
| pipelineTail = dfNode; |
| } |
| |
| |
| const dcBlocker = offlineCtx.createBiquadFilter(); |
| dcBlocker.type = 'highpass'; |
| dcBlocker.frequency.value = 40; |
| |
| const bassEq = offlineCtx.createBiquadFilter(); bassEq.type = 'lowshelf'; bassEq.frequency.value = 250; bassEq.gain.value = state.settings.bass; |
| const trebleEq = offlineCtx.createBiquadFilter(); trebleEq.type = 'highshelf'; trebleEq.frequency.value = 4000; trebleEq.gain.value = state.settings.treble; |
| const gainNode = offlineCtx.createGain(); gainNode.gain.value = Math.pow(10, state.settings.gain / 20) * 0.5; |
| |
| pipelineTail.connect(dcBlocker); |
| dcBlocker.connect(bassEq); |
| bassEq.connect(trebleEq); |
| trebleEq.connect(gainNode); |
| gainNode.connect(offlineCtx.destination); |
| |
| offlineCtx.suspend(0.1).then(() => { setTimeout(() => offlineCtx.resume(), 100); }); |
| |
| const dur = decodedBuffer.duration; |
| const interval = Math.max(5, dur / 100); |
| for (let t = Math.ceil(interval); t < dur; t += interval) { |
| offlineCtx.suspend(t).then(async () => { |
| const pct = Math.round((t / dur) * 100); |
| setProcessButtonState(true, `Cleaning ${tag} - ${pct}%`); |
| await new Promise(r => setTimeout(r, 0)); |
| offlineCtx.resume(); |
| }); |
| } |
| |
| sourceNode.start(0); |
| const renderedBuffer = await offlineCtx.startRendering(); |
| |
| if (state.settings.normalize) { |
| for(let c=0; c<renderedBuffer.numberOfChannels; c++) { |
| const dat = renderedBuffer.getChannelData(c); |
| let max = 0; |
| for(let j=0; j<dat.length; j++) { if(Math.abs(dat[j]) > max) max = Math.abs(dat[j]); } |
| if (max > 0) { const multiplier = 0.95 / max; for(let j=0; j<dat.length; j++) dat[j] *= multiplier; } |
| } |
| } |
| |
| let outBlob; |
| if (state.settings.format === 'mp3') { |
| outBlob = await encodeToMP3(renderedBuffer, (p) => { |
| setProcessButtonState(true, `Encoding MP3 ${tag} - ${Math.round(p * 100)}%`); |
| }); |
| } else { |
| outBlob = await audioBufferToWav(renderedBuffer, (p) => { |
| setProcessButtonState(true, `Saving WAV ${tag} - ${Math.round(p * 100)}%`); |
| }); |
| } |
| |
| item.cleanedUrl = URL.createObjectURL(outBlob); item.blob = outBlob; item.status = 'done'; |
| decodedBuffer = null; |
| } |
| |
| setProcessButtonState(false); renderQueue(); |
| if(state.activeId) selectFile(state.activeId); |
| |
| } catch (err) { |
| console.error(err); alert("An error occurred during processing. The file may be too large for browser memory limits."); setProcessButtonState(false); |
| } finally { |
| if (nativeAudioCtx.state !== 'closed') nativeAudioCtx.close(); |
| } |
| }; |
| |
| |
| async function audioBufferToWav(buffer, onProgress) { |
| const numOfChan = buffer.numberOfChannels, len = buffer.length * numOfChan * 2 + 44; |
| const view = new DataView(new ArrayBuffer(len)), channels = []; |
| let offset = 0, pos = 0; |
| const setU16 = d => { view.setUint16(offset, d, true); offset += 2; }; |
| const setU32 = d => { view.setUint32(offset, d, true); offset += 4; }; |
| const setI16 = d => { view.setInt16(offset, d, true); offset += 2; }; |
| |
| setU32(0x46464952); setU32(len - 8); setU32(0x45564157); setU32(0x20746d66); setU32(16); setU16(1); setU16(numOfChan); |
| setU32(buffer.sampleRate); setU32(buffer.sampleRate * 2 * numOfChan); setU16(numOfChan * 2); setU16(16); setU32(0x61746164); setU32(len - pos - 4); |
| |
| for(let i=0; i<numOfChan; i++) channels.push(buffer.getChannelData(i)); |
| |
| const chunk = buffer.sampleRate * 5; |
| while(pos < buffer.length) { |
| let end = Math.min(pos + chunk, buffer.length); |
| while(pos < end) { |
| for(let i=0; i<numOfChan; i++) { |
| let s = Math.max(-1, Math.min(1, channels[i][pos])); |
| setI16(s < 0 ? s * 0x8000 : s * 0x7FFF); |
| } |
| pos++; |
| } |
| if(onProgress) onProgress(pos / buffer.length); |
| await new Promise(r => setTimeout(r, 0)); |
| } |
| return new Blob([view.buffer], { type: "audio/wav" }); |
| } |
| |
| async function encodeToMP3(audioBuffer, onProgress) { |
| const encoder = new lamejs.Mp3Encoder(1, audioBuffer.sampleRate, 192); |
| const samples = audioBuffer.getChannelData(0); |
| const mp3Data = []; |
| const blockSize = 11520; |
| const chunkBuffer = new Int16Array(blockSize); |
| |
| for (let i = 0; i < samples.length; i += blockSize) { |
| const end = Math.min(i + blockSize, samples.length); |
| const view = chunkBuffer.subarray(0, end - i); |
| |
| for (let j = 0; j < view.length; j++) { |
| let s = samples[i + j]; |
| s = Math.max(-1, Math.min(1, s)); |
| view[j] = s < 0 ? s * 0x8000 : s * 0x7FFF; |
| } |
| |
| const buf = encoder.encodeBuffer(view); |
| if (buf.length > 0) mp3Data.push(buf); |
| |
| if (i % (audioBuffer.sampleRate * 3) < blockSize) { |
| if(onProgress) onProgress(i / samples.length); |
| await new Promise(r => setTimeout(r, 0)); |
| } |
| } |
| |
| const flush = encoder.flush(); if (flush.length > 0) mp3Data.push(flush); |
| return new Blob(mp3Data, { type: 'audio/mp3' }); |
| } |
| |
| |
| UI.downloadSingleBtn.onclick = () => { |
| const item = state.files.find(f => f.id === state.activeId); |
| if(!item || !item.cleanedUrl) return; |
| const ext = state.settings.format === 'mp3' ? '.mp3' : '.wav'; |
| const a = document.createElement('a'); a.href = item.cleanedUrl; a.download = `Hush_Cleaned_${item.name.replace(/\.[^/.]+$/, "")}${ext}`; a.click(); |
| }; |
| |
| UI.downloadZipBtn.onclick = async () => { |
| const doneFiles = state.files.filter(f => f.status === 'done'); |
| if(doneFiles.length === 0) return; |
| |
| const oldHtml = UI.downloadZipBtn.innerHTML; |
| UI.downloadZipBtn.disabled = true; |
| UI.downloadZipBtn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 spinner"></i> Zipping...`; |
| lucide.createIcons(); |
| await new Promise(r => setTimeout(r, 10)); |
| |
| const zip = new JSZip(); const ext = state.settings.format === 'mp3' ? '.mp3' : '.wav'; |
| doneFiles.forEach(f => { zip.file(`Hush_Cleaned_${f.name.replace(/\.[^/.]+$/, "")}${ext}`, f.blob); }); |
| const content = await zip.generateAsync({type:"blob"}); |
| |
| UI.downloadZipBtn.disabled = false; |
| UI.downloadZipBtn.innerHTML = oldHtml; |
| lucide.createIcons(); |
| |
| const a = document.createElement('a'); a.href = URL.createObjectURL(content); a.download = "HushAI_Batch.zip"; a.click(); |
| }; |
| </script> |
| </body> |
| </html> |
