1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Contact Us - AI Vocal Remover</title> 7 <meta name="description" content="Get in touch with the AI Vocal Remover team for support, feature requests, business inquiries, or general feedback." /> 8<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico?v=1.0"> 9 <link rel="canonical" href="https://vocalremovers.ai/contact" /> 10 <!-- Preconnect & Google Fonts --> 11 <link rel="preconnect" href="https://fonts.googleapis.com" /> 12 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 13 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> 14 15 <!-- Font Awesome 6 Free Icons --> 16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> 17 18 <!-- Tailwind CSS CDN --> 19
19<script src="https://cdn.tailwindcss.com"></script>
19 20
20<script> 21 tailwind.config = { 22 theme: { 23 extend: { 24 fontFamily: { 25 sans: ["Inter", "sans-serif"], 26 outfit: ["Outfit", "sans-serif"] 27 }, 28 boxShadow: { 29 "neon-indigo": "0 0 20px rgba(99, 102, 241, 0.15)", 30 "neon-purple": "0 0 20px rgba(168, 85, 247, 0.15)", 31 "glass-hover": "0 20px 40px rgba(0, 0, 0, 0.3)" 32 } 33 } 34 } 35 }; 36 </script>
36 37 38 <!-- Custom Styling for Interactive Elements --> 39 <style> 40 body { 41 background-color: #080a13; 42 background-image: 43 radial-gradient(circle at 15% 25%, rgba(99, 102, 241, 0.08) 0%, transparent 40%), 44 radial-gradient(circle at 85% 75%, rgba(168, 85, 247, 0.08) 0%, transparent 40%); 45 background-attachment: fixed; 46 } 47 48 .glass-card { 49 background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); 50 backdrop-filter: blur(16px); 51 -webkit-backdrop-filter: blur(16px); 52 border: 1px solid rgba(255, 255, 255, 0.06); 53 } 54 55 .glass-card-hover:hover { 56 background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); 57 border-color: rgba(129, 140, 248, 0.3); 58 box-shadow: 0 20px 45px rgba(99, 102, 241, 0.15); 59 } 60 61 .header-gradient { 62 background: linear-gradient(90deg, #4154a1 0%, #614d9f 100%); 63 } 64 65 /* Opaque Mobile Navigation Menu */ 66 #mobileMenu { 67 background-color: #0b1021 !important; 68 opacity: 1 !important; 69 } 70 71 /* Subtle animation for background glows */ 72 @keyframes pulse-slow { 73 0%, 100% { transform: scale(1); opacity: 0.8; } 74 50% { transform: scale(1.05); opacity: 1; } 75 } 76 .animate-glow { 77 animation: pulse-slow 8s ease-in-out infinite; 78 } 79 </style> 80</head> 81<body class="text-slate-100 font-sans antialiased min-h-screen flex flex-col pt-20"> 82 83 <!-- ================= HEADER NAVIGATION ================= --> 84 <!-- ================= HEADER SECTION ================= --> 85<header class="header-gradient w-full shadow-lg fixed top-0 left-0 right-0 z-50"> 86 <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"> 87 88 <!-- Logo Container --> 89 <a href="/" class="flex items-center gap-3.5 group select-none cursor-pointer" id="mainlogo"> 90 <!-- Logo Icon: Rounded rectangle with a music note --> 91 <div class="h-10 w-10 flex items-center justify-center rounded-xl bg-white/15 border border-white/10 shadow-inner group-hover:scale-105 transition-transform duration-200"> 92 <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor"> 93 <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/> 94 </svg> 95 </div> 96 <!-- Logo Text --> 97 <span class="font-outfit text-xl font-bold tracking-tight text-white flex items-center gap-1.5"> 98 AI Vocal <span class="text-[#c084fc] drop-shadow-sm">Remover</span> 99 </span> 100 </a> 101 102 <!-- Desktop Navigation Menu --> 103 <nav class="hidden md:flex items-center gap-8 lg:gap-10"> 104 <div class="relative group/nav py-2"> 105 <button class="text-sm font-semibold tracking-wide text-white/90 group-hover/nav:text-white flex items-center gap-1.5 transition-colors duration-200 cursor-pointer"> 106 TOOLS <i class="fas fa-chevron-down text-[10px] opacity-70 group-hover/nav:rotate-180 transition-transform duration-200"></i> 107 </button> 108 <div class="absolute top-full left-1/2 -translate-x-1/2 pt-2 hidden group-hover/nav:block z-50"> 109 <div class="w-56 bg-slate-950/95 border border-white/10 rounded-2xl shadow-2xl p-2 backdrop-blur-xl flex flex-col gap-1"> 110 <a href="/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 111 <i class="fa-solid fa-microphone-slash text-purple-400 w-4"></i> Vocal Remover 112 </a> 113 <a href="/bpm-finder/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 114 <i class="fa-solid fa-drum text-indigo-400 w-4"></i> BPM & Key Finder 115 </a> 116 <a href="/key-finder/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 117 <i class="fa-solid fa-compact-disc text-[#c084fc] w-4"></i> Key Finder & Camelot 118 </a> 119 <a href="/voice-recorder/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 120 <i class="fa-solid fa-microphone-lines text-rose-400 w-4"></i> Voice Recorder 121 </a> 122 <a href="/audio-cutter/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 123 <i class="fa-solid fa-scissors text-blue-400 w-4"></i> Audio Cutter 124 </a> 125 <a href="/audio-joiner/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 126 <i class="fa-solid fa-layer-group text-emerald-400 w-4"></i> Audio Joiner 127 </a> 128 <a href="/audio-converter/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 129 <i class="fa-solid fa-arrows-rotate text-cyan-400 w-4"></i> Audio Converter 130 </a> 131 <a href="/equalizer/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 132 <i class="fa-solid fa-sliders text-teal-400 w-4"></i> Audio Equalizer 133 </a> 134 <a href="/pitch-changer/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 135 <i class="fa-solid fa-music text-cyan-400 w-4"></i> Pitch Changer 136 </a> 137 <a href="/bass-booster/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 138 <i class="fa-solid fa-volume-high text-cyan-400 w-4"></i> Bass Booster 139 </a> 140 <a href="/noise-reducer/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 141 <i class="fa-solid fa-wand-magic-sparkles text-emerald-400 w-4"></i> Noise Reducer 142 </a> 143 <a href="/audio-effects/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 144 <i class="fa-solid fa-wand-magic text-violet-400 w-4"></i> Audio Effects 145 </a> 146 <a href="/mp3-tag-editor/" class="px-3.5 py-2.5 rounded-xl text-xs font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-2.5 transition-all"> 147 <i class="fa-solid fa-tags text-amber-400 w-4"></i> MP3 Tag Editor 148 </a> 149 </div> 150 </div> 151 </div> 152 <a href="/#features" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">FEATURES</a> 153 <a href="/#howitworks" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">HOW IT WORKS</a> 154 <a href="/#faqs" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">FAQS</a> 155 <a href="/contact/" class="text-sm font-semibold tracking-wide text-white/90 hover:text-white transition-colors duration-200">CONTACT</a> 156 </nav> 157 158 <!-- Mobile Hamburger Button --> 159 <button id="menuToggle" class="md:hidden p-2 rounded-lg text-white hover:bg-white/10 transition-colors focus:outline-none" aria-label="Toggle navigation menu"> 160 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 161 <path id="menuIcon" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h18M4 18h18" /> 162 </svg> 163 </button> 164 165 </div> 166 167 <!-- Mobile Dropdown Menu --> 168 <div id="mobileMenu" class="hidden md:hidden absolute top-full left-0 w-full bg-[#0b1021] border-t border-white/10 shadow-2xl transition-all duration-200 ease-in-out max-h-[calc(100vh-70px)] overflow-y-auto custom-scrollbar"> 169 <div class="px-4 py-3 space-y-2"> 170 171 <!-- Section: Audio Tools --> 172 <div class="flex flex-col gap-1"> 173 <a href="/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 174 <i class="fa-solid fa-microphone-slash text-purple-400 w-
1745 text-center text-sm"></i> Vocal Remover 175 </a> 176 <a href="/bpm-finder/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 177 <i class="fa-solid fa-drum text-indigo-400 w-5 text-center text-sm"></i> BPM & Key Finder 178 </a> 179 <a href="/key-finder/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 180 <i class="fa-solid fa-compact-disc text-[#c084fc] w-5 text-center text-sm"></i> Key Finder & Camelot 181 </a> 182 <a href="/voice-recorder/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 183 <i class="fa-solid fa-microphone-lines text-rose-400 w-5 text-center text-sm"></i> Voice Recorder 184 </a> 185 <a href="/audio-cutter/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 186 <i class="fa-solid fa-scissors text-blue-400 w-5 text-center text-sm"></i> Audio Cutter 187 </a> 188 <a href="/audio-joiner/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 189 <i class="fa-solid fa-layer-group text-emerald-400 w-5 text-center text-sm"></i> Audio Joiner 190 </a> 191 <a href="/audio-converter/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 192 <i class="fa-solid fa-arrows-rotate text-cyan-400 w-5 text-center text-sm"></i> Audio Converter 193 </a> 194 <a href="/equalizer/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 195 <i class="fa-solid fa-sliders text-teal-400 w-5 text-center text-sm"></i> Audio Equalizer 196 </a> 197 <a href="/pitch-changer/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 198 <i class="fa-solid fa-music text-cyan-400 w-5 text-center text-sm"></i> Pitch Changer 199 </a> 200 <a href="/bass-booster/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 201 <i class="fa-solid fa-volume-high text-cyan-400 w-5 text-center text-sm"></i> Bass Booster 202 </a> 203 <a href="/noise-reducer/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 204 <i class="fa-solid fa-wand-magic-sparkles text-emerald-400 w-5 text-center text-sm"></i> Noise Reducer 205 </a> 206 <a href="/audio-effects/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 207 <i class="fa-solid fa-wand-magic text-violet-400 w-5 text-center text-sm"></i> Audio Effects 208 </a> 209 <a href="/mp3-tag-editor/" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-3 transition-all"> 210 <i class="fa-solid fa-tags text-amber-400 w-5 text-center text-sm"></i> MP3 Tag Editor 211 </a> 212 </div> 213 214 <!-- Section Divider --> 215 <div class="h-px bg-white/10"></div> 216 217 <!-- Section: General Navigation --> 218 <nav class="grid grid-cols-2 gap-2 text-xs font-semibold"> 219 <a href="/#features" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2"> 220 <i class="fa-solid fa-star text-amber-400 text-[10px]"></i> Features 221 </a> 222 <a href="/#howitworks" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2"> 223 <i class="fa-solid fa-circle-play text-cyan-400 text-[10px]"></i> How It Works 224 </a> 225 <a href="/#faqs" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2"> 226 <i class="fa-solid fa-circle-question text-purple-400 text-[10px]"></i> FAQs 227 </a> 228 <a href="/contact/" class="p-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-all flex items-center gap-2"> 229 <i class="fa-solid fa-envelope text-emerald-400 text-[10px]"></i> Contact 230 </a> 231 </nav> 232 233 </div> 234 </div> 235</header> 236 237<!-- Mobile Hamburger Toggle Script -->
238<script> 239 (function() { 240 function initMobileMenuToggle() { 241 var menuToggle = document.getElementById('menuToggle'); 242 var mobileMenu = document.getElementById('mobileMenu'); 243 var menuIcon = document.getElementById('menuIcon'); 244 if (!menuToggle || !mobileMenu) return; 245 246 menuToggle.onclick = function(e) { 247 e.stopPropagation(); 248 var isClosed = mobileMenu.classList.contains('hidden'); 249 if (isClosed) { 250 mobileMenu.classList.remove('hidden'); 251 if (menuIcon) menuIcon.setAttribute('d', 'M6 18L18 6M6 6l12 12'); 252 } else { 253 mobileMenu.classList.add('hidden'); 254 if (menuIcon) menuIcon.setAttribute('d', 'M4 6h16M4 12h18M4 18h18'); 255 } 256 }; 257 258 // Close on clicking outside 259 document.addEventListener('click', function(e) { 260 if (!mobileMenu.classList.contains('hidden') && !mobileMenu.contains(e.target) && !menuToggle.contains(e.target)) { 261 mobileMenu.classList.add('hidden'); 262 if (menuIcon) menuIcon.setAttribute('d', 'M4 6h16M4 12h18M4 18h18'); 263 } 264 }); 265 266 // Close when clicking any link 267 mobileMenu.querySelectorAll('a').forEach(function(link) { 268 link.addEventListener('click', function() { 269 mobileMenu.classList.add('hidden'); 270 if (menuIcon) menuIcon.setAttribute('d', 'M4 6h16M4 12h18M4 18h18'); 271 }); 272 }); 273 } 274 275 if (document.readyState === 'loading') { 276 document.addEventListener('DOMContentLoaded', initMobileMenuToggle); 277 } else { 278 initMobileMenuToggle(); 279 } 280 })(); 281</script>
281 282 283 <!-- ================= MAIN BODY CONTENT ================= --> 284 <main class="flex-grow max-w-4xl mx-auto px-6 py-16 md:py-24 relative w-full overflow-hidden flex flex-col justify-center items-center"> 285 286 <!-- Decorative Glowing Mesh Elements in Background --> 287 <div class="absolute top-20 -left-48 w-96 h-96 bg-indigo-600/10 rounded-full blur-[100px] animate-glow pointer-events-none"></div> 288 <div class="absolute bottom-20 -right-48 w-96 h-96 bg-purple-600/10 rounded-full blur-[100px] animate-glow pointer-events-none"></div> 289 290 <!-- Hero Header --> 291 <div class="text-center max-w-2xl mx-auto mb-12"> 292 <span class="text-xs md:text-sm font-bold tracking-widest text-[#a78bfa] uppercase px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 inline-block mb-4">GET IN TOUCH</span> 293 <h1 class="font-outfit text-4xl md:text-5xl font-extrabold text-white tracking-tight leading-tight"> 294 We'd love to <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#a78bfa] to-[#c084fc]">hear from you</span>. 295 </h1> 296 <p class="mt-4 text-sm md:text-base text-slate-400 leading-relaxed"> 297 Have feedback, technical questions, API requests, or business proposals? Drop us an email and our team will get back to you as soon as possible. 298 </p> 299 </div> 300 301 <!-- Centralized Email Communication Card (Premium Glassmorphism) --> 302 <div class="w-full max-w-2xl glass-card rounded-3xl p-8 md:p-12 hover:shadow-neon-indigo transition-all duration-300 relative overflow-hidden group"> 303 <div class="absolute -right-20 -top-20 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl group-hover:bg-indigo-500/20 transition-all duration-300"></div> 304 305 <div class="flex flex-col items-center text-center"> 306 <!-- Icon --> 307 <div class="h-14 w-14 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-6 border border-indigo-500/20 text-[#a78bfa] group-hover:scale-105 transition-transform duration-300"> 308 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 309 <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/> 310 </svg> 311 </div> 312 313 <h2 class="font-outfit text-2xl font-bold text-white mb-3">Direct Support Email</h2> 314 <p class="text-slate-400 text-sm leading-relaxed max-w-md mb-8"> 315 Send your messages directly to our inbox. We systematically review incoming messages and typical response time is within 4 to 24 hours. 316 </p> 317 318 <!-- Interactive Email Block --> 319 <div class="w-full max-w-md bg-slate-950/60 border border-white/5 rounded-2xl p-5 flex items-center justify-between gap-4 group/email hover:border-indigo-500/25 transition-all"> 320 <div class="truncate text-left"> 321 <span class="text-xs text-slate-500 uppercase tracking-wider block mb-0.5 font-bold">Official Outreach</span> 322 <a href="/cdn-cgi/l/email-protection#5f3c30312b3e3c2b1f29303c3e332d3a3230293a2d2c713e36" class="text-[#a78bfa] hover:text-white font-semibold font-outfit text-base md:text-xl transition-colors truncate block"> 323 <span class="__cf_email__" data-cfemail="10737f7e6471736450667f73717c62757d7f667562633e7179">[email protected]</span> 324 </a> 325 </div> 326 327 <button id="copyEmailBtn" class="flex-shrink-0 h-12 w-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 active:scale-95 transition-all duration-150 relative" aria-label="Copy email to clipboard"> 328 <!-- Copy SVG --> 329 <svg id="copyIcon" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 330 <path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /> 331 </svg> 332 <!-- Checkmark SVG (hidden by default) --> 333 <svg id="checkIcon" class="h-5 w-5 text-emerald-400 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 334 <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /> 335 </svg> 336 <!-- Tooltip -->
337 <span id="tooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-950 text-white text-xs py-1.5 px-3 rounded-lg opacity-0 pointer-events-none transition-opacity duration-200 whitespace-nowrap border border-white/10 shadow-lg">Copied to Clipboard!</span> 338 </button> 339 </div> 340 </div> 341 342 <!-- Card Footer Stats --> 343 <div class="mt-10 pt-6 border-t border-white/5 flex flex-wrap justify-center gap-8 text-xs text-slate-500"> 344 <div class="flex items-center gap-2"> 345 <span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span> 346 <span>Inboxes Active 24/7</span> 347 </div> 348 <div class="flex items-center gap-2"> 349 <svg class="h-4 w-4 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 350 <span>No Ads or Spam</span> 351 </div> 352 </div> 353 </div> 354 355 <!-- FAQ Quicklink --> 356 <p class="mt-8 text-xs text-slate-500 text-center"> 357 Looking for generic support? Check out our 358 <a href="/#faqs" class="text-[#a78bfa] hover:text-white underline transition-colors font-semibold">Frequently Asked Questions</a>. 359 </p> 360 361 </main> 362 363 <!-- ================= FOOTER SECTION ================= --> 364 <footer class="footer-glass mt-0 py-12 relative z-10"> 365 <div class="container mx-auto px-4 max-w-7xl"> 366 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-10"> 367 <!-- Brand Column --> 368 <div class="sm:col-span-2 lg:col-span-1"> 369 <a href="/" class="flex items-center gap-3 mb-4 group inline-flex select-none"> 370 <div class="w-10 h-10 glass rounded-xl flex items-center justify-center text-white bg-white/10 border border-white/10 group-hover:scale-105 transition-transform duration-200 shadow-inner"> 371 <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor"> 372 <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/> 373 </svg> 374 </div> 375 <span class="footer-logo text-2xl font-extrabold font-outfit">Vocal Remover</span> 376 </a> 377 <p class="text-white/70 text-sm leading-relaxed mb-4"> 378 Professional in-browser audio workstation & AI stem separation suite for musicians, producers, sound engineers, and podcasters. 379 </p> 380 <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-400 font-medium"> 381 <i class="fa-solid fa-shield-halved text-xs"></i> 100% In-Browser Privacy 382 </div> 383 </div> 384 385 <!-- Column 2: Audio Tools (AI & DSP Engines) --> 386 <div> 387 <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Audio Tools</h2> 388 <ul class="space-y-2.5"> 389 <li><a href="https://vocalremovers.ai/#dropsec" class="footer-link text-sm">Free AI Vocal Remover</a></li> 390 <li><a href="/bpm-finder/" class="footer-link text-sm">BPM & Key Finder</a></li> 391 <li><a href="/key-finder/" class="footer-link text-sm">Key Finder & Camelot</a></li> 392 <li><a href="/pitch-changer/" class="footer-link text-sm">Pitch Changer</a></li> 393 <li><a href="/bass-booster/" class="footer-link text-sm">Bass Booster</a></li> 394 <li><a href="/noise-reducer/" class="footer-link text-sm">Noise Reducer</a></li> 395 <li><a href="/audio-effects/" class="footer-link text-sm">Audio Effects</a></li> 396 </ul> 397 </div> 398 399 <!-- Column 3: Audio Utilities (Editing & Conversion) --> 400 <div> 401 <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Audio Utilities</h2> 402 <ul class="space-y-2.5"> 403 <li><a href="/mp3-tag-editor/" class="footer-link text-sm">MP3 Tag Editor</a></li> 404 <li><a href="/audio-converter/" class="footer-link text-sm">Audio Converter</a></li> 405 <li><a href="/audio-cutter/" class="footer-link text-sm">Audio Cutter</a></li> 406 <li><a href="/audio-joiner/" class="footer-link text-sm">Audio Joiner</a></li> 407 <li><a href="/equalizer/" class="footer-link text-sm">Audio Equalizer</a></li> 408 <li><a href="/voice-recorder/" class="footer-link text-sm">Voice Recorder</a></li> 409 </ul> 410 </div> 411 412 <!-- Column 4: Platform & Guide --> 413 <div> 414 <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Platform</h2> 415 <ul class="space-y-2.5"> 416 <li><a href="/#features" class="footer-link text-sm">Features</a></li> 417 <li><a href="/#how-it-works" class="footer-link text-sm">How It Works</a></li> 418 <li><a href="/#faqs" class="footer-link text-sm">Studio FAQs</a></li> 419 <li><a href="/contact/" class="footer-link text-sm">Help Center</a></li> 420 </ul> 421 </div> 422 423 <!-- Column 5: Company & Legal --> 424 <div> 425 <h2 class="text-white font-bold text-sm uppercase tracking-wider mb-4 font-outfit">Company</h2> 426 <ul class="space-y-2.5"> 427 <li><a href="/about/" class="footer-link text-sm">About Us</a></li> 428 <li><a href="/contact/" class="footer-link text-sm">Contact Us</a></li> 429 <li><a href="/privacy-policy/" class="footer-link text-sm">Privacy Policy</a></li> 430 <li><a href="/disclaimer/" class="footer-link text-sm">Disclaimer</a></li> 431 </ul> 432 </div> 433 </div> 434 435 <!-- Divider --> 436 <div class="h-px bg-white/10 mb-8"></div> 437 438 <!-- Bottom Footer --> 439 <div class="flex flex-col sm:flex-row items-center justify-between gap-4"> 440 <div class="text-white/60 text-xs sm:text-sm text-center sm:text-left"> 441 © 2026 VocalRemovers.ai. All rights reserved. Zero audio data stored on servers. 442 </div> 443 444 <!-- Legal Links --> 445 <div class="flex items-center gap-6 text-xs sm:text-sm"> 446 <a href="/privacy-policy/" class="footer-link">Privacy Policy</a> 447 <a href="/disclaimer/" class="footer-link">Disclaimer</a> 448 <a href="/contact/" class="footer-link">Contact</a> 449 </div> 450 </div> 451 </div> 452</footer>
vendor: 115 bytes, lines 452-454
452 453 454<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
454<script> 455 const CONFIG = { 456 clientId: '658101237139-kgekg6onkp1g1ckmp8q5mbf28i3bjaq0.apps.googleusercontent.com', 457 apiKey: 'AIzaSyB_MWxjdXxwB9z_hXZH5_f0YPQhjG4M9Bw', 458 appId: '658101237139', 459 scope: 'https://www.googleapis.com/auth/drive.file', 460 discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'] 461 }; 462 463 let tokenClient; 464 let accessToken = null; 465 let pickerInited = false; 466 let gisInited = false; 467 468 function onApiLoad() { 469 gapi.load('client:picker', initializePicker); 470 } 471 472 function gisLoaded() { 473 tokenClient = google.accounts.oauth2.initTokenClient({ 474 client_id: CONFIG.clientId, 475 scope: CONFIG.scope, 476 callback: '', 477 }); 478 gisInited = true; 479 } 480 function initializePicker() { 481 gapi.client.init({ 482 apiKey: CONFIG.apiKey, 483 discoveryDocs: CONFIG.discoveryDocs 484 }).then(function() { 485 pickerInited = true; 486 }); 487 } 488 489 function loadGoogleDriveOnDemand(callback) { 490 if (window.gapi && window.google && pickerInited && gisInited) { 491 if (callback) callback(); 492 return; 493 } 494 const s1 = document.createElement('script'); 495 s1.src = 'https://apis.google.com/js/api.js'; 496 s1.onload = () => { 497 gapi.load('client:picker', () => { 498 initializePicker(); 499 const s2 = document.createElement('script'); 500 s2.src = 'https://accounts.google.com/gsi/client'; 501 s2.onload = () => { 502 gisLoaded(); 503 if (callback) callback(); 504 }; 505 document.head.appendChild(s2); 506 }); 507 }; 508 document.head.appendChild(s1); 509 } 510</script>
510 511 512 <!-- Load jQuery early to ensure script blocks work correctly --> 513
513<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
513 514
515<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="7vdgy4nz22i09tq" async></script>
vendor: 1 bytes, line 515
515
516<script src="https://js.live.net/v7.2/OneDrive.js" async></script>
516 517
517<script src="https://unpkg.com/[email protected]/dist/wavesurfer.js" defer></script>
517 518 <!--
518<script src="/js/main.js?v=4.3" defer></script>
518 --> 519
519<script src="/js/gdrive.js?v=5.2" defer></script>
519 520<link rel="preload" href="/css/modern_css.css?v=1.1" as="style" onload="this.rel='stylesheet'"> 521<noscript><link rel="stylesheet" href="/css/modern_css.css?v=1.1"></noscript> 522<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" as="style" onload="this.rel='stylesheet'"> 523<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"></noscript>
524<script defer src="https://cdn.tailwindcss.com"></script>
524 525<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 525-526
525 526<script async src="https://www.googletagmanager.com/gtag/js?id=
526G-FHELE5QWPR
vendor: 12 bytes, line 526
526"></script>
527<script> 528
vendor: 134 bytes, lines 528-532
528window.dataLayer = window.dataLayer || []; 529 function gtag(){dataLayer.push(arguments);} 530 gtag('js', new Date()); 531 532 gtag('config', '
532G-FHELE5QWPR
vendor: 4 bytes, line 532
532');
533</script>
vendor: 1 bytes, line 533
533
534<script> 535function processSubpage(filename, url){ 536 loadFromRemoteUrl(url, filename); 537} 538</script>
538 539 540 <!-- Copy to Clipboard Script --> 541
541<script> 542 // Copy to clipboard function 543 const copyBtn = document.getElementById('copyEmailBtn'); 544 const copyIcon = document.getElementById('copyIcon'); 545 const checkIcon = document.getElementById('checkIcon'); 546 const tooltip = document.getElementById('tooltip'); 547 548 copyBtn.addEventListener('click', () => { 549 const emailText = '[email protected]'; 550 navigator.clipboard.writeText(emailText).then(() => { 551 // Toggle icons 552 copyIcon.classList.add('hidden'); 553 checkIcon.classList.remove('hidden'); 554 555 // Show tooltip 556 tooltip.classList.remove('opacity-0'); 557 tooltip.classList.add('opacity-100'); 558 559 setTimeout(() => { 560 // Reset state 561 copyIcon.classList.remove('hidden'); 562 checkIcon.classList.add('hidden'); 563 tooltip.classList.add('opacity-0'); 564 tooltip.classList.remove('opacity-100'); 565 }, 2000); 566 }); 567 }); 568 </script>
568 569</body> 570</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.