Guitoro

Una chitarra virtuale che suoni con la tastiera del computer

Cosa fa

Uno strumento nel browser per suonare la chitarra con la tastiera: si scelgono gli accordi e si "strimpella" premendo i tasti. Ha avuto oltre 500 voti su Hacker News.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: canzoni con gli accordi a pagamento, versione per le scuole.

Rendilo tuo

Con le canzoni italiane più famose da suonare: falò in spiaggia, matrimoni.
Lo stesso per altri strumenti: ukulele, mandolino, fisarmonica.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Chitarra da Tastiera": uno strumento nel browser per suonare la chitarra con la tastiera del computer o toccando lo schermo: si scelgono gli accordi e si strimpella, con un suono realistico generato dal codice. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina principale con la chitarra pronta da suonare
2. Scelta degli accordi assegnati ai tasti (1–9) e del ritmo
3. Canzoni facili con gli accordi che scorrono
4. Registrazione e download di ciò che si è suonato
5. Pagina Pro

Stile: musicale e caldo: sfondo legno scuro #3B2416, corde dorate #E5C07B, tasti degli accordi come pulsanti grandi color crema #FDF6E3, carattere "Inter", animazione delle corde che vibrano. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "canzoni": titolo, accordi in sequenza, ritmo (canzoni di pubblico dominio o scritte apposta)
- "preferenze": accordi assegnati ai tasti e suono scelto, collegate all'utente
- "profili": piano

Regole di sicurezza obbligatorie:
- le canzoni sono pubbliche, le aggiungono solo gli amministratori
- ogni utente vede solo le sue preferenze
- il piano non si modifica dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Il suono della corda generato dal codice

Il suono non usa registrazioni: ogni corda è generata con l'algoritmo Karplus-Strong nel Web Audio API (codice nei Dettagli tecnici), che imita una corda pizzicata con un rumore breve che si ripete e si smorza.

I tasti 1–9 scelgono l'accordo (Do, Re, Mi minore...), la barra spaziatrice o lo scorrimento del dito strimpella dall'alto in basso, Maiusc dal basso in alto. Su telefono si toccano gli accordi e si fa scorrere il dito sulle corde.

Le canzoni facili mostrano gli accordi che scorrono a tempo, come un karaoke degli accordi. Usa solo canzoni di pubblico dominio o melodie originali.

4. Registrare e Pro

Pulsante "Registra": cattura l'audio suonato (MediaRecorder sull'uscita del Web Audio) e lo fa scaricare.

Pro: tutti gli accordi (settime, barrè, sospesi), suoni diversi (acustica, classica, elettrica pulita), metronomo, ed esportazione in WAV.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 3,99 € una volta sola. Il pagamento sblocca tutti gli accordi, i suoni, il metronomo e l'esportazione.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Ritardo: suona su un telefono Android economico: il suono deve partire subito al tocco, senza ritardi fastidiosi.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Una corda pizzicata con Karplus-Strong

Un breve rumore casuale passa in un anello che lo ripete e lo smorza: il risultato suona come una corda pizzicata. Un accordo è sei corde suonate una dopo l'altra.

export function corda(audio: AudioContext, frequenza: number, quando = audio.currentTime, durata = 2.5) {
  const campioni = Math.floor(audio.sampleRate * durata);
  const buffer = audio.createBuffer(1, campioni, audio.sampleRate);
  const dati = buffer.getChannelData(0);
  const periodo = Math.round(audio.sampleRate / frequenza);

  // 1. Rumore iniziale lungo un periodo (il "pizzico")
  for (let i = 0; i < periodo; i++) dati[i] = Math.random() * 2 - 1;
  // 2. Ogni campione è la media dei due di un periodo prima, un po' smorzata
  for (let i = periodo; i < campioni; i++) {
    dati[i] = 0.996 * 0.5 * (dati[i - periodo] + dati[i - periodo + 1]);
  }

  const sorgente = audio.createBufferSource();
  sorgente.buffer = buffer;
  sorgente.connect(audio.destination);
  sorgente.start(quando);
}

// Frequenze delle corde per alcuni accordi (dal Mi basso al Mi cantino; 0 = corda non suonata)
const ACCORDI: Record<string, number[]> = {
  Do:  [0, 130.81, 164.81, 196.0, 261.63, 329.63],
  Sol: [98.0, 123.47, 146.83, 196.0, 246.94, 392.0],
  Re:  [0, 0, 146.83, 220.0, 293.66, 369.99],
  Mim: [82.41, 123.47, 164.81, 196.0, 246.94, 329.63],
};

export function strimpella(audio: AudioContext, accordo: string, versoIlBasso = true) {
  const corde = ACCORDI[accordo].filter((f) => f > 0);
  const ordine = versoIlBasso ? corde : [...corde].reverse();
  ordine.forEach((f, i) => corda(audio, f, audio.currentTime + i * 0.018));   // 18 ms tra una corda e l'altra
}

Pezzi comuni a tutti i progetti

Glossario

Karplus-Strong: Un algoritmo famoso che crea il suono di una corda pizzicata partendo da un rumore.
Web Audio API: La funzione del browser che crea e mescola suoni direttamente dal codice.