Okay, wir haben es endlich: Version 2.0 ist da, und diesmal fühlt sich das ganze Ding wie ein richtiges Musiktool an. Aber was hat sich verändert?

1. Design-Upgrade

• Das Layout ist jetzt noch kompakter und moderner, inspiriert von FL Studio und Ableton.
• Dunkles UI mit abgestimmten Kontrasten, um eine gute Sichtbarkeit und Ästhetik zu bieten.
• Responsive Anpassung: Es funktioniert auch auf Smartphones, wenn man es ins Querformat dreht.
• Buttons und UI-Elemente wirken moderner, mit sanften Animationen und einem durchdachteren Look.

2. Verbesserte Interaktion im Drum-Sequenzer

• Das Raster wurde überarbeitet, damit es sich präziser bedienen lässt.
• Mehr visuelles Feedback, wenn Zellen aktiviert werden.
• Die „Randomizer“-Funktion nutzt jetzt Wahrscheinlichkeiten, sodass z. B. Kicks häufiger vorkommen als Cowbells (niemand braucht zufällige Cowbell-Spam).

3. Piano Roll – Jetzt Richtig Funktional! 

• Noten lassen sich nicht nur setzen, sondern jetzt auch verlängern und verschieben.
• Neue Tonleiterauswahl, damit man direkt skaliert arbeiten kann.
• Verschiedene Instrumente! 🎸🎷🎻 – Ob ein Lead-Synth oder ein Pad, du kannst jetzt zwischen mehreren Sounds wählen.
• Velocity-Steuerung geplant! (Der nächste logische Schritt für Version 2.1 😉).

4. Sound-Engine & Effekte 

• Eigene Synth-Sounds mit echten ADSR-Werten – das Ding klingt nicht mehr nach kaputtem Gameboy.
• Reverb, Delay & Distortion integriert – mit individuell anpassbaren Werten.
• Lowpass-Filter für einen weichen Mix.
• Alle Effekte können per Knopf aktiviert/deaktiviert werden – für maximale Kontrolle.

Interessante Code-Details:

Hier ein paar besonders coole Abschnitte, die zeigen, was unter der Haube passiert:

1. Noten-Handling in der Piano-Roll

👉 Noten können per Klick erstellt, verschoben und in der Länge verändert werden.

function createNote(noteRow, noteStart, noteDuration, area) {  const grid = document.getElementById("pianoRollGrid");  const cellWidth = grid.offsetWidth / pianoColumns;  const cellHeight = grid.offsetHeight / pianoRows;    const note = document.createElement("div");  note.className = "note-block";  note.style.left = `${(noteStart / pianoColumns) * 100}%`;  note.style.top = `${(noteRow / pianoRows) * 100}%`;  note.style.width = `${noteDuration * cellWidth}px`;  note.style.height = `${cellHeight}px`;    const handle = document.createElement("div");  handle.className = "note-drag-handle";  note.appendChild(handle);    grid.appendChild(note); }

✨ Warum ist das cool?

• Noten lassen sich direkt im Raster setzen, verschieben und vergrößern, ohne extra Buttons.
• Flexible Darstellung, damit sie sich auf verschiedenen Bildschirmgrößen anpassen.

2. Klang-Generierung für Drum-Sounds

👉 Jeder Drum-Sound wird synthetisch im Browser generiert – keine Samples!

function playKick() {  const osc = audioCtx.createOscillator();  osc.type = "sine";  const gainNode = audioCtx.createGain();    osc.frequency.setValueAtTime(150, audioCtx.currentTime);  osc.frequency.exponentialRampToValueAtTime(50, audioCtx.currentTime + 0.1);    gainNode.gain.setValueAtTime(1, audioCtx.currentTime);  gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.3);    osc.connect(gainNode);  gainNode.connect(audioCtx.destination);  osc.start();  osc.stop(audioCtx.currentTime + 0.3); }

✨ Warum ist das cool?

• Reine Synthese – die Sounds werden live generiert!
• Keine Audiodateien nötig, alles passiert in Echtzeit über das Web Audio API.
• Man kann mit Frequenzen und ADSR-Hüllkurven herumspielen.

3. Live Playback mit Playhead-Animation

👉 Der Playhead bewegt sich durch den Sequencer und zeigt, wann welche Sounds getriggert werden.

function startPlayback() {  stopPlayback();  currentStep = 0;  const playhead = document.createElement("div");  playhead.className = "playhead";  document.getElementById("sequencerGrid").appendChild(playhead);  globalInterval = setInterval(() => {    playhead.style.left = `${(currentStep / seqCols) * 100}%`;    for (let r = 0; r < 7; r++) {      if (sequence[r][currentStep]) {        if (r === 0) playKick();        else if (r === 1) playSnare();        else if (r === 2) playHiHat();      }    }    currentStep = (currentStep + 1) % seqCols;  }, 60000 / globalBPM / 4); }

✨ Warum ist das cool?

• Live-Animation, die genau anzeigt, welcher Sound als Nächstes getriggert wird.
• Synchronisation mit Drum- und Piano-Sequenzen.
• Variable Geschwindigkeit (BPM), die sich anpassen lässt.

Was kommt als Nächstes?

Version 2.1 ist schon in Planung!

• Knobs statt Slider für Lautstärken? 🎛️
• Velocity für Noten 🎶
• Mögliche Chord-Funktion? 🎵

Jetzt bist du dran: Teste ALVI 2.0 und sag mir, was du denkst!