Download index.html from meriks1/https-vocalremover-org-splitter-ai: direct link, hf CLI and curl.
- Browser
- Download file 32.5 kB
-
https://huggingface.co/spaces/meriks1/https-vocalremover-org-splitter-ai/resolve/main/index.html
- Command line
-
hf download hf://spaces/meriks1/https-vocalremover-org-splitter-ai/index.html
-
curl -L -o index.html https://huggingface.co/spaces/meriks1/https-vocalremover-org-splitter-ai/resolve/main/index.html
32.5 kB
| <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"> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Hero Section --> | |
| <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> | |
| <!-- Main App 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> | |
| <!-- File Upload --> | |
| <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> | |
| <!-- Processing Options --> | |
| <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> | |
| <!-- Advanced Settings --> | |
| <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> | |
| <!-- Process Button --> | |
| <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> | |
| <!-- Features 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> | |
| <!-- Results Preview 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"> | |
| <!-- Original Track --> | |
| <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> | |
| <!-- Separated Vocals --> | |
| <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> | |
| <!-- Instrumental --> | |
| <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> | |
| <!-- FAQ 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 --> | |
| <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> | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // FAQ accordion functionality | |
| 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(); | |
| }); | |
| }); | |
| // File upload interaction | |
| const fileUploader = document.querySelector('.file-uploader'); | |
| const fileInput = document.getElementById('fileInput'); | |
| let selectedMode = 'vocals'; // Default to vocals | |
| let uploadedFile = null; | |
| // Auto-select vocals mode on page load | |
| 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]; | |
| // Validate file type | |
| 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; | |
| } | |
| // Validate file size (max 100MB) | |
| 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(); | |
| // Show processing options | |
| document.getElementById('processingOptions').classList.remove('hidden'); | |
| } | |
| }); | |
| // Processing mode selection | |
| 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; | |
| }); | |
| }); | |
| // Process button functionality | |
| 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; | |
| } | |
| // Show processing state | |
| 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 { | |
| // Create FormData for file upload | |
| const formData = new FormData(); | |
| formData.append('audio', uploadedFile); | |
| formData.append('mode', selectedMode); | |
| // Show loading state | |
| document.getElementById('resultsSection').classList.remove('hidden'); | |
| document.querySelector('#resultsSection .waveform').innerHTML = | |
| '<div class="absolute inset-0 flex items-center justify-center">Processing audio...</div>'; | |
| // Send to server for processing | |
| const response = await fetch('/api/process', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| throw new Error('Processing failed'); | |
| } | |
| const result = await response.json(); | |
| // Update UI with results | |
| document.querySelectorAll('.waveform').forEach(wave => { | |
| wave.innerHTML = ''; // Clear loading message | |
| wave.style.background = 'linear-gradient(90deg, #4a6cf7 50%, transparent 50%)'; | |
| }); | |
| // Enable download buttons | |
| 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}`; | |
| }; | |
| }); | |
| // Show success message | |
| alert(`Successfully separated ${selectedMode} track!`); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| alert('Processing failed. Please try again later.'); | |
| } finally { | |
| // Reset button | |
| processBtn.innerHTML = originalText; | |
| processBtn.disabled = false; | |
| feather.replace(); | |
| } | |
| }); | |
| // Make file upload draggable | |
| 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]; | |
| // Validate file type | |
| 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; | |
| } | |
| // Create a new DataTransfer to set the file | |
| const dataTransfer = new DataTransfer(); | |
| dataTransfer.items.add(file); | |
| fileInput.files = dataTransfer.files; | |
| const event = new Event('change'); | |
| fileInput.dispatchEvent(event); | |
| } | |
| }); | |
| // Advanced settings toggle | |
| 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(); | |
| }); | |
| // Play button functionality for audio preview | |
| 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(); | |
| }); | |
| }); | |
| // Download button functionality | |
| document.querySelectorAll('button:has(i[data-feather="download"])').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| alert('Download functionality would be implemented here'); | |
| }); | |
| }); | |
| // Share button functionality | |
| document.querySelectorAll('button:has(i[data-feather="share-2"])').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| alert('Share functionality would be implemented here'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |