|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WebDAW - Browser-Based Digital Audio Workstation</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> |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #1a202c; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #4a5568; |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #718096; |
|
|
} |
|
|
|
|
|
|
|
|
.waveform { |
|
|
background: linear-gradient(to bottom, #2d3748, #1a202c); |
|
|
height: 60px; |
|
|
border-radius: 4px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.piano-key { |
|
|
border: 1px solid #4a5568; |
|
|
height: 24px; |
|
|
position: relative; |
|
|
} |
|
|
.piano-key.white { |
|
|
background-color: #f7fafc; |
|
|
} |
|
|
.piano-key.black { |
|
|
background-color: #1a202c; |
|
|
height: 16px; |
|
|
margin: 0 -10px; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
|
|
|
.knob { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, #2d3748, #4a5568); |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
} |
|
|
.knob::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
left: 50%; |
|
|
width: 4px; |
|
|
height: 12px; |
|
|
background: #e2e8f0; |
|
|
transform-origin: bottom center; |
|
|
transform: translateX(-50%) rotate(0deg); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
.fader { |
|
|
width: 24px; |
|
|
height: 120px; |
|
|
background: #2d3748; |
|
|
border-radius: 4px; |
|
|
position: relative; |
|
|
} |
|
|
.fader-handle { |
|
|
width: 100%; |
|
|
height: 8px; |
|
|
background: #e2e8f0; |
|
|
border-radius: 2px; |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.transport-btn { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.transport-btn:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.transport-btn:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
|
|
|
.audio-clip { |
|
|
background: linear-gradient(135deg, #4299e1, #3182ce); |
|
|
border-left: 2px solid #ebf8ff; |
|
|
border-right: 2px solid #ebf8ff; |
|
|
border-radius: 2px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.audio-clip:hover { |
|
|
filter: brightness(1.1); |
|
|
} |
|
|
.audio-clip.selected { |
|
|
box-shadow: 0 0 0 2px #ebf8ff; |
|
|
} |
|
|
.midi-clip { |
|
|
background: linear-gradient(135deg, #9f7aea, #805ad5); |
|
|
border-radius: 2px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.timeline-grid { |
|
|
background-image: |
|
|
linear-gradient(to right, #4a5568 1px, transparent 1px), |
|
|
linear-gradient(to bottom, #4a5568 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.eq-curve { |
|
|
background: linear-gradient(to bottom, #1a202c, #2d3748); |
|
|
border-radius: 4px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.eq-line { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
background: #4299e1; |
|
|
transform-origin: left center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-200 font-sans overflow-hidden"> |
|
|
<div class="flex flex-col h-screen"> |
|
|
|
|
|
<div class="bg-gray-800 px-4 py-2 flex items-center justify-between border-b border-gray-700"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<h1 class="text-xl font-bold text-blue-400">WebDAW</h1> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">File</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">Edit</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">View</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">Help</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm">Tempo:</span> |
|
|
<input type="number" value="120" class="w-16 px-2 py-1 bg-gray-700 rounded text-sm"> |
|
|
<span class="text-sm">BPM</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm">Time Signature:</span> |
|
|
<select class="bg-gray-700 rounded text-sm px-2 py-1"> |
|
|
<option>4/4</option> |
|
|
<option>3/4</option> |
|
|
<option>6/8</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col"> |
|
|
<div class="p-3 border-b border-gray-700"> |
|
|
<h2 class="font-semibold text-blue-400 mb-2">Tracks</h2> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>Audio 1</span> |
|
|
<i class="fas fa-volume-up text-blue-400"></i> |
|
|
</div> |
|
|
<div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>MIDI 1</span> |
|
|
<i class="fas fa-music text-purple-400"></i> |
|
|
</div> |
|
|
<div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>Drum Machine</span> |
|
|
<i class="fas fa-drum text-green-400"></i> |
|
|
</div> |
|
|
<div class="flex items-center justify-between bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>Synth 1</span> |
|
|
<i class="fas fa-wave-square text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-3 w-full py-1 bg-blue-600 hover:bg-blue-500 rounded text-sm"> |
|
|
<i class="fas fa-plus mr-1"></i> Add Track |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="p-3 border-b border-gray-700 flex-1 overflow-y-auto"> |
|
|
<h2 class="font-semibold text-blue-400 mb-2">Instruments</h2> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center"> |
|
|
<i class="fas fa-piano text-2xl mb-1 text-purple-400"></i> |
|
|
<p class="text-xs">Grand Piano</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center"> |
|
|
<i class="fas fa-guitar text-2xl mb-1 text-red-400"></i> |
|
|
<p class="text-xs">Electric Guitar</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center"> |
|
|
<i class="fas fa-drum text-2xl mb-1 text-green-400"></i> |
|
|
<p class="text-xs">Drum Kit</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center"> |
|
|
<i class="fas fa-vial text-2xl mb-1 text-yellow-400"></i> |
|
|
<p class="text-xs">Synth</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center"> |
|
|
<i class="fas fa-violin text-2xl mb-1 text-indigo-400"></i> |
|
|
<p class="text-xs">Strings</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-2 rounded cursor-pointer hover:bg-gray-600 text-center"> |
|
|
<i class="fas fa-trumpet text-2xl mb-1 text-pink-400"></i> |
|
|
<p class="text-xs">Brass</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-3 border-t border-gray-700"> |
|
|
<h2 class="font-semibold text-blue-400 mb-2">Effects</h2> |
|
|
<div class="space-y-2"> |
|
|
<div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>Reverb</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>Delay</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>EQ</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-3 py-2 rounded cursor-pointer hover:bg-gray-600"> |
|
|
<span>Compressor</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<div class="bg-gray-800 border-b border-gray-700 flex"> |
|
|
<div class="w-16 border-r border-gray-700 flex items-center justify-center"> |
|
|
<span class="text-xs text-gray-400">Time</span> |
|
|
</div> |
|
|
<div class="flex-1 overflow-x-auto"> |
|
|
<div class="h-8 flex items-center timeline-grid" style="min-width: 2000px;"> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">1.1.00</div> |
|
|
</div> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">1.2.00</div> |
|
|
</div> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">1.3.00</div> |
|
|
</div> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">1.4.00</div> |
|
|
</div> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">2.1.00</div> |
|
|
</div> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">2.2.00</div> |
|
|
</div> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">2.3.00</div> |
|
|
</div> |
|
|
<div class="h-full flex items-center" style="width: 100px;"> |
|
|
<div class="w-full text-center text-xs text-gray-400">2.4.00</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
|
|
|
<div class="h-20 border-b border-gray-700 flex"> |
|
|
<div class="w-16 border-r border-gray-700 flex flex-col items-center justify-center"> |
|
|
<div class="flex items-center space-x-1 mb-1"> |
|
|
<i class="fas fa-volume-up text-blue-400"></i> |
|
|
<span class="text-xs">Audio 1</span> |
|
|
</div> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex-1 relative timeline-grid" style="min-width: 2000px;"> |
|
|
<div class="absolute top-1/2 transform -translate-y-1/2 left-20 w-40 h-16 audio-clip"> |
|
|
<div class="waveform"></div> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-2 bg-blue-300 opacity-50"></div> |
|
|
</div> |
|
|
<div class="absolute top-1/2 transform -translate-y-1/2 left-200 w-60 h-16 audio-clip"> |
|
|
<div class="waveform"></div> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-2 bg-blue-300 opacity-50"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-20 border-b border-gray-700 flex"> |
|
|
<div class="w-16 border-r border-gray-700 flex flex-col items-center justify-center"> |
|
|
<div class="flex items-center space-x-1 mb-1"> |
|
|
<i class="fas fa-music text-purple-400"></i> |
|
|
<span class="text-xs">MIDI 1</span> |
|
|
</div> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex-1 relative timeline-grid" style="min-width: 2000px;"> |
|
|
<div class="absolute top-1/4 left-40 w-80 h-8 midi-clip"></div> |
|
|
<div class="absolute top-1/2 left-40 w-80 h-8 midi-clip"></div> |
|
|
<div class="absolute top-3/4 left-40 w-80 h-8 midi-clip"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-20 border-b border-gray-700 flex"> |
|
|
<div class="w-16 border-r border-gray-700 flex flex-col items-center justify-center"> |
|
|
<div class="flex items-center space-x-1 mb-1"> |
|
|
<i class="fas fa-drum text-green-400"></i> |
|
|
<span class="text-xs">Drums</span> |
|
|
</div> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex-1 relative timeline-grid" style="min-width: 2000px;"> |
|
|
<div class="absolute top-1/4 left-60 w-20 h-8 midi-clip bg-red-400"></div> |
|
|
<div class="absolute top-1/2 left-100 w-20 h-8 midi-clip bg-red-400"></div> |
|
|
<div class="absolute top-1/2 left-140 w-20 h-8 midi-clip bg-red-400"></div> |
|
|
<div class="absolute top-3/4 left-180 w-20 h-8 midi-clip bg-red-400"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-64 border-t border-gray-700 flex"> |
|
|
<div class="w-16 bg-gray-800 border-r border-gray-700 overflow-y-auto"> |
|
|
<div class="piano-key white">C5</div> |
|
|
<div class="piano-key black"></div> |
|
|
<div class="piano-key white">B4</div> |
|
|
<div class="piano-key black"></div> |
|
|
<div class="piano-key white">A4</div> |
|
|
<div class="piano-key white">G4</div> |
|
|
<div class="piano-key black"></div> |
|
|
<div class="piano-key white">F4</div> |
|
|
<div class="piano-key black"></div> |
|
|
<div class="piano-key white">E4</div> |
|
|
<div class="piano-key white">D4</div> |
|
|
<div class="piano-key black"></div> |
|
|
<div class="piano-key white">C4</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-800 timeline-grid overflow-auto" style="min-width: 2000px;"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-64 bg-gray-800 border-l border-gray-700 overflow-y-auto"> |
|
|
<div class="p-3 border-b border-gray-700"> |
|
|
<h2 class="font-semibold text-blue-400 mb-3">Mixer</h2> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-sliders-h mr-2"></i> |
|
|
<span>Master</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs mr-2">-6dB</span> |
|
|
<div class="fader"> |
|
|
<div class="fader-handle" style="top: 40%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="bg-gray-700 p-3 rounded"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm">Audio 1</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-mute"></i></button> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-solo"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="knob"></div> |
|
|
<div class="fader"> |
|
|
<div class="fader-handle" style="top: 60%;"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">-12dB</span> |
|
|
<div class="w-6 h-2 bg-green-400 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 p-3 rounded"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm">MIDI 1</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-mute"></i></button> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-solo"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="knob"></div> |
|
|
<div class="fader"> |
|
|
<div class="fader-handle" style="top: 50%;"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">-9dB</span> |
|
|
<div class="w-6 h-2 bg-green-400 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 p-3 rounded"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm">Drums</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-mute"></i></button> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-solo"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="knob"></div> |
|
|
<div class="fader"> |
|
|
<div class="fader-handle" style="top: 45%;"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">-3dB</span> |
|
|
<div class="w-6 h-2 bg-yellow-400 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-3 border-t border-gray-700"> |
|
|
<h2 class="font-semibold text-blue-400 mb-3">Effects</h2> |
|
|
<div class="bg-gray-700 p-3 rounded mb-3"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm">Reverb</span> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-power-off"></i></button> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">Mix</span> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">Decay</span> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">Size</span> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 p-3 rounded"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm">EQ</span> |
|
|
<button class="text-xs text-gray-400 hover:text-white"><i class="fas fa-power-off"></i></button> |
|
|
</div> |
|
|
<div class="eq-curve h-20 mb-2"> |
|
|
<div class="eq-line" style="transform: scaleY(0.8)"></div> |
|
|
<div class="eq-line" style="transform: scaleY(0.6) translateX(25%)"></div> |
|
|
<div class="eq-line" style="transform: scaleY(0.4) translateX(50%)"></div> |
|
|
<div class="eq-line" style="transform: scaleY(0.7) translateX(75%)"></div> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">Low</span> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">Mid</span> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">High</span> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<span class="text-xs mb-1">Q</span> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 border-t border-gray-700 px-4 py-2 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
|
<i class="fas fa-step-backward"></i> |
|
|
</button> |
|
|
<button class="transport-btn w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-500 flex items-center justify-center"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
|
<i class="fas fa-stop"></i> |
|
|
</button> |
|
|
<button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
|
<i class="fas fa-step-forward"></i> |
|
|
</button> |
|
|
<button class="transport-btn w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm">1.1.00</span> |
|
|
<div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-blue-500" style="width: 30%;"></div> |
|
|
</div> |
|
|
<span class="text-sm">4.4.00</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
<div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-red-500" style="width: 60%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
<div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-green-500" style="width: 80%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const clips = document.querySelectorAll('.audio-clip, .midi-clip'); |
|
|
clips.forEach(clip => { |
|
|
clip.addEventListener('click', function(e) { |
|
|
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
|
clips.forEach(c => c.classList.remove('selected')); |
|
|
|
|
|
|
|
|
this.classList.add('selected'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const playButton = document.querySelector('.fa-play').parentElement; |
|
|
const stopButton = document.querySelector('.fa-stop').parentElement; |
|
|
const progressBar = document.querySelector('.bg-blue-500'); |
|
|
let isPlaying = false; |
|
|
let progressInterval; |
|
|
|
|
|
playButton.addEventListener('click', function() { |
|
|
if (!isPlaying) { |
|
|
isPlaying = true; |
|
|
this.innerHTML = '<i class="fas fa-pause"></i>'; |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
progressInterval = setInterval(() => { |
|
|
progress += 0.5; |
|
|
if (progress > 100) progress = 0; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
}, 100); |
|
|
} else { |
|
|
isPlaying = false; |
|
|
this.innerHTML = '<i class="fas fa-play"></i>'; |
|
|
clearInterval(progressInterval); |
|
|
} |
|
|
}); |
|
|
|
|
|
stopButton.addEventListener('click', function() { |
|
|
isPlaying = false; |
|
|
playButton.innerHTML = '<i class="fas fa-play"></i>'; |
|
|
clearInterval(progressInterval); |
|
|
progressBar.style.width = '0%'; |
|
|
}); |
|
|
|
|
|
|
|
|
const knobs = document.querySelectorAll('.knob'); |
|
|
knobs.forEach(knob => { |
|
|
let isDragging = false; |
|
|
let startY = 0; |
|
|
let rotation = 0; |
|
|
|
|
|
knob.addEventListener('mousedown', function(e) { |
|
|
isDragging = true; |
|
|
startY = e.clientY; |
|
|
document.addEventListener('mousemove', onMouseMove); |
|
|
document.addEventListener('mouseup', onMouseUp); |
|
|
}); |
|
|
|
|
|
function onMouseMove(e) { |
|
|
if (!isDragging) return; |
|
|
const deltaY = e.clientY - startY; |
|
|
rotation = Math.min(Math.max(-90, rotation + deltaY * 0.5), 90); |
|
|
knob.style.transform = `rotate(${rotation}deg)`; |
|
|
startY = e.clientY; |
|
|
} |
|
|
|
|
|
function onMouseUp() { |
|
|
isDragging = false; |
|
|
document.removeEventListener('mousemove', onMouseMove); |
|
|
document.removeEventListener('mouseup', onMouseUp); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const faders = document.querySelectorAll('.fader-handle'); |
|
|
faders.forEach(fader => { |
|
|
let isDragging = false; |
|
|
let startY = 0; |
|
|
|
|
|
fader.addEventListener('mousedown', function(e) { |
|
|
isDragging = true; |
|
|
startY = e.clientY; |
|
|
document.addEventListener('mousemove', onFaderMove); |
|
|
document.addEventListener('mouseup', onFaderUp); |
|
|
}); |
|
|
|
|
|
function onFaderMove(e) { |
|
|
if (!isDragging) return; |
|
|
const faderParent = fader.parentElement; |
|
|
const parentRect = faderParent.getBoundingClientRect(); |
|
|
const newTop = e.clientY - parentRect.top - (fader.offsetHeight / 2); |
|
|
|
|
|
|
|
|
const constrainedTop = Math.max(0, Math.min(parentRect.height - fader.offsetHeight, newTop)); |
|
|
fader.style.top = `${constrainedTop}px`; |
|
|
|
|
|
|
|
|
const dBDisplay = fader.closest('.bg-gray-700')?.querySelector('.text-xs'); |
|
|
if (dBDisplay) { |
|
|
const percent = 100 - (constrainedTop / (parentRect.height - fader.offsetHeight)) * 100; |
|
|
const dB = Math.round((percent / 100) * 24 - 12); |
|
|
dBDisplay.textContent = `${dB}dB`; |
|
|
} |
|
|
} |
|
|
|
|
|
function onFaderUp() { |
|
|
isDragging = false; |
|
|
document.removeEventListener('mousemove', onFaderMove); |
|
|
document.removeEventListener('mouseup', onFaderUp); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=7Zeux/webdaw" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
