|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WaveForm - Audio Processor</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js@7"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); |
|
|
} |
|
|
.waveform-container { |
|
|
height: 200px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 10px; |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
.knob { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(145deg, #2a5298, #1e3c72); |
|
|
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), |
|
|
-5px -5px 15px rgba(255, 255, 255, 0.1); |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
} |
|
|
.knob::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background: #fff; |
|
|
border-radius: 50%; |
|
|
top: 10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
.visualizer { |
|
|
height: 150px; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border-radius: 10px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.bar { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
width: 8px; |
|
|
background: #4facfe; |
|
|
border-radius: 4px 4px 0 0; |
|
|
transition: height 0.1s ease; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen text-white font-sans"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-wave-square text-4xl mr-3 text-blue-300"></i> |
|
|
<h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-purple-300"> |
|
|
WaveForm Pro |
|
|
</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="helpBtn" class="px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-question-circle mr-2"></i>Help |
|
|
</button> |
|
|
<button class="px-4 py-2 rounded-full bg-purple-600 hover:bg-purple-700 transition"> |
|
|
<i class="fas fa-cog mr-2"></i>Settings |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm border border-white border-opacity-20"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-file-audio mr-2"></i> Audio File |
|
|
</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block mb-2 text-sm font-medium">Upload Audio</label> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="file" id="audioUpload" accept="audio/*" class="hidden"> |
|
|
<button id="uploadBtn" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"> |
|
|
<i class="fas fa-upload mr-2"></i> Choose File |
|
|
</button> |
|
|
<button id="recordBtn" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition"> |
|
|
<i class="fas fa-microphone mr-2"></i> Record |
|
|
</button> |
|
|
</div> |
|
|
<div id="fileName" class="mt-2 text-sm text-blue-200"></div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-medium mb-3">Playback Controls</h3> |
|
|
<div class="flex justify-center items-center space-x-6"> |
|
|
<button id="rewindBtn" class="p-3 rounded-full bg-blue-800 hover:bg-blue-900 transition"> |
|
|
<i class="fas fa-backward"></i> |
|
|
</button> |
|
|
<button id="playBtn" class="p-4 rounded-full bg-green-600 hover:bg-green-700 transition text-xl"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button id="pauseBtn" class="p-4 rounded-full bg-yellow-600 hover:bg-yellow-700 transition text-xl"> |
|
|
<i class="fas fa-pause"></i> |
|
|
</button> |
|
|
<button id="forwardBtn" class="p-3 rounded-full bg-blue-800 hover:bg-blue-900 transition"> |
|
|
<i class="fas fa-forward"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="volume" class="block mb-2 text-sm font-medium">Volume</label> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-volume-down mr-2 text-blue-300"></i> |
|
|
<input type="range" id="volume" min="0" max="1" step="0.01" value="0.8" |
|
|
class="w-full h-2 bg-blue-900 rounded-lg appearance-none cursor-pointer"> |
|
|
<i class="fas fa-volume-up ml-2 text-blue-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="playbackRate" class="block mb-2 text-sm font-medium">Playback Speed</label> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-tachometer-alt mr-2 text-blue-300"></i> |
|
|
<input type="range" id="playbackRate" min="0.5" max="2" step="0.1" value="1" |
|
|
class="w-full h-2 bg-blue-900 rounded-lg appearance-none cursor-pointer"> |
|
|
<span id="rateValue" class="ml-2 text-sm">1.0x</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm border border-white border-opacity-20"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-waveform-path mr-2"></i> Waveform |
|
|
</h2> |
|
|
<div id="waveform" class="waveform-container"></div> |
|
|
<div class="flex justify-between mt-4 text-sm"> |
|
|
<span id="currentTime">0:00</span> |
|
|
<span id="duration">0:00</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm border border-white border-opacity-20"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-bar mr-2"></i> Audio Visualizer |
|
|
</h2> |
|
|
<div id="visualizer" class="visualizer"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm border border-white border-opacity-20"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-sliders-h mr-2"></i> Audio Effects |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="effect-panel"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<label class="font-medium">Equalizer</label> |
|
|
<div class="flex items-center"> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" id="eqToggle" class="sr-only peer" checked> |
|
|
<div class="w-9 h-5 bg-blue-900 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-5 gap-2 mb-4"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<label class="text-xs mb-1">60Hz</label> |
|
|
<input type="range" class="eq-band" data-freq="60" min="-12" max="12" value="0" orient="vertical"> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<label class="text-xs mb-1">230Hz</label> |
|
|
<input type="range" class="eq-band" data-freq="230" min="-12" max="12" value="0" orient="vertical"> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<label class="text-xs mb-1">910Hz</label> |
|
|
<input type="range" class="eq-band" data-freq="910" min="-12" max="12" value="0" |
|
|
</html> |
