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>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/tone@14.8.39/build/Tone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.23.1/dist/magentamusic.min.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>
// WebMIDI initialization
let midiIn = null;
if (navigator.requestMIDIAccess) {
navigator.requestMIDIAccess()
.then(access => {
const inputs = access.inputs.values();
for (let input of inputs) {
midiIn = input;
input.onmidimessage = handleMIDIMessage;
}
access.onstatechange = e => {
if (e.port.type === 'input') {
if (e.port.state === 'connected') {
midiIn = e.port;
e.port.onmidimessage = handleMIDIMessage;
} else {
midiIn = null;
}
}
};
})
.catch(err => console.warn('WebMIDI not available:', err));
}
function handleMIDIMessage(event) {
const [status, note, velocity] = event.data;
const command = status >> 4;
if (command === 9) { // Note On
playNote(midiToNoteName(note), note, velocity);
} else if (command === 8) { // Note Off
stopNote(midiToNoteName(note), note);
}
}
// 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',
'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');
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');
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);
}
// 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>
"""
if __name__ == "__main__":
main()