Estoy tocando aleatoriamente 4 notas, A4, B4, C4, D4 de una matriz usando MonoSynth. También tengo cuatro cuadrantes de colores que representan cada nota. Azul=A4, Amarillo=B4, Rojo=C4, Verde=D4.
Estoy usando una promesa/espera en un bucle for.
Si se toca la nota A4 (y lo hace), entonces colorearía el cuadrado azul de rosa durante la duración de la nota, volviendo a azul una vez que termine de tocar. Para reiterar, si aparece la nota C4, se reproducirá y el cuadrado rojo se coloreará de rosa durante la duración de la nota que se está reproduciendo y luego volverá a ser rojo.
Mi problema es: no puedo sincronizar la duración de la nota con el cuadrado rosa gráfico. He trabajado en esto durante algunos días viendo documentación, youtube e incluso una respuesta útil de stackoverflow para la primera parte de este programa.
Cualquier ayuda sería muy apreciada.
VER:
let keys = ["A4", "B4", "C4", "D4"]; let monoSynth = new p5.MonoSynth(); let notes = []; let quadrants = []; let start=true; function setup() { createCanvas(500,500); background('grey'); } function topLeft1(){ fill('blue'); rect(100,100,150,150); } function topRight1(){ fill('yellow'); rect(250,100,150,150); } function bottomLeft1(){ fill('red'); rect(100,250,150,150); } function bottomRight1(){ fill('green'); rect(250,250,150,150); } function topLeft2(){ fill('pink'); rect(100,100,150,150); } function topRight2(){ fill('pink'); rect(250,100,150,150); } function bottomLeft2(){ fill('pink'); rect(100,250,150,150); } function bottomRight2(){ fill('pink'); rect(250,250,150,150); } function originalSquares(){ topLeft1(); topRight1(); bottomLeft1(); bottomRight1(); }//osqrs function pinkSquare(n){ if (n==0){ topLeft2(); } else if (n==1){ topRight2(); } else if (n==2){ bottomLeft2; } else{ bottomRight2(); } }//ps function loadKeys(x,y){ for (let i=0; i<30;i++){ let temp= round(random(0,3)); y[i]=temp; x[i]=keys[temp]; }//for i }//loadKeys function asyncDelay(t) { return new Promise(res => setTimeout(res, t)); } async function playStuff() { for (let i=0; i<30;i++){ monoSynth.play(notes[i], 5, 0, 3/ 6); pinkSquare(quadrants[i]); print(notes[i]); await asyncDelay(3/ 6 * 1000); originalSquares(); }//for i } //playStuff function draw() { if (start==true){ originalSquares(); start=false; }//if loadKeys(notes,quadrants); playStuff(); noLoop(); } //drawIntente usar p5.SoundLoop para controlar la sincronización del audio con el video. Es parte de la biblioteca p5.sound que ya está utilizando para que p5.MonoSynth funcione. Proporcioné un ejemplo a continuación que fusiona elementos de su código con el ejemplo que se encuentra en el enlace de referencia proporcionado para brindarle algunas ideas sobre cómo adoptarlo. En lugar de reproducir en bucle una matriz de 30 notas, este código elige continuamente notas aleatorias de las 4 teclas proporcionadas. También hice algunos cambios para que puedas usar menos funciones para crear los diferentes cuadrados y algunos otros ajustes menores, pero por supuesto, toma lo que quieras de esto.
let keys = ["A4", "B4", "C4", "D4"]; let synth, soundLoop; function topLeft(c){ fill(c); rect(100,100,150,150); } function topRight(c){ fill(c); rect(250,100,150,150); } function bottomLeft(c){ fill(c); rect(100,250,150,150); } function bottomRight(c){ fill(c); rect(250,250,150,150); } function originalSquares(){ topLeft('blue'); topRight('yellow'); bottomLeft('red'); bottomRight('green'); }//osqrs function pinkSquare(n){ switch(n){ case 0: topLeft('pink'); break; case 1: topRight('pink'); break; case 2: bottomLeft('pink'); break; case 3: bottomRight('pink'); } }//ps function setup() { let cnv = createCanvas(500, 500); cnv.mousePressed(canvasPressed); background('grey'); text('tap to start/stop', 10, 20); let intervalInSeconds = 0.5; soundLoop = new p5.SoundLoop(onSoundLoop, intervalInSeconds); synth = new p5.MonoSynth(); } function canvasPressed() { // ensure audio is enabled userStartAudio(); if (soundLoop.isPlaying) { soundLoop.stop(); } else { soundLoop.start(); } } function onSoundLoop(timeFromNow) { let randomNote = random(keys); let noteIndex = keys.indexOf(randomNote); synth.play(randomNote, 0.5, timeFromNow); originalSquares(); pinkSquare(noteIndex); } <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script> <meta charset="utf-8" /> </head> <body> </body> </html>