Spaces:

awacke1
/

WackerSynthKeyboard

Sleeping

File size: 11,595 Bytes

import streamlit as st
import streamlit.components.v1 as components
import mido
from queue import Queue
import threading

# Store MIDI messages in session state
if 'incoming_midi' not in st.session_state:
    st.session_state.incoming_midi = Queue()

def midi_in_callback(msg):
    if msg.type in ['note_on', 'note_off']:
        st.session_state.incoming_midi.put({
            'type': 'noteOn' if msg.type == 'note_on' else 'noteOff',
            'note': msg.note,
            'velocity': msg.velocity
        })

def open_midi_port(port_name: str, is_input: bool):
    if port_name == "None":
        return None
    return mido.open_input(port_name, callback=midi_in_callback) if is_input else mido.open_output(port_name)

def main():
    st.title("5-Octave Synth with Arpeggiator & Drum Pads")

    # MIDI port selection
    ports = {"in": ["None"] + mido.get_input_names(), 
             "out": ["None"] + mido.get_output_names()}
    selections = {
        "in": st.selectbox("MIDI Input", ports["in"]),
        "out": st.selectbox("MIDI Output", ports["out"])
    }

    # Initialize/update MIDI ports
    for direction in ["in", "out"]:
        key = f'midi_{direction}'
        if key not in st.session_state:
            st.session_state[key] = None
        
        curr_port = st.session_state[key]
        if curr_port and curr_port.name != selections[direction]:
            curr_port.close()
            st.session_state[key] = open_midi_port(selections[direction], direction=="in")
        elif not curr_port and selections[direction] != "None":
            st.session_state[key] = open_midi_port(selections[direction], direction=="in")

    # Load and embed synth interface
    components.html(get_synth_interface(), height=800)

    # Event handling setup
    if 'js_events' not in st.session_state:
        st.session_state.js_events = Queue()
    if 'browser_events' not in st.session_state:
        from collections import deque
        st.session_state.browser_events = deque()

    # Process hardware MIDI
    while not st.session_state.incoming_midi.empty():
        evt = st.session_state.incoming_midi.get_nowait()
        st.session_state.js_events.put(evt)

    # Send events to browser
    js_events = []
    while not st.session_state.js_events.empty():
        js_events.append(st.session_state.js_events.get_nowait())

    if js_events:
        js_code = "<script>\n"
        for evt in js_events:
            js_code += f"""
            window.postMessage({{
                type: 'hardwareMidi',
                data: {{
                    eventType: '{evt["type"]}',
                    note: {evt["note"]},
                    velocity: {evt.get("velocity", 100)}
                }}
            }}, '*');\n"""
        js_code += "</script>"
        components.html(js_code, height=0)

    # Cleanup on session end
    def cleanup():
        for direction in ["in", "out"]:
            port = st.session_state.get(f'midi_{direction}')
            if port:
                port.close()

    st.on_session_end(cleanup)

def get_synth_interface():
    return """
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/Tone.js"></script>
    <style>
        .container { max-width: 1200px; margin: 0 auto; }
        .keyboard { display: flex; margin: 20px 0; }
        .key { 
            width: 40px; height: 150px; 
            border: 1px solid #000;
            background: white;
            margin-right: 2px;
        }
        .key.black { 
            width: 24px; height: 100px;
            background: black;
            margin: 0 -12px;
            z-index: 1;
        }
        .key.active { background: #ff6961; }
        .drum-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: 20px 0;
        }
        .drum-pad {
            aspect-ratio: 1;
            background: #444;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
        }
        .drum-pad.active { background: #ff6961; }
        .controls {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="controls">
            <div>
                <label>Arpeggiator:</label>
                <select id="arpMode">
                    <option value="off">Off</option>
                    <option value="up">Up</option>
                    <option value="down">Down</option>
                    <option value="updown">Up/Down</option>
                    <option value="random">Random</option>
                </select>
                <input type="range" id="arpSpeed" min="100" max="1000" value="200">
            </div>
            <div>
                <label>Synth Type:</label>
                <select id="synthType">
                    <option value="simple">Simple</option>
                    <option value="fm">FM</option>
                    <option value="am">AM</option>
                </select>
            </div>
        </div>
        <div id="keyboard" class="keyboard"></div>
        <div id="drumPads" class="drum-grid"></div>
    </div>
    <script>
        // Initialize Tone.js instruments and UI
        const synth = new Tone.PolySynth().toDestination();
        const drumSampler = new Tone.Sampler({
            'C2': 'https://tonejs.github.io/audio/drum-samples/kicks/kick.mp3',
            'D2': 'https://tonejs.github.io/audio/drum-samples/snare/snare.mp3',
            'E2': 'https://tonejs.github.io/audio/drum-samples/hh/hh.mp3',
            'F2': 'https://tonejs.github.io/audio/drum-samples/tom/tom.mp3'
        }).toDestination();

        // Build 5-octave keyboard (61 keys)
        const startNote = 36; // C2
        const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
        const keyboard = document.getElementById('keyboard');
        
        for (let i = 0; i < 61; i++) {
            const midiNote = startNote + i;
            const octave = Math.floor(midiNote / 12) - 1;
            const noteName = noteNames[midiNote % 12] + octave;
            const isBlack = noteName.includes('#');
            
            const key = document.createElement('div');
            key.className = `key ${isBlack ? 'black' : ''}`;
            key.dataset.note = noteName;
            key.dataset.midi = midiNote;
            
            key.addEventListener('mousedown', () => playNote(noteName, midiNote));
            key.addEventListener('mouseup', () => stopNote(noteName, midiNote));
            key.addEventListener('mouseleave', () => stopNote(noteName, midiNote));
            
            keyboard.appendChild(key);
        }

        // Build 16 drum pads
        const drumPads = document.getElementById('drumPads');
        for (let i = 0; i < 16; i++) {
            const pad = document.createElement('div');
            pad.className = 'drum-pad';
            pad.textContent = `Pad ${i + 1}`;
            pad.addEventListener('mousedown', () => triggerDrum(i));
            drumPads.appendChild(pad);
        }

        // Arpeggiator implementation
        let arpNotes = [];
        let arpInterval = null;

        document.getElementById('arpMode').addEventListener('change', updateArpeggiator);
        document.getElementById('arpSpeed').addEventListener('change', updateArpeggiator);

        function updateArpeggiator() {
            const mode = document.getElementById('arpMode').value;
            const speed = document.getElementById('arpSpeed').value;
            
            if (arpInterval) clearInterval(arpInterval);
            if (mode !== 'off' && arpNotes.length) {
                let index = 0;
                arpInterval = setInterval(() => {
                    const note = arpNotes[index];
                    playNote(note, true);
                    setTimeout(() => stopNote(note), speed * 0.8);
                    
                    switch(mode) {
                        case 'up':
                            index = (index + 1) % arpNotes.length;
                            break;
                        case 'down':
                            index = (index - 1 + arpNotes.length) % arpNotes.length;
                            break;
                        case 'updown':
                            // Implementation for up/down pattern
                            break;
                        case 'random':
                            index = Math.floor(Math.random() * arpNotes.length);
                            break;
                    }
                }, speed);
            }
        }

        function playNote(note, midiNote) {
            Tone.start();
            synth.triggerAttack(note);
            const key = document.querySelector(`[data-midi="${midiNote}"]`);
            if (key) key.classList.add('active');
            
            // Send MIDI message
            window.parent.postMessage({
                type: 'toneEvent',
                eventType: 'noteOn',
                note: midiNote,
                velocity: 100
            }, '*');

            if (document.getElementById('arpMode').value !== 'off') {
                if (!arpNotes.includes(note)) {
                    arpNotes.push(note);
                    updateArpeggiator();
                }
            }
        }

        function stopNote(note, midiNote) {
            synth.triggerRelease(note);
            const key = document.querySelector(`[data-midi="${midiNote}"]`);
            if (key) key.classList.remove('active');
            
            window.parent.postMessage({
                type: 'toneEvent',
                eventType: 'noteOff',
                note: midiNote,
                velocity: 0
            }, '*');

            if (document.getElementById('arpMode').value !== 'off') {
                arpNotes = arpNotes.filter(n => n !== note);
                if (!arpNotes.length && arpInterval) {
                    clearInterval(arpInterval);
                    arpInterval = null;
                }
            }
        }

        function triggerDrum(index) {
            const notes = ['C2', 'D2', 'E2', 'F2'];
            const note = notes[index % notes.length];
            drumSampler.triggerAttackRelease(note, '8n');
            
            const pad = drumPads.children[index];
            pad.classList.add('active');
            setTimeout(() => pad.classList.remove('active'), 100);
            
            window.parent.postMessage({
                type: 'toneEvent',
                eventType: 'drum',
                padIndex: index,
                velocity: 100
            }, '*');
        }

        // Handle incoming MIDI messages
        window.addEventListener('message', e => {
            if (e.data?.type === 'hardwareMidi') {
                const { eventType, note, velocity } = e.data.data;
                const noteName = midiToNoteName(note);
                
                if (eventType === 'noteOn') {
                    playNote(noteName, note);
                } else if (eventType === 'noteOff') {
                    stopNote(noteName, note);
                }
            }
        });

        function midiToNoteName(midi) {
            const octave = Math.floor(midi / 12) - 1;
            return noteNames[midi % 12] + octave;
        }
    </script>
</body>
</html>
    """

if __name__ == "__main__":
    main()