Spaces:

awacke1
/

WackerSynthKeyboard

Sleeping

App Files Files Community

awacke1 commited on Jan 24

Commit

a6fd850

verified ·

1 Parent(s): 08ae50b

Update app.py

Browse files

Files changed (1) hide show

app.py +19 -122

app.py CHANGED Viewed

@@ -1,94 +1,12 @@
 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>
@@ -162,7 +80,7 @@ def get_synth_interface():
         <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',
@@ -246,14 +164,6 @@ def get_synth_interface():
             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)) {
@@ -267,13 +177,6 @@ def get_synth_interface():
             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);
@@ -292,33 +195,27 @@ def get_synth_interface():
             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>

 import streamlit as st
 import streamlit.components.v1 as components
 def main():
     st.title("5-Octave Synth with Arpeggiator & Drum Pads")
     # Load and embed synth interface
     components.html(get_synth_interface(), height=800)
 def get_synth_interface():
     return """
 <!DOCTYPE html>
         <div id="drumPads" class="drum-grid"></div>
     </div>
     <script>
+        // Initialize Tone.js instruments
         const synth = new Tone.PolySynth().toDestination();
         const drumSampler = new Tone.Sampler({
             'C2': 'https://tonejs.github.io/audio/drum-samples/kicks/kick.mp3',
             synth.triggerAttack(note);
             const key = document.querySelector(`[data-midi="${midiNote}"]`);
             if (key) key.classList.add('active');
             if (document.getElementById('arpMode').value !== 'off') {
                 if (!arpNotes.includes(note)) {
             synth.triggerRelease(note);
             const key = document.querySelector(`[data-midi="${midiNote}"]`);
             if (key) key.classList.remove('active');
             if (document.getElementById('arpMode').value !== 'off') {
                 arpNotes = arpNotes.filter(n => n !== note);
             const pad = drumPads.children[index];
             pad.classList.add('active');
             setTimeout(() => pad.classList.remove('active'), 100);
         }
+        // Handle synth type changes
+        document.getElementById('synthType').addEventListener('change', (e) => {
+            const type = e.target.value;
+            let newSynth;
+            switch(type) {
+                case 'fm':
+                    newSynth = new Tone.PolySynth(Tone.FMSynth).toDestination();
+                    break;
+                case 'am':
+                    newSynth = new Tone.PolySynth(Tone.AMSynth).toDestination();
+                    break;
+                default:
+                    newSynth = new Tone.PolySynth(Tone.Synth).toDestination();
             }
+            synth.dispose();
+            window.synth = newSynth;
         });
     </script>
 </body>
 </html>