Spaces:

awacke1
/

Multi-Instrument-Synthesizer

Running

App Files Files Community

awacke1 commited on Jul 13

Commit

bd8ee36

•

1 Parent(s): c9933ce

Update index.html

Browse files

Files changed (1) hide show

index.html +462 -18

index.html CHANGED Viewed

@@ -1,19 +1,463 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width" />
- <title>My static Space</title>
- <link rel="stylesheet" href="style.css" />
- </head>
- <body>
- <div class="card">
- <h1>Welcome to your static Space!</h1>
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
- <p>
- Also don't forget to check the
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
- </p>
- </div>
- </body>
 </html>

+<!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>