Spaces:

SREAL
/

synthwave-studio

Running

synthwave-studio / presets.html

I want to create a fully functional tone.js synth that uses midi input from a midi device. is polyphonic, velocity sensitive. I want it to be a saw wave oscillator with filters and envelopes, also add some post processing effects using tone.js

fc0073f verified 4 months ago

raw

history blame contribute delete

8.28 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sound Presets - SynthWave Studio</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	</head>
	<body class="bg-gray-900 text-white min-h-screen">
	<custom-navbar></custom-navbar>

	<div class="container mx-auto px-4 py-8">
	<header class="text-center mb-12">
	<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-gray-400 to-white bg-clip-text text-transparent">
	Sound Presets
	</h1>
	<p class="text-gray-400 text-lg max-w-2xl mx-auto">
	Explore and save your favorite synthesizer configurations
	</p>
	</header>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
	<!-- Preset Cards -->
	<div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-xl font-bold">Classic Saw</h3>
	<button class="text-gray-400 hover:text-white">
	<i data-feather="heart"></i>
	</button>
	</div>
	<p class="text-gray-400 mb-4">Bright sawtooth wave with subtle reverb</p>
	<div class="flex justify-between items-center">
	<span class="text-sm bg-gray-700 px-2 py-1 rounded">Lead</span>
	<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
	Load
	</button>
	</div>
	</div>

	<div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-xl font-bold">Bass Growl</h3>
	<button class="text-gray-400 hover:text-white">
	<i data-feather="heart"></i>
	</button>
	</div>
	<p class="text-gray-400 mb-4">Deep filtered bass with distortion</p>
	<div class="flex justify-between items-center">
	<span class="text-sm bg-gray-700 px-2 py-1 rounded">Bass</span>
	<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
	Load
	</button>
	</div>
	</div>

	<div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-xl font-bold">Pad Atmosphere</h3>
	<button class="text-gray-400 hover:text-white">
	<i data-feather="heart"></i>
	</button>
	</div>
	<p class="text-gray-400 mb-4">Ambient pad with long release</p>
	<div class="flex justify-between items-center">
	<span class="text-sm bg-gray-700 px-2 py-1 rounded">Pad</span>
	<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
	Load
	</button>
	</div>
	</div>

	<div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-xl font-bold">Analog Lead</h3>
	<button class="text-gray-400 hover:text-white">
	<i data-feather="heart"></i>
	</button>
	</div>
	<p class="text-gray-400 mb-4">Warm analog-style lead sound</p>
	<div class="flex justify-between items-center">
	<span class="text-sm bg-gray-700 px-2 py-1 rounded">Lead</span>
	<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
	Load
	</button>
	</div>
	</div>

	<div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-xl font-bold">FM Bell</h3>
	<button class="text-gray-400 hover:text-white">
	<i data-feather="heart"></i>
	</button>
	</div>
	<p class="text-gray-400 mb-4">Percussive bell-like timbre</p>
	<div class="flex justify-between items-center">
	<span class="text-sm bg-gray-700 px-2 py-1 rounded">FX</span>
	<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
	Load
	</button>
	</div>
	</div>

	<div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-xl font-bold">Arp Sequence</h3>
	<button class="text-gray-400 hover:text-white">
	<i data-feather="heart"></i>
	</button>
	</div>
	<p class="text-gray-400 mb-4">Sequence-ready arpeggiated sound</p>
	<div class="flex justify-between items-center">
	<span class="text-sm bg-gray-700 px-2 py-1 rounded">Sequence</span>
	<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
	Load
	</button>
	</div>
	</div>
	</div>

	<div class="bg-gray-800 rounded-xl p-6 shadow-lg">
	<h2 class="text-2xl font-bold mb-6 flex items-center">
	<i data-feather="plus-circle" class="mr-2"></i> Save Current Settings
	</h2>
	<form class="space-y-4">
	<div>
	<label class="block text-gray-300 mb-2">Preset Name</label>
	<input type="text" placeholder="My Awesome Sound"
	class="w-full bg-gray-700 text-white rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gray-500">
	</div>
	<div>
	<label class="block text-gray-300 mb-2">Category</label>
	<select class="w-full bg-gray-700 text-white rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gray-500">
	<option>Bass</option>
	<option>Lead</option>
	<option>Pad</option>
	<option>FX</option>
	<option>Sequence</option>
	</select>
	</div>
	<div>
	<label class="block text-gray-300 mb-2">Description</label>
	<textarea placeholder="Describe your sound..." rows="3"
	class="w-full bg-gray-700 text-white rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gray-500"></textarea>
	</div>
	<button type="submit" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition w-full">
	Save Preset
	</button>
	</form>
	</div>
	</div>

	<custom-footer></custom-footer>

	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script>
	feather.replace();
	</script>
	</body>
	</html>