|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Splitter AI - Vocal Remover and Music Source Separator</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%); |
|
|
} |
|
|
.file-uploader { |
|
|
border: 2px dashed #ccc; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.file-uploader:hover { |
|
|
border-color: #4a6cf7; |
|
|
background: rgba(74, 108, 247, 0.05); |
|
|
} |
|
|
.waveform { |
|
|
height: 100px; |
|
|
background: linear-gradient(90deg, #4a6cf7 50%, transparent 50%); |
|
|
background-size: 8px 100%; |
|
|
} |
|
|
.play-btn { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.play-btn:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<nav class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="music" class="w-6 h-6"></i> |
|
|
<span class="text-xl font-bold hidden md:inline">Splitter AI</span> |
|
|
<span class="text-xl font-bold md:hidden">SAI</span> |
|
|
</div> |
|
|
<div class="flex space-x-4 md:space-x-6"> |
|
|
<a href="/" class="hover:text-gray-200 font-medium">Home</a> |
|
|
<a href="/help.html" class="hover:text-gray-200">Help</a> |
|
|
<a href="/about.html" class="hover:text-gray-200">About</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center" data-aos="fade-up"> |
|
|
<h1 class="text-3xl md:text-5xl font-bold mb-4">Splitter AI - Vocal Remover</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto"> |
|
|
Extract vocals, instrumental, drums, bass, piano and more from any song |
|
|
</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition"> |
|
|
Try for Free |
|
|
</button> |
|
|
<button class="border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-blue-600 transition"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up"> |
|
|
<div class="p-6 md:p-8"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6">Upload Your Audio File</h2> |
|
|
|
|
|
|
|
|
<div class="file-uploader rounded-lg p-8 text-center mb-8 cursor-pointer"> |
|
|
<i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i> |
|
|
<p class="text-gray-500 mb-2">Drag & drop your audio file here or click to browse</p> |
|
|
<p class="text-sm text-gray-400">Supports MP3, WAV, FLAC, OGG, AAC (Max 100MB)</p> |
|
|
<input type="file" class="hidden" accept="audio/*" id="fileInput"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="font-bold text-gray-700 mb-4">Processing Options</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="processingOptions"> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="vocals"> |
|
|
<i data-feather="mic-off" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>Vocals Only</span> |
|
|
</button> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="instrumental"> |
|
|
<i data-feather="mic" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>Instrumental</span> |
|
|
</button> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="drums"> |
|
|
<i data-feather="drum" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>Drums</span> |
|
|
</button> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="bass"> |
|
|
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>Bass</span> |
|
|
</button> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="piano"> |
|
|
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>Piano</span> |
|
|
</button> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="guitar"> |
|
|
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>Guitar</span> |
|
|
</button> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="other"> |
|
|
<i data-feather="music" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>Other</span> |
|
|
</button> |
|
|
<button class="option-btn border rounded-lg p-3 flex flex-col items-center hover:bg-gray-50 transition" data-mode="full"> |
|
|
<i data-feather="layers" class="w-6 h-6 text-blue-500 mb-2"></i> |
|
|
<span>All Stems</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-bold text-gray-700">Advanced Settings</h3> |
|
|
<button class="text-blue-500 hover:text-blue-700 text-sm flex items-center"> |
|
|
<i data-feather="settings" class="w-4 h-4 mr-1"></i> |
|
|
Show Settings |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4 hidden"> |
|
|
<div class="flex flex-col"> |
|
|
<label class="text-sm text-gray-500 mb-1">Processing Quality</label> |
|
|
<select class="border rounded p-2 bg-gray-50"> |
|
|
<option>Standard (Fastest)</option> |
|
|
<option selected>High Quality</option> |
|
|
<option>Professional (Slowest)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex flex-col"> |
|
|
<label class="text-sm text-gray-500 mb-1">Output Format</label> |
|
|
<select class="border rounded p-2 bg-gray-50"> |
|
|
<option selected>MP3</option> |
|
|
<option>WAV</option> |
|
|
<option>FLAC</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="processBtn" class="gradient-bg text-white w-full py-3 rounded-lg font-bold hover:opacity-90 transition flex justify-center items-center hovered-element"> |
|
|
<i data-feather="zap" class="w-5 h-5 mr-2"></i> |
|
|
Separate Now (Free) |
|
|
</button> |
|
|
<p class="text-center text-sm text-gray-500 mt-2">No registration required - process up to 10 minutes per file</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Powerful AI Audio Processing</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<i data-feather="cpu" class="w-6 h-6 text-blue-500"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">AI-Powered Separation</h3> |
|
|
<p class="text-gray-600">Uses deep neural networks to precisely isolate different elements of your music tracks.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<i data-feather="cloud" class="w-6 h-6 text-purple-500"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Cloud Processing</h3> |
|
|
<p class="text-gray-600">All processing happens in the cloud - no software to install. Works on any device.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<i data-feather="download" class="w-6 h-6 text-green-500"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">High-Quality Output</h3> |
|
|
<p class="text-gray-600">Download separated stems in high quality formats suitable for professional use.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 hidden" id="resultsSection"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">How It Works</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up"> |
|
|
<div class="md:flex"> |
|
|
<div class="p-6 md:p-8 flex-1"> |
|
|
<h3 class="font-bold text-xl mb-4">Vocal Separation Preview</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium">Original Track</span> |
|
|
<span class="text-xs text-gray-500">2:45</span> |
|
|
</div> |
|
|
<div class="waveform rounded overflow-hidden relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center play-btn bg-blue-500 bg-opacity-10 text-blue-500 rounded-full w-12 h-12 hover:bg-opacity-20"> |
|
|
<i data-feather="play" class="w-5 h-5 ml-0.5"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium">Vocals Only</span> |
|
|
<span class="text-xs text-gray-500">2:45</span> |
|
|
</div> |
|
|
<div class="waveform rounded overflow-hidden relative" style="background: linear-gradient(90deg, #f472b6 50%, transparent 50%);"> |
|
|
<div class="absolute inset-0 flex items-center justify-center play-btn bg-pink-500 bg-opacity-10 text-pink-500 rounded-full w-12 h-12 hover:bg-opacity-20"> |
|
|
<i data-feather="play" class="w-5 h-5 ml-0.5"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 flex justify-end space-x-2"> |
|
|
<button class="text-xs border px-2 py-1 rounded hover:bg-gray-50 download-btn" data-type="vocals"> |
|
|
<i data-feather="download" class="w-3 h-3 inline mr-1"></i> |
|
|
Download MP3 |
|
|
</button> |
|
|
<button class="text-xs border px-2 py-1 rounded hover:bg-gray-50 download-btn" data-type="vocals" data-format="wav"> |
|
|
<i data-feather="download" class="w-3 h-3 inline mr-1"></i> |
|
|
Download WAV |
|
|
</button> |
|
|
<button class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600"> |
|
|
<i data-feather="share-2" class="w-3 h-3 inline mr-1"></i> |
|
|
Share |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium">Instrumental</span> |
|
|
<span class="text-xs text-gray-500">2:45</span> |
|
|
</div> |
|
|
<div class="waveform rounded overflow-hidden relative" style="background: linear-gradient(90deg, #10b981 50%, transparent 50%);"> |
|
|
<div class="absolute inset-0 flex items-center justify-center play-btn bg-green-500 bg-opacity-10 text-green-500 rounded-full w-12 h-12 hover:bg-opacity-20"> |
|
|
<i data-feather="play" class="w-5 h-5 ml-0.5"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 flex justify-end space-x-2"> |
|
|
<button class="text-xs border px-2 py-1 rounded hover:bg-gray-50"> |
|
|
<i data-feather="download" class="w-3 h-3 inline mr-1"></i> |
|
|
Download |
|
|
</button> |
|
|
<button class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600"> |
|
|
<i data-feather="share-2" class="w-3 h-3 inline mr-1"></i> |
|
|
Share |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-gray-100"> |
|
|
<div class="container mx-auto px-4 max-w-4xl"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Frequently Asked Questions</h2> |
|
|
|
|
|
<div class="space-y-4" data-aos="fade-up"> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<button class="w-full flex justify-between items-center font-bold"> |
|
|
<span>How do I upload my audio file?</span> |
|
|
<i data-feather="chevron-down" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div class="mt-2 text-gray-600 hidden"> |
|
|
<p>Simply drag and drop your audio file onto the upload area or click to browse your computer. We support MP3, WAV, FLAC, OGG and other common audio formats.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<button class="w-full flex justify-between items-center font-bold"> |
|
|
<span>Is there a file size limit?</span> |
|
|
<i data-feather="chevron-down" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div class="mt-2 text-gray-600 hidden"> |
|
|
<p>Yes, the maximum file size for free users is 50MB. For larger files, consider our premium plans for extended limits and faster processing.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<button class="w-full flex justify-between items-center font-bold"> |
|
|
<span>How long does processing take?</span> |
|
|
<i data-feather="chevron-down" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div class="mt-2 text-gray-600 hidden"> |
|
|
<p>Processing time depends on the length and quality of your audio file. Typically, a 3-minute song takes about 1-2 minutes to process at standard quality settings.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<button class="w-full flex justify-between items-center font-bold"> |
|
|
<span>Can I use this for commercial purposes?</span> |
|
|
<i data-feather="chevron-down" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div class="mt-2 text-gray-600 hidden"> |
|
|
<p>Yes, however you must ensure you have the rights to the original audio material you're processing. The separated stems inherit the same copyright status as the original track.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i data-feather="music" class="w-6 h-6"></i> |
|
|
<span class="text-xl font-bold">Splitter AI</span> |
|
|
</div> |
|
|
<p class="text-gray-400 max-w-xs">AI-powered vocal remover and music stem separator for artists, DJs, and music enthusiasts.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-4">Product</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">API</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-4">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Splitter AI. All rights reserved.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter" class="w-5 h-5"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram" class="w-5 h-5"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook" class="w-5 h-5"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('footer button').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const answer = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
answer.classList.toggle('hidden'); |
|
|
|
|
|
if (!answer.classList.contains('hidden')) { |
|
|
icon.setAttribute('data-feather', 'chevron-up'); |
|
|
} else { |
|
|
icon.setAttribute('data-feather', 'chevron-down'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const fileUploader = document.querySelector('.file-uploader'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
let selectedMode = 'vocals'; |
|
|
let uploadedFile = null; |
|
|
|
|
|
|
|
|
document.querySelector('[data-mode="vocals"]').classList.add('border-blue-500', 'bg-blue-50'); |
|
|
|
|
|
fileUploader.addEventListener('click', () => fileInput.click()); |
|
|
|
|
|
fileInput.addEventListener('change', (e) => { |
|
|
if (e.target.files.length > 0) { |
|
|
uploadedFile = e.target.files[0]; |
|
|
|
|
|
const validTypes = ['audio/mpeg', 'audio/wav', 'audio/x-wav', 'audio/flac', 'audio/ogg', 'audio/aac']; |
|
|
if (!validTypes.includes(uploadedFile.type)) { |
|
|
alert('Please upload a valid audio file (MP3, WAV, FLAC, OGG, AAC)'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (uploadedFile.size > 100 * 1024 * 1024) { |
|
|
alert('File size exceeds 100MB limit'); |
|
|
return; |
|
|
} |
|
|
|
|
|
fileUploader.innerHTML = ` |
|
|
<i data-feather="check-circle" class="w-12 h-12 mx-auto text-green-500 mb-4"></i> |
|
|
<p class="text-gray-700 font-medium truncate max-w-xs mx-auto">${uploadedFile.name}</p> |
|
|
<p class="text-sm text-gray-400">${(uploadedFile.size / 1024 / 1024).toFixed(2)} MB</p> |
|
|
`; |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.getElementById('processingOptions').classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.option-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
document.querySelectorAll('.option-btn').forEach(b => { |
|
|
b.classList.remove('border-blue-500', 'bg-blue-50'); |
|
|
b.classList.add('border-gray-200'); |
|
|
}); |
|
|
btn.classList.remove('border-gray-200'); |
|
|
btn.classList.add('border-blue-500', 'bg-blue-50'); |
|
|
selectedMode = btn.dataset.mode; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('processBtn').addEventListener('click', async () => { |
|
|
if (!uploadedFile) { |
|
|
alert('Please upload an audio file first.'); |
|
|
return; |
|
|
} |
|
|
if (!selectedMode) { |
|
|
alert('Please select a processing option.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const processBtn = document.getElementById('processBtn'); |
|
|
const originalText = processBtn.innerHTML; |
|
|
processBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 mr-2 animate-spin"></i>Processing...'; |
|
|
processBtn.disabled = true; |
|
|
feather.replace(); |
|
|
|
|
|
try { |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('audio', uploadedFile); |
|
|
formData.append('mode', selectedMode); |
|
|
|
|
|
|
|
|
document.getElementById('resultsSection').classList.remove('hidden'); |
|
|
document.querySelector('#resultsSection .waveform').innerHTML = |
|
|
'<div class="absolute inset-0 flex items-center justify-center">Processing audio...</div>'; |
|
|
|
|
|
|
|
|
const response = await fetch('/api/process', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error('Processing failed'); |
|
|
} |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.waveform').forEach(wave => { |
|
|
wave.innerHTML = ''; |
|
|
wave.style.background = 'linear-gradient(90deg, #4a6cf7 50%, transparent 50%)'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.download-btn').forEach(btn => { |
|
|
btn.onclick = () => { |
|
|
const format = btn.dataset.format || 'mp3'; |
|
|
const type = btn.dataset.type || selectedMode; |
|
|
window.location.href = `/api/download?track=${type}&format=${format}&file=${result.id}`; |
|
|
}; |
|
|
}); |
|
|
|
|
|
|
|
|
alert(`Successfully separated ${selectedMode} track!`); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
alert('Processing failed. Please try again later.'); |
|
|
} finally { |
|
|
|
|
|
processBtn.innerHTML = originalText; |
|
|
processBtn.disabled = false; |
|
|
feather.replace(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
fileUploader.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
fileUploader.classList.add('border-blue-500', 'bg-blue-50'); |
|
|
}); |
|
|
|
|
|
fileUploader.addEventListener('dragleave', () => { |
|
|
fileUploader.classList.remove('border-blue-500', 'bg-blue-50'); |
|
|
}); |
|
|
|
|
|
fileUploader.addEventListener('drop', (e) => { |
|
|
e.preventDefault(); |
|
|
fileUploader.classList.remove('border-blue-500', 'bg-blue-50'); |
|
|
|
|
|
if (e.dataTransfer.files.length) { |
|
|
const file = e.dataTransfer.files[0]; |
|
|
|
|
|
const validTypes = ['audio/mpeg', 'audio/wav', 'audio/x-wav', 'audio/flac', 'audio/ogg', 'audio/aac']; |
|
|
if (!validTypes.includes(file.type)) { |
|
|
alert('Please upload a valid audio file (MP3, WAV, FLAC, OGG, AAC)'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const dataTransfer = new DataTransfer(); |
|
|
dataTransfer.items.add(file); |
|
|
fileInput.files = dataTransfer.files; |
|
|
|
|
|
const event = new Event('change'); |
|
|
fileInput.dispatchEvent(event); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('[aria-label="Show Settings"]').addEventListener('click', (e) => { |
|
|
const settings = e.target.closest('div').nextElementSibling; |
|
|
settings.classList.toggle('hidden'); |
|
|
|
|
|
const icon = e.target.querySelector('i') || e.target.closest('button').querySelector('i'); |
|
|
if (settings.classList.contains('hidden')) { |
|
|
icon.setAttribute('data-feather', 'settings'); |
|
|
e.target.querySelector('span').textContent = 'Show Settings'; |
|
|
} else { |
|
|
icon.setAttribute('data-feather', 'chevron-up'); |
|
|
e.target.querySelector('span').textContent = 'Hide Settings'; |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.play-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
const isPlaying = btn.classList.contains('playing'); |
|
|
|
|
|
if (isPlaying) { |
|
|
btn.classList.remove('playing'); |
|
|
btn.innerHTML = '<i data-feather="play" class="w-5 h-5 ml-0.5"></i>'; |
|
|
} else { |
|
|
btn.classList.add('playing'); |
|
|
btn.innerHTML = '<i data-feather="pause" class="w-5 h-5"></i>'; |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button:has(i[data-feather="download"])').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
alert('Download functionality would be implemented here'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button:has(i[data-feather="share-2"])').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
alert('Share functionality would be implemented here'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
