|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Add Audio to Video with AI Sound Effect Generator | Saifs.ai</title>
|
|
<meta name="description" content="Upload your video and let our AI add sound to video - Insert audio, music, or AI-generated sound effects to your videos online">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<main>
|
|
<section class="hero">
|
|
<h1>Add Audio to Video with AI Sound Effect Generator</h1>
|
|
<p>Upload your video and let our AI add sound to video - Insert audio, music, or AI-generated sound effects to your videos online</p>
|
|
<div class="hero-border"></div>
|
|
</section>
|
|
|
|
<section class="upload-container">
|
|
<div class="card">
|
|
<div class="flex-container">
|
|
|
|
<div class="upload-section">
|
|
<div class="upload-area" :class="{ 'drag-over': isDragging }"
|
|
@dragover.prevent="isDragging = true"
|
|
@dragleave.prevent="isDragging = false"
|
|
@drop.prevent="handleFileDrop">
|
|
<div class="upload-icon">
|
|
<svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
|
|
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="upload-text">
|
|
<p>Drag and drop your video here or click to browse</p>
|
|
<p class="upload-formats">Supported formats: MP4, MOV, AVI (Max 100MB)</p>
|
|
</div>
|
|
<input type="file" ref="fileInput" @change="handleFileSelect" accept="video/*" class="file-input">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="preview-section">
|
|
<div class="music-icon">
|
|
<svg viewBox="0 0 24 24" width="48" height="48" fill="#6366f1">
|
|
<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"/>
|
|
</svg>
|
|
</div>
|
|
<p class="preview-text">Your enhanced video will appear here</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-section">
|
|
<input type="text"
|
|
v-model="soundDescription"
|
|
placeholder="Describe the sound effects you want (e.g., 'ambient background music')"
|
|
class="sound-input">
|
|
<a href="https://saifs.ai/ai-sound-effect-generator" class="generate-btn">
|
|
<span class="btn-icon">✨</span> Generate Sound Effects
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |
