Hugging Face's logo

Spaces:
xibix
/
karaoke
Running

App Files Community
karaoke / index.html
xibix's picture
xibix
Crear una web donde subes un archivo mp3 o mp4 o link de YouTube u otro link de video o audio y convertirla en .kar para karaoke con sonido original y pista original y eliminar la voz y agregar el texto perfecto para poder cantar y una vez finalizado que haya un bot贸n donde puedes descargar el archivo .kar o formato .mp4 o .mkv y agregar donde subir los archivos que ser谩n cambiados a pistas para hacer karaoke - Initial Deployment
b8cb974 verified
raw
history blame contribute delete
38.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karaoke Converter Pro</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.file-drop-area {
border: 2px dashed #3b82f6;
transition: all 0.3s ease;
}
.file-drop-area.active {
border-color: #10b981;
background-color: rgba(16, 185, 129, 0.05);
}
.progress-bar {
transition: width 0.3s ease;
}
.waveform {
height: 100px;
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
position: relative;
overflow: hidden;
}
.waveform::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: wave 2s linear infinite;
}
@keyframes wave {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.format-option:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">Karaoke Converter Pro</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Transform your favorite songs into perfect karaoke tracks with synchronized lyrics
</p>
</header>
<!-- Main Converter Card -->
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<!-- Tabs -->
<div class="flex border-b">
<button id="upload-tab" class="tab-btn active flex-1 py-4 px-6 text-center font-medium text-indigo-700 bg-indigo-50">
<i class="fas fa-upload mr-2"></i> Upload File
</button>
<button id="link-tab" class="tab-btn flex-1 py-4 px-6 text-center font-medium text-gray-500 hover:text-indigo-700">
<i class="fas fa-link mr-2"></i> YouTube/URL
</button>
</div>
<!-- Upload File Content -->
<div id="upload-content" class="p-6">
<div class="file-drop-area rounded-lg p-8 text-center mb-6" id="drop-area">
<i class="fas fa-music text-5xl text-indigo-500 mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Drag & Drop Your Audio/Video File</h3>
<p class="text-gray-500 mb-4">Supports MP3, MP4, WAV, AVI, MKV and more</p>
<input type="file" id="file-input" class="hidden" accept="audio/*,video/*">
<label for="file-input" class="inline-block bg-indigo-600 text-white px-6 py-2 rounded-full cursor-pointer hover:bg-indigo-700 transition">
<i class="fas fa-folder-open mr-2"></i> Browse Files
</label>
</div>
<div id="file-info" class="hidden mb-6 p-4 bg-gray-50 rounded-lg">
<div class="flex items-center">
<i class="fas fa-file-audio text-3xl text-indigo-500 mr-4"></i>
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<span class="font-medium" id="file-name">song.mp3</span>
<span class="text-sm text-gray-500" id="file-size">3.2 MB</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="upload-progress" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- URL Input Content -->
<div id="link-content" class="hidden p-6">
<div class="mb-6">
<label for="url-input" class="block text-sm font-medium text-gray-700 mb-2">Enter YouTube or media URL</label>
<div class="flex">
<input type="url" id="url-input" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="https://www.youtube.com/watch?v=...">
<button id="fetch-url" class="bg-indigo-600 text-white px-6 py-2 rounded-r-lg hover:bg-indigo-700 transition">
<i class="fas fa-download mr-2"></i> Fetch
</button>
</div>
</div>
<div id="url-info" class="hidden mb-6 p-4 bg-gray-50 rounded-lg">
<div class="flex items-center">
<i class="fas fa-video text-3xl text-indigo-500 mr-4"></i>
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<span class="font-medium" id="url-title">YouTube Video</span>
<span class="text-sm text-gray-500" id="url-duration">3:45</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="url-progress" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Options Section -->
<div class="p-6 border-t border-gray-200">
<h3 class="text-lg font-medium text-gray-900 mb-4">Conversion Options</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<!-- Voice Removal -->
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-3">
<i class="fas fa-microphone-slash text-indigo-500 mr-3"></i>
<h4 class="font-medium">Voice Removal</h4>
</div>
<div class="flex items-center space-x-4">
<div class="flex-1">
<select id="voice-removal" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="aggressive">Aggressive (best for pop)</option>
<option value="moderate" selected>Moderate (balanced)</option>
<option value="gentle">Gentle (preserves instruments)</option>
</select>
</div>
</div>
</div>
<!-- Lyrics Options -->
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-3">
<i class="fas fa-align-left text-indigo-500 mr-3"></i>
<h4 class="font-medium">Lyrics Options</h4>
</div>
<div class="space-y-2">
<div class="flex items-center">
<input type="checkbox" id="auto-lyrics" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
<label for="auto-lyrics" class="ml-2 block text-sm text-gray-700">Auto-detect lyrics</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="sync-lyrics" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
<label for="sync-lyrics" class="ml-2 block text-sm text-gray-700">Auto-sync with timing</label>
</div>
</div>
</div>
</div>
<!-- Output Format -->
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-3">Output Format</h4>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div class="format-option cursor-pointer p-3 border rounded-lg text-center transition hover:border-indigo-500" data-format="kar">
<i class="fas fa-compact-disc text-3xl text-indigo-500 mb-2"></i>
<div class="font-medium">.KAR</div>
<div class="text-xs text-gray-500">Karaoke Format</div>
</div>
<div class="format-option cursor-pointer p-3 border rounded-lg text-center transition hover:border-indigo-500" data-format="mp4">
<i class="fas fa-film text-3xl text-indigo-500 mb-2"></i>
<div class="font-medium">.MP4</div>
<div class="text-xs text-gray-500">Video with Lyrics</div>
</div>
<div class="format-option cursor-pointer p-3 border rounded-lg text-center transition hover:border-indigo-500" data-format="mkv">
<i class="fas fa-video text-3xl text-indigo-500 mb-2"></i>
<div class="font-medium">.MKV</div>
<div class="text-xs text-gray-500">High Quality</div>
</div>
<div class="format-option cursor-pointer p-3 border rounded-lg text-center transition hover:border-indigo-500" data-format="mp3">
<i class="fas fa-music text-3xl text-indigo-500 mb-2"></i>
<div class="font-medium">.MP3</div>
<div class="text-xs text-gray-500">Audio Only</div>
</div>
</div>
<input type="hidden" id="selected-format" value="kar">
</div>
<!-- Advanced Options (Collapsible) -->
<div class="mb-6">
<button id="advanced-toggle" class="flex items-center text-indigo-600 hover:text-indigo-800">
<i class="fas fa-cog mr-2"></i>
<span>Advanced Options</span>
<i class="fas fa-chevron-down ml-2 text-sm"></i>
</button>
<div id="advanced-options" class="hidden mt-4 space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="pitch" class="block text-sm font-medium text-gray-700">Pitch Adjustment</label>
<input type="range" id="pitch" min="-12" max="12" value="0" class="w-full mt-1">
<div class="flex justify-between text-xs text-gray-500">
<span>-12 (Lower)</span>
<span>0 (Original)</span>
<span>+12 (Higher)</span>
</div>
</div>
<div>
<label for="tempo" class="block text-sm font-medium text-gray-700">Tempo Adjustment</label>
<input type="range" id="tempo" min="80" max="120" value="100" class="w-full mt-1">
<div class="flex justify-between text-xs text-gray-500">
<span>80% (Slower)</span>
<span>100% (Original)</span>
<span>120% (Faster)</span>
</div>
</div>
</div>
<div>
<label for="lyrics-color" class="block text-sm font-medium text-gray-700">Lyrics Color</label>
<input type="color" id="lyrics-color" value="#3b82f6" class="mt-1 h-10 w-20">
</div>
</div>
</div>
</div>
<!-- Convert Button -->
<div class="p-6 bg-gray-50 text-center">
<button id="convert-btn" class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-8 py-3 rounded-full font-medium hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-105 shadow-lg">
<i class="fas fa-magic mr-2"></i> Convert to Karaoke
</button>
</div>
</div>
<!-- Processing Section (Hidden by default) -->
<div id="processing-section" class="hidden max-w-4xl mx-auto mt-8 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-center text-indigo-800 mb-6">Processing Your Karaoke File</h2>
<div class="waveform rounded-lg mb-6"></div>
<div class="space-y-4 mb-6">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="fas fa-check text-indigo-600"></i>
</div>
<span class="font-medium">Uploading file</span>
<span class="ml-auto text-sm text-gray-500">100%</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="fas fa-check text-indigo-600"></i>
</div>
<span class="font-medium">Analyzing audio</span>
<span class="ml-auto text-sm text-gray-500">100%</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<div id="voice-removal-spinner" class="animate-spin h-4 w-4 border-2 border-indigo-600 border-t-transparent rounded-full"></div>
</div>
<span class="font-medium">Removing vocals</span>
<span id="voice-removal-percent" class="ml-auto text-sm text-gray-500">65%</span>
</div>
<div class="flex items-center opacity-50">
<div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
<div class="h-4 w-4"></div>
</div>
<span class="font-medium">Syncing lyrics</span>
<span class="ml-auto text-sm text-gray-500">0%</span>
</div>
<div class="flex items-center opacity-50">
<div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
<div class="h-4 w-4"></div>
</div>
<span class="font-medium">Generating output</span>
<span class="ml-auto text-sm text-gray-500">0%</span>
</div>
</div>
<div class="text-center text-gray-500">
<i class="fas fa-info-circle mr-2"></i> This process may take a few minutes depending on file length
</div>
</div>
</div>
<!-- Results Section (Hidden by default) -->
<div id="results-section" class="hidden max-w-4xl mx-auto mt-8 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex flex-col md:flex-row items-center justify-between mb-6">
<div>
<h2 class="text-2xl font-bold text-indigo-800">Your Karaoke File is Ready!</h2>
<p class="text-gray-600">Download your converted file in the selected format</p>
</div>
<div class="mt-4 md:mt-0">
<span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
<i class="fas fa-check-circle mr-1"></i> Success
</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- Preview -->
<div class="bg-gray-50 rounded-lg overflow-hidden">
<div class="bg-black h-48 flex items-center justify-center">
<i class="fas fa-music text-4xl text-white"></i>
</div>
<div class="p-4">
<h4 class="font-medium mb-2">Preview</h4>
<div class="flex items-center space-x-2">
<button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
<i class="fas fa-play"></i>
</button>
<div class="flex-1 bg-gray-200 rounded-full h-1.5">
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 30%"></div>
</div>
<span class="text-xs text-gray-500">1:23 / 3:45</span>
</div>
</div>
</div>
<!-- File Info -->
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-medium mb-4">File Information</h4>
<div class="space-y-3">
<div class="flex">
<span class="text-gray-600 w-32">Filename:</span>
<span class="font-medium" id="result-filename">song.kar</span>
</div>
<div class="flex">
<span class="text-gray-600 w-32">Format:</span>
<span class="font-medium" id="result-format">KAR (Karaoke)</span>
</div>
<div class="flex">
<span class="text-gray-600 w-32">Size:</span>
<span class="font-medium" id="result-size">4.7 MB</span>
</div>
<div class="flex">
<span class="text-gray-600 w-32">Duration:</span>
<span class="font-medium" id="result-duration">3:45</span>
</div>
<div class="flex">
<span class="text-gray-600 w-32">Vocals:</span>
<span class="font-medium" id="result-vocals">85% removed</span>
</div>
</div>
</div>
</div>
<!-- Download Buttons -->
<div class="flex flex-wrap justify-center gap-4">
<button id="download-btn" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition flex items-center">
<i class="fas fa-download mr-2"></i> Download .KAR
</button>
<button class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-file-export mr-2"></i> Export to MP4
</button>
<button class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition flex items-center">
<i class="fas fa-cloud-upload-alt mr-2"></i> Save to Cloud
</button>
</div>
</div>
</div>
<!-- Features Section -->
<div class="max-w-6xl mx-auto mt-16">
<h2 class="text-3xl font-bold text-center text-indigo-800 mb-12">Why Choose Karaoke Converter Pro?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
<div class="text-indigo-500 text-4xl mb-4">
<i class="fas fa-microphone-alt"></i>
</div>
<h3 class="text-xl font-bold mb-2">Professional Vocal Removal</h3>
<p class="text-gray-600">Our advanced algorithm removes vocals while preserving instrumental quality for the perfect karaoke experience.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
<div class="text-indigo-500 text-4xl mb-4">
<i class="fas fa-text-height"></i>
</div>
<h3 class="text-xl font-bold mb-2">Smart Lyrics Synchronization</h3>
<p class="text-gray-600">Automatically detects and syncs lyrics with your music, highlighting words in perfect timing with the song.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
<div class="text-indigo-500 text-4xl mb-4">
<i class="fas fa-file-export"></i>
</div>
<h3 class="text-xl font-bold mb-2">Multiple Output Formats</h3>
<p class="text-gray-600">Export to .KAR, .MP4, .MKV or audio-only formats compatible with all karaoke systems and media players.</p>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="max-w-4xl mx-auto mt-16 mb-16">
<h2 class="text-3xl font-bold text-center text-indigo-800 mb-8">Frequently Asked Questions</h2>
<div class="space-y-4">
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 font-medium flex justify-between items-center">
<span>What audio/video formats are supported?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-answer hidden p-4">
We support most common formats including MP3, WAV, FLAC, AAC for audio and MP4, AVI, MOV, MKV for video files. For YouTube conversions, we accept any valid YouTube URL.
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 font-medium flex justify-between items-center">
<span>How does the vocal removal work?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-answer hidden p-4">
Our proprietary algorithm analyzes the stereo field to identify and remove center-panned vocals while preserving instruments. You can adjust the aggressiveness of this removal in the options.
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 font-medium flex justify-between items-center">
<span>Can I edit the auto-synced lyrics?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-answer hidden p-4">
Yes! After conversion, you'll have the option to fine-tune the lyrics timing and text before downloading your final karaoke file.
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 font-medium flex justify-between items-center">
<span>Is there a file size limit?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-answer hidden p-4">
Free users can convert files up to 10MB. For larger files up to 100MB, please consider our premium subscription.
</div>
</div>
</div>
</div>
</div>
<!-- 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 items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-bold">Karaoke Converter Pro</h3>
<p class="text-gray-400">Transform any song into karaoke magic</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="border-t border-gray-700 mt-6 pt-6 text-sm text-gray-400 text-center">
<p>&copy; 2023 Karaoke Converter Pro. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Tab switching
document.getElementById('upload-tab').addEventListener('click', function() {
document.getElementById('upload-content').classList.remove('hidden');
document.getElementById('link-content').classList.add('hidden');
this.classList.add('text-indigo-700', 'bg-indigo-50');
this.classList.remove('text-gray-500', 'hover:text-indigo-700');
document.getElementById('link-tab').classList.add('text-gray-500', 'hover:text-indigo-700');
document.getElementById('link-tab').classList.remove('text-indigo-700', 'bg-indigo-50');
});
document.getElementById('link-tab').addEventListener('click', function() {
document.getElementById('link-content').classList.remove('hidden');
document.getElementById('upload-content').classList.add('hidden');
this.classList.add('text-indigo-700', 'bg-indigo-50');
this.classList.remove('text-gray-500', 'hover:text-indigo-700');
document.getElementById('upload-tab').classList.add('text-gray-500', 'hover:text-indigo-700');
document.getElementById('upload-tab').classList.remove('text-indigo-700', 'bg-indigo-50');
});
// File upload handling
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const fileInfo = document.getElementById('file-info');
const fileName = document.getElementById('file-name');
const fileSize = document.getElementById('file-size');
const uploadProgress = document.getElementById('upload-progress');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropArea.classList.add('active');
}
function unhighlight() {
dropArea.classList.remove('active');
}
dropArea.addEventListener('drop', handleDrop, false);
fileInput.addEventListener('change', handleFiles, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles({target: {files: files}});
}
function handleFiles(e) {
const files = e.target.files;
if (files.length) {
const file = files[0];
displayFileInfo(file);
simulateUpload(file);
}
}
function displayFileInfo(file) {
fileName.textContent = file.name;
fileSize.textContent = formatFileSize(file.size);
fileInfo.classList.remove('hidden');
}
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
function simulateUpload(file) {
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
}
uploadProgress.style.width = progress + '%';
}, 200);
}
// URL fetch handling
document.getElementById('fetch-url').addEventListener('click', function() {
const urlInput = document.getElementById('url-input').value;
if (urlInput) {
const urlInfo = document.getElementById('url-info');
const urlTitle = document.getElementById('url-title');
const urlDuration = document.getElementById('url-duration');
const urlProgress = document.getElementById('url-progress');
urlInfo.classList.remove('hidden');
urlTitle.textContent = "YouTube Video";
urlDuration.textContent = "3:45";
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 15;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
}
urlProgress.style.width = progress + '%';
}, 200);
}
});
// Format selection
document.querySelectorAll('.format-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.format-option').forEach(opt => {
opt.classList.remove('border-indigo-500', 'bg-indigo-50');
});
this.classList.add('border-indigo-500', 'bg-indigo-50');
document.getElementById('selected-format').value = this.dataset.format;
});
});
// Advanced options toggle
document.getElementById('advanced-toggle').addEventListener('click', function() {
const options = document.getElementById('advanced-options');
const icon = this.querySelector('.fa-chevron-down');
if (options.classList.contains('hidden')) {
options.classList.remove('hidden');
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
} else {
options.classList.add('hidden');
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
}
});
// FAQ accordion
document.querySelectorAll('.faq-question').forEach(question => {
question.addEventListener('click', function() {
const answer = this.nextElementSibling;
const icon = this.querySelector('.fa-chevron-down, .fa-chevron-up');
if (answer.classList.contains('hidden')) {
answer.classList.remove('hidden');
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
} else {
answer.classList.add('hidden');
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
}
});
});
// Convert button
document.getElementById('convert-btn').addEventListener('click', function() {
// Hide main card and show processing section
document.querySelector('.max-w-4xl.bg-white').classList.add('hidden');
document.getElementById('processing-section').classList.remove('hidden');
// Simulate processing steps
setTimeout(() => {
document.getElementById('voice-removal-spinner').classList.add('hidden');
document.getElementById('voice-removal-spinner').innerHTML = '<i class="fas fa-check text-indigo-600"></i>';
document.getElementById('voice-removal-percent').textContent = '100%';
// Move to next step
const steps = document.querySelectorAll('#processing-section .flex.items-center');
steps[3].classList.remove('opacity-50');
steps[3].querySelector('div').innerHTML = '<div class="animate-spin h-4 w-4 border-2 border-indigo-600 border-t-transparent rounded-full"></div>';
steps[3].querySelector('span:last-child').textContent = '45%';
setTimeout(() => {
steps[3].querySelector('div').innerHTML = '<i class="fas fa-check text-indigo-600"></i>';
steps[3].querySelector('span:last-child').textContent = '100%';
steps[4].classList.remove('opacity-50');
steps[4].querySelector('div').innerHTML = '<div class="animate-spin h-4 w-4 border-2 border-indigo-600 border-t-transparent rounded-full"></div>';
steps[4].querySelector('span:last-child').textContent = '30%';
setTimeout(() => {
steps[4].querySelector('div').innerHTML = '<i class="fas fa-check text-indigo-600"></i>';
steps[4].querySelector('span:last-child').textContent = '100%';
// Show results
setTimeout(() => {
document.getElementById('processing-section').classList.add('hidden');
document.getElementById('results-section').classList.remove('hidden');
// Set result info
const format = document.getElementById('selected-format').value;
document.getElementById('result-filename').textContent = `song.${format}`;
document.getElementById('result-format').textContent =
format === 'kar' ? 'KAR (Karaoke)' :
format === 'mp4' ? 'MP4 (Video)' :
format === 'mkv' ? 'MKV (High Quality)' : 'MP3 (Audio)';
}, 500);
}, 1500);
}, 2000);
}, 3000);
});
// Download button
document.getElementById('download-btn').addEventListener('click', function() {
const format = document.getElementById('selected-format').value;
alert(`Downloading your .${format.toUpperCase()} file...`);
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=xibix/karaoke" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>