Spaces:

awacke1
/

Multi-Instrument-Synthesizer

Running

App Files Files Community

Multi-Instrument-Synthesizer / index.html

awacke1

Update index.html

bd8ee36 verified almost 2 years ago

raw

history blame contribute delete

17.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Multi-Instrument Synthesizer</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	}

	#root {
	width: 100%;
	max-width: 600px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 20px;
	}

	.button {
	padding: 10px;
	margin: 5px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}

	.bg-blue-500 {
	background-color: #4299e1;
	}

	.bg-gray-300 {
	background-color: #e2e8f0;
	}

	.bg-green-500 {
	background-color: #48bb78;
	}

	.bg-red-500 {
	background-color: #f56565;
	}

	.text-white {
	color: white;
	}

	.p-4 {
	padding: 16px;
	}

	.space-y-4 > * + * {
	margin-top: 16px;
	}

	.bg-gray-100 {
	background-color: #f7fafc;
	}

	.rounded-xl {
	border-radius: 12px;
	}

	.text-2xl {
	font-size: 1.5rem;
	}

	.font-bold {
	font-weight: 700;
	}

	.text-center {
	text-align: center;
	}

	.mb-6 {
	margin-bottom: 24px;
	}

	.block {
	display: block;
	}

	.text-sm {
	font-size: 0.875rem;
	}

	.font-medium {
	font-weight: 500;
	}

	.text-gray-700 {
	color: #4a5568;
	}

	.mb-2 {
	margin-bottom: 8px;
	}

	.grid {
	display: grid;
	}

	.grid-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gap-2 {
	gap: 8px;
	}

	.w-full {
	width: 100%;
	}

	.px-4 {
	padding-left: 16px;
	padding-right: 16px;
	}

	.py-2 {
	padding-top: 8px;
	padding-bottom: 8px;
	}

	.rounded {
	border-radius: 4px;
	}
	</style>
	</head>
	<body>
	<div id="root"></div>
	<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script type="text/babel">
	const { useState, useEffect, useCallback, useRef } = React;

	const MultiInstrumentSynthesizer = () => {
	const [audioContext, setAudioContext] = useState(null);
	const [isPlaying, setIsPlaying] = useState(false);
	const [tempo, setTempo] = useState(120);
	const [rootNote, setRootNote] = useState(261.63); // C4
	const [selectedProgression, setSelectedProgression] = useState(0);
	const [selectedInstrument, setSelectedInstrument] = useState('fm');

	const sequencerIntervalRef = useRef(null);
	const currentBarRef = useRef(0);
	const currentBeatRef = useRef(0);

	useEffect(() => {
	const context = new (window.AudioContext \|\| window.webkitAudioContext)();
	setAudioContext(context);

	return () => {
	context.close();
	};
	}, []);

	const noteFrequencies = {
	'C': 261.63, 'C#': 277.18, 'D': 293.66, 'D#': 311.13, 'E': 329.63, 'F': 349.23,
	'F#': 369.99, 'G': 392.00, 'G#': 415.30, 'A': 440.00, 'A#': 466.16, 'B': 493.88
	};

	const progressions = [
	{ name: "Blues I", progression: [1, 1, 1, 1, 4, 4, 1, 1, 5, 4, 1, 5] },
	{ name: "Blues II", progression: [1, 4, 1, 1, 4, 4, 1, 1, 5, 4, 1, 5] },
	{ name: "Rock", progression: [1, 5, 6, 4, 1, 5, 6, 4, 1, 5, 6, 4] },
	{ name: "Electronica", progression: [1, 6, 4, 5, 1, 6, 4, 5, 1, 6, 4, 5] },
	{ name: "Chillwave", progression: [1, 5, 6, 4, 1, 5, 6, 4, 1, 5, 6, 4] },
	{ name: "EDM", progression: [1, 4, 5, 6, 1, 4, 5, 6, 1, 4, 5, 6] }
	];

	const generateChord = (root, chordType) => {
	const majorScale = [0, 2, 4, 5, 7, 9, 11];
	let chordIntervals;

	switch (chordType) {
	case 1: case 4: case 5: // Major (or dominant 7th for blues)
	chordIntervals = [0, 4, 7, 10]; // Dominant 7th
	break;
	case 2: case 3: case 6: // Minor
	chordIntervals = [0, 3, 7, 10]; // Minor 7th
	break;
	default:
	chordIntervals = [0, 4, 7, 10]; // Default to dominant 7th
	}

	return chordIntervals.map(interval => {
	const scaleStep = (majorScale[chordType - 1] + interval) % 12;
	return root * Math.pow(2, scaleStep / 12);
	});
	};

	const playFMSynth = useCallback((frequency, duration) => {
	const osc = audioContext.createOscillator();
	const mod = audioContext.createOscillator();
	const modGain = audioContext.createGain();
	const env = audioContext.createGain();

	mod.type = 'sine';
	osc.type = 'sine';

	mod.connect(modGain);
	modGain.connect(osc.frequency);
	osc.connect(env);
	env.connect(audioContext.destination);

	const now = audioContext.currentTime;
	const modFreq = frequency * 2;
	const modIndex = 100;

	mod.frequency.setValueAtTime(modFreq, now);
	modGain.gain.setValueAtTime(modIndex, now);
	osc.frequency.setValueAtTime(frequency, now);

	env.gain.setValueAtTime(0, now);
	env.gain.linearRampToValueAtTime(0.5, now + 0.01);
	env.gain.exponentialRampToValueAtTime(0.01, now + duration - 0.1);
	env.gain.linearRampToValueAtTime(0, now + duration);

	mod.start(now);
	osc.start(now);
	osc.stop(now + duration);
	}, [audioContext]);

	const playPiano = useCallback((frequency, duration) => {
	const osc = audioContext.createOscillator();
	const gainNode = audioContext.createGain();
	osc.type = 'triangle';
	osc.frequency.setValueAtTime(frequency, audioContext.currentTime);
	osc.connect(gainNode);
	gainNode.connect(audioContext.destination);

	gainNode.gain.setValueAtTime(0, audioContext.currentTime);
	gainNode.gain.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.01);
	gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration - 0.1);

	osc.start();
	osc.stop(audioContext.currentTime + duration);
	}, [audioContext]);


	const playGuitar = useCallback((frequency, duration) => {
	const osc = audioContext.createOscillator();
	const gainNode = audioContext.createGain();
	osc.type = 'sawtooth';
	osc.frequency.setValueAtTime(frequency, audioContext.currentTime);
	osc.connect(gainNode);
	gainNode.connect(audioContext.destination);

	gainNode.gain.setValueAtTime(0, audioContext.currentTime);
	gainNode.gain.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.005);
	gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration - 0.05);

	osc.start();
	osc.stop(audioContext.currentTime + duration);
	}, [audioContext]);

	const playDrum = useCallback((type) => {
	const osc = audioContext.createOscillator();
	const gainNode = audioContext.createGain();
	osc.connect(gainNode);
	gainNode.connect(audioContext.destination);

	if (type === 'kick') {
	osc.frequency.setValueAtTime(150, audioContext.currentTime);
	osc.frequency.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
	gainNode.gain.setValueAtTime(1, audioContext.currentTime);
	gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
	} else if (type === 'snare') {
	osc.type = 'triangle';
	osc.frequency.setValueAtTime(100, audioContext.currentTime);
	gainNode.gain.setValueAtTime(1, audioContext.currentTime);
	gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
	} else if (type === 'hihat') {
	osc.type = 'square';
	osc.frequency.setValueAtTime(1000, audioContext.currentTime);
	gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
	gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.05);
	}

	osc.start(audioContext.currentTime);
	osc.stop(audioContext.currentTime + 0.5);
	}, [audioContext]);

	const playChord = useCallback((frequencies) => {
	const noteDuration = 60 / tempo; // Duration of one beat

	frequencies.forEach((frequency, index) => {
	const playTime = audioContext.currentTime + index * 0.05; // Slight arpeggio effect
	switch (selectedInstrument) {
	case 'fm':
	playFMSynth(frequency, noteDuration);
	break;
	case 'piano':
	playPiano(frequency, noteDuration);
	break;
	case 'guitar':
	playGuitar(frequency, noteDuration);
	break;
	}
	});
	}, [audioContext, tempo, selectedInstrument, playFMSynth, playPiano, playGuitar]);

	const startSequencer = useCallback(() => {
	if (sequencerIntervalRef.current) {
	clearInterval(sequencerIntervalRef.current);
	}

	currentBarRef.current = 0;
	currentBeatRef.current = 0;

	const beatDuration = 60 / tempo / 4; // Duration of a 16th note

	sequencerIntervalRef.current = setInterval(() => {
	if (currentBeatRef.current % 4 === 0) { // On each quarter note
	const chordType = progressions[selectedProgression].progression[currentBarRef.current];
	const chord = generateChord(rootNote, chordType);
	playChord(chord);

	// Play kick drum on the 1 and 3
	if (currentBeatRef.current % 8 === 0) {
	playDrum('kick');
	}
	}

	// Play snare on the 2 and 4
	if (currentBeatRef.current % 8 === 4) {
	playDrum('snare');
	}

	// Play hihat on every 16th note
	playDrum('hihat');

	currentBeatRef.current = (currentBeatRef.current + 1) % 16;
	if (currentBeatRef.current === 0) {
	currentBarRef.current = (currentBarRef.current + 1) % 12;
	}
	}, beatDuration * 1000);

	setIsPlaying(true);
	}, [tempo, playChord, playDrum, selectedProgression, rootNote]);

	const stopSequencer = useCallback(() => {
	if (sequencerIntervalRef.current) {
	clearInterval(sequencerIntervalRef.current);
	}
	setIsPlaying(false);
	}, []);

	const togglePlay = () => {
	if (isPlaying) {
	stopSequencer();
	} else {
	startSequencer();
	}
	};

	const handleRootNoteChange = (note) => {
	setRootNote(noteFrequencies[note]);
	if (isPlaying) {
	stopSequencer();
	setTimeout(startSequencer, 100);
	}
	};

	const handleProgressionChange = (index) => {
	setSelectedProgression(index);
	if (isPlaying) {
	stopSequencer();
	setTimeout(startSequencer, 100);
	}
	};

	const handleInstrumentChange = (instrument) => {
	setSelectedInstrument(instrument);
	};

	const handleTempoChange = (value) => {
	setTempo(value[0]);
	if (isPlaying) {
	stopSequencer();
	setTimeout(startSequencer, 100);
	}
	};

	return (
	<div className="p-4 space-y-4 bg-gray-100 rounded-xl">
	<h2 className="text-2xl font-bold text-center mb-6">Multi-Instrument Twelve-Bar Synthesizer with Drums</h2>
	<div className="space-y-4">
	<div>
	<label className="block text-sm font-medium text-gray-700 mb-2">Root Note</label>
	<div className="grid grid-cols-4 gap-2">
	{Object.keys(noteFrequencies).map((note) => (
	<button
	key={note}
	onClick={() => handleRootNoteChange(note)}
	className={`button ${note === Object.keys(noteFrequencies).find(key => noteFrequencies[key] === rootNote) ? 'bg-blue-500' : 'bg-gray-300'} text-white`}
	>
	{note}
	</button>
	))}
	</div>
	</div>
	<div>
	<label className="block text-sm font-medium text-gray-700 mb-2">Progression</label>
	<div className="grid grid-cols-2 gap-2">
	{progressions.map((prog, index) => (
	<button
	key={index}
	onClick={() => handleProgressionChange(index)}
	className={`button ${index === selectedProgression ? 'bg-green-500' : 'bg-gray-300'} text-white text-xs`}
	>
	{prog.name}
	</button>
	))}
	</div>
	</div>
	<div>
	<label className="block text-sm font-medium text-gray-700 mb-2">Instrument</label>
	<select onChange={(e) => handleInstrumentChange(e.target.value)} value={selectedInstrument} className="w-full">
	<option value="fm">FM Synth</option>
	<option value="piano">Piano</option>
	<option value="guitar">Guitar</option>
	</select>
	</div>
	<div>
	<label className="block text-sm font-medium text-gray-700">Tempo: {tempo} BPM</label>
	<input
	type="range"
	min="60"
	max="180"
	step="1"
	value={tempo}
	onChange={(e) => handleTempoChange([parseInt(e.target.value)])}
	className="w-full"
	/>
	</div>
	<button onClick={togglePlay} className={`button w-full ${isPlaying ? 'bg-red-500' : 'bg-green-500'} text-white px-4 py-2 rounded`}>
	{isPlaying ? 'Stop' : 'Play'}
	</button>
	</div>
	</div>
	);
	};

	const rootElement = document.getElementById('root');
	ReactDOM.render(<MultiInstrumentSynthesizer />, rootElement);
	</script>
	</body>
	</html>