Spaces:
Running
Running
there is no audio playing when midi notes are pressed, also, get rid of the extra files like the sequencer etc. clean it up and make it work.
Browse files- index.html +0 -1
- script.js +15 -12
index.html
CHANGED
|
@@ -219,7 +219,6 @@
|
|
| 219 |
</div>
|
| 220 |
</div>
|
| 221 |
</div>
|
| 222 |
-
|
| 223 |
<script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
|
| 224 |
<script src="script.js"></script>
|
| 225 |
<script>
|
|
|
|
| 219 |
</div>
|
| 220 |
</div>
|
| 221 |
</div>
|
|
|
|
| 222 |
<script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
|
| 223 |
<script src="script.js"></script>
|
| 224 |
<script>
|
script.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
| 1 |
|
|
|
|
| 2 |
// Tone.js setup
|
| 3 |
let synth;
|
| 4 |
let filter;
|
|
@@ -8,6 +9,7 @@ let delay;
|
|
| 8 |
let analyser;
|
| 9 |
let activeNotes = new Map();
|
| 10 |
let filterEnvelope;
|
|
|
|
| 11 |
|
| 12 |
// Initialize audio context on first interaction
|
| 13 |
let audioContextStarted = false;
|
|
@@ -47,7 +49,6 @@ function setupSynth() {
|
|
| 47 |
if (filterEnvelope) {
|
| 48 |
filterEnvelope.dispose();
|
| 49 |
}
|
| 50 |
-
|
| 51 |
// Create effects
|
| 52 |
reverb = new Tone.Reverb({
|
| 53 |
decay: 2,
|
|
@@ -73,11 +74,13 @@ function setupSynth() {
|
|
| 73 |
}).connect(delay);
|
| 74 |
|
| 75 |
// Create filter envelope
|
| 76 |
-
filterEnvelope = new Tone.
|
| 77 |
attack: 0.1,
|
| 78 |
decay: 0.3,
|
| 79 |
sustain: 0.5,
|
| 80 |
-
release: 1.0
|
|
|
|
|
|
|
| 81 |
});
|
| 82 |
|
| 83 |
// Create main synth
|
|
@@ -172,14 +175,17 @@ function onMIDIMessage(message) {
|
|
| 172 |
|
| 173 |
updateActiveNotesDisplay();
|
| 174 |
}
|
| 175 |
-
|
| 176 |
function noteOn(note, velocity) {
|
| 177 |
-
if (!synth)
|
|
|
|
|
|
|
|
|
|
|
|
|
| 178 |
|
| 179 |
const noteName = Tone.Frequency(note, "midi").toNote();
|
| 180 |
const velocityNorm = velocity / 127;
|
| 181 |
|
| 182 |
-
synth.triggerAttack(noteName,
|
| 183 |
activeNotes.set(note, { name: noteName, velocity: velocity });
|
| 184 |
|
| 185 |
console.log(`Note On: ${noteName}, Velocity: ${velocity}`);
|
|
@@ -189,12 +195,11 @@ function noteOff(note) {
|
|
| 189 |
if (!synth) return;
|
| 190 |
|
| 191 |
const noteName = Tone.Frequency(note, "midi").toNote();
|
| 192 |
-
synth.triggerRelease(noteName);
|
| 193 |
activeNotes.delete(note);
|
| 194 |
|
| 195 |
console.log(`Note Off: ${noteName}`);
|
| 196 |
}
|
| 197 |
-
|
| 198 |
function updateActiveNotesDisplay() {
|
| 199 |
const container = document.getElementById('active-notes');
|
| 200 |
if (activeNotes.size === 0) {
|
|
@@ -313,7 +318,6 @@ function setupUIControls() {
|
|
| 313 |
}
|
| 314 |
drawADSREnvelope(); // Update ADSR visualization
|
| 315 |
});
|
| 316 |
-
|
| 317 |
// Filter Envelope Controls
|
| 318 |
document.getElementById('filter-attack').addEventListener('input', (e) => {
|
| 319 |
const value = parseFloat(e.target.value);
|
|
@@ -350,15 +354,14 @@ function setupUIControls() {
|
|
| 350 |
}
|
| 351 |
drawFilterEnvelope(); // Update filter ADSR visualization
|
| 352 |
});
|
| 353 |
-
|
| 354 |
// Reverb Wet
|
| 355 |
document.getElementById('reverb-wet').addEventListener('input', (e) => {
|
| 356 |
const value = parseFloat(e.target.value);
|
| 357 |
-
document.getElementById('reverb-wet-value').textContent = `${Math.round(value * 100)}%`;
|
| 358 |
if (reverb) {
|
| 359 |
reverb.wet.value = value;
|
| 360 |
}
|
| 361 |
-
|
| 362 |
|
| 363 |
// Distortion Wet
|
| 364 |
document.getElementById('distortion-wet').addEventListener('input', (e) => {
|
|
|
|
| 1 |
|
| 2 |
+
|
| 3 |
// Tone.js setup
|
| 4 |
let synth;
|
| 5 |
let filter;
|
|
|
|
| 9 |
let analyser;
|
| 10 |
let activeNotes = new Map();
|
| 11 |
let filterEnvelope;
|
| 12 |
+
let isPlaying = false;
|
| 13 |
|
| 14 |
// Initialize audio context on first interaction
|
| 15 |
let audioContextStarted = false;
|
|
|
|
| 49 |
if (filterEnvelope) {
|
| 50 |
filterEnvelope.dispose();
|
| 51 |
}
|
|
|
|
| 52 |
// Create effects
|
| 53 |
reverb = new Tone.Reverb({
|
| 54 |
decay: 2,
|
|
|
|
| 74 |
}).connect(delay);
|
| 75 |
|
| 76 |
// Create filter envelope
|
| 77 |
+
filterEnvelope = new Tone.FrequencyEnvelope({
|
| 78 |
attack: 0.1,
|
| 79 |
decay: 0.3,
|
| 80 |
sustain: 0.5,
|
| 81 |
+
release: 1.0,
|
| 82 |
+
baseFrequency: 200,
|
| 83 |
+
octaves: 4
|
| 84 |
});
|
| 85 |
|
| 86 |
// Create main synth
|
|
|
|
| 175 |
|
| 176 |
updateActiveNotesDisplay();
|
| 177 |
}
|
|
|
|
| 178 |
function noteOn(note, velocity) {
|
| 179 |
+
if (!synth) {
|
| 180 |
+
// Initialize audio context and synth on first note
|
| 181 |
+
initAudioContext();
|
| 182 |
+
setupSynth();
|
| 183 |
+
}
|
| 184 |
|
| 185 |
const noteName = Tone.Frequency(note, "midi").toNote();
|
| 186 |
const velocityNorm = velocity / 127;
|
| 187 |
|
| 188 |
+
synth.triggerAttack(noteName, Tone.now(), velocityNorm);
|
| 189 |
activeNotes.set(note, { name: noteName, velocity: velocity });
|
| 190 |
|
| 191 |
console.log(`Note On: ${noteName}, Velocity: ${velocity}`);
|
|
|
|
| 195 |
if (!synth) return;
|
| 196 |
|
| 197 |
const noteName = Tone.Frequency(note, "midi").toNote();
|
| 198 |
+
synth.triggerRelease(noteName, Tone.now());
|
| 199 |
activeNotes.delete(note);
|
| 200 |
|
| 201 |
console.log(`Note Off: ${noteName}`);
|
| 202 |
}
|
|
|
|
| 203 |
function updateActiveNotesDisplay() {
|
| 204 |
const container = document.getElementById('active-notes');
|
| 205 |
if (activeNotes.size === 0) {
|
|
|
|
| 318 |
}
|
| 319 |
drawADSREnvelope(); // Update ADSR visualization
|
| 320 |
});
|
|
|
|
| 321 |
// Filter Envelope Controls
|
| 322 |
document.getElementById('filter-attack').addEventListener('input', (e) => {
|
| 323 |
const value = parseFloat(e.target.value);
|
|
|
|
| 354 |
}
|
| 355 |
drawFilterEnvelope(); // Update filter ADSR visualization
|
| 356 |
});
|
|
|
|
| 357 |
// Reverb Wet
|
| 358 |
document.getElementById('reverb-wet').addEventListener('input', (e) => {
|
| 359 |
const value = parseFloat(e.target.value);
|
| 360 |
+
document.getElementById('reverb-wet-value').textContent = `${Math.round(value * 100)}%`;
|
| 361 |
if (reverb) {
|
| 362 |
reverb.wet.value = value;
|
| 363 |
}
|
| 364 |
+
});
|
| 365 |
|
| 366 |
// Distortion Wet
|
| 367 |
document.getElementById('distortion-wet').addEventListener('input', (e) => {
|