diff --git a/README.md b/README.md index b6796c6..89224db 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,8 @@ Sviluppato da **[luzadev](https://github.com/luzadev)**. 🎬 **Video di presentazione:** [guarda il Reel](docs/playpiano-reel.mp4) (27 secondi, formato verticale). +📖 **Guida all'uso:** [melody.djluza.com/guida.html](https://melody.djluza.com/guida.html), disponibile anche dentro l'app con il link «Guida». + ## Cosa fa - **Pianoforte a coda campionato** su tutti gli 88 tasti, da La0 a Do8, con registrazioni di uno Yamaha C5. Sono disponibili anche piano elettrico, organo, synth e archi. @@ -80,6 +82,7 @@ Tutta l'app è nel file `index.html`, senza dipendenze né passaggi di compilazi | Percorso | Contenuto | |---|---| | `index.html` | l'intera applicazione web | +| `guida.html`, `guida-img/` | guida all'uso con le sue immagini | | `samples/` | campioni del pianoforte, un mp3 ogni terza minore | | `esempi/` | brani di prova in formato MIDI, MusicXML e MXL | | `desktop/` | contenitore Electron e icona | @@ -106,7 +109,7 @@ dalla pagina Actions, oppure pubblicando un tag di versione, che crea anche una ### Pubblicazione del sito Il sito è composto da soli file statici: - rsync -az index.html samples esempi utente@server:public_html/ + rsync -az index.html guida.html guida-img samples esempi utente@server:public_html/ ## Limiti noti diff --git a/desktop/main.js b/desktop/main.js index 8c76770..21d9ef3 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -6,7 +6,7 @@ const http = require('http'), fs = require('fs'), path = require('path'); const ROOT = path.join(__dirname, '..'); const MIME = { '.html': 'text/html; charset=utf-8', '.js': 'text/javascript', '.css': 'text/css', '.mp3': 'audio/mpeg', '.mid': 'audio/midi', '.musicxml': 'application/xml', '.mxl': 'application/zip', '.png': 'image/png', '.txt': 'text/plain; charset=utf-8', '.json': 'application/json' }; -const ALLOWED = ['index.html', 'samples', 'esempi']; +const ALLOWED = ['index.html', 'guida.html', 'guida-img', 'samples', 'esempi']; function startServer() { return new Promise((resolve, reject) => { @@ -33,7 +33,9 @@ async function createWindow() { icon: path.join(__dirname, 'icon.png'), webPreferences: { contextIsolation: true, nodeIntegration: false, sandbox: true, backgroundThrottling: false } }); - win.webContents.setWindowOpenHandler(({ url }) => { if (/^https?:/.test(url)) shell.openExternal(url); return { action: 'deny' }; }); + win.webContents.setWindowOpenHandler(({ url }) => { // la guida si apre in una finestra dell'app, i link esterni nel browser + if (url.startsWith('http://localhost:' + port + '/')) return { action: 'allow', overrideBrowserWindowOptions: { width: 1180, height: 900, backgroundColor: '#14110f', autoHideMenuBar: true, title: 'PlayPiano · Guida' } }; + if (/^https?:/.test(url)) shell.openExternal(url); return { action: 'deny' }; }); win.on('closed', () => { win = null; }); await win.loadURL('http://localhost:' + port + '/'); } diff --git a/guida-img/accordo.jpg b/guida-img/accordo.jpg new file mode 100644 index 0000000..b1dfab4 Binary files /dev/null and b/guida-img/accordo.jpg differ diff --git a/guida-img/apprendimento.jpg b/guida-img/apprendimento.jpg new file mode 100644 index 0000000..fbb12a8 Binary files /dev/null and b/guida-img/apprendimento.jpg differ diff --git a/guida-img/spartito.jpg b/guida-img/spartito.jpg new file mode 100644 index 0000000..7a94a0f Binary files /dev/null and b/guida-img/spartito.jpg differ diff --git a/guida.html b/guida.html new file mode 100644 index 0000000..994d823 --- /dev/null +++ b/guida.html @@ -0,0 +1,268 @@ + + + + + +Guida · PlayPiano + + + +
+
+

PlayPianoGuida all'uso

+ ← Torna al pianoforte +
+ + + +
+
+

1Per iniziare

+

PlayPiano è un pianoforte a 88 tasti che funziona nel browser e come app per computer. Non richiede registrazione e non invia nulla in rete: tutto avviene sul tuo dispositivo.

+
    +
  1. Apri l'app e premi un tasto qualsiasi del pianoforte. Al primo tocco si caricano i suoni del pianoforte a coda: in alto a destra compare Pianoforte a coda pronto.
    2. +
  2. Premi ♪ Demo per vedere subito pentagramma, note che cadono e tasti che si illuminano.
    3. +
  3. Quando vuoi studiare un brano, passa alla modalità Apprendimento.
    4. +
+
L'app è divisa in fasce, dall'alto: i comandi dello strumento, la barra dello spartito, il compositore, il generatore di accordi, le idee con IA. Sotto compaiono il pentagramma, la cascata di note e la tastiera.
+
+ +
+

2Suonare

+

Quattro modi di suonare

+
    +
  • Mouse: fai clic sui tasti. Trascinando il puntatore ottieni un glissando.
    • +
  • Touch: puoi usare più dita insieme, per suonare accordi.
    • +
  • Tastiera del computer: due file di tasti coprono due ottave e mezza. Le lettere sono scritte sui tasti del pianoforte.
    • +
  • Tastiera MIDI: collegala prima di aprire l'app. Viene riconosciuta da sola, compreso il pedale. Serve Chrome, Edge o l'app desktop.
    • +
+

Dinamica

+

Con mouse e touch, più in basso premi sul tasto e più forte suona la nota. Con la tastiera del computer, tieni premuto Maiusc per suonare forte. Suonando piano il timbro diventa anche più scuro, come su uno strumento vero.

+

I comandi dello strumento

+
+ + + + + + +
ComandoA cosa serve
StrumentoPianoforte a coda, piano sintetico, piano elettrico, organo, synth, archi.
OttavaSposta le note assegnate alla tastiera del computer. Vale anche con ← e →. Così raggiungi tutti gli 88 tasti.
Volume e RiverberoLivello generale e ambiente della sala.
EtichetteCosa scrivere sui tasti: lettere del computer, Do Re Mi, C D E oppure niente. La scelta vale anche per i nomi sul pentagramma.
SustainIl pedale di risonanza. Si tiene anche con la Barra spaziatrice.
+
+ +
+

3Caricare uno spartito

+

Premi 📂 Carica MIDI / MusicXML oppure trascina il file sulla pagina. La tastiera si posiziona sul brano e compaiono pentagramma e cascata.

+
+ + + +
FormatoEstensioniNote
MusicXML.musicxml .xml .mxlIl più fedele: conserva durate, alterazioni e mani. Si esporta da MuseScore, Sibelius, Finale, Dorico.
MIDI.mid .midiMolto diffuso. Le durate scritte vengono dedotte dall'esecuzione, quindi il pentagramma può essere approssimato.
+
PDF e foto di spartiti non si possono leggere. Se hai solo un PDF, cercalo in MusicXML o MIDI, oppure convertilo con un programma di riconoscimento musicale.
+
Pentagramma, cascata di note e tastiera durante la riproduzione
Pentagramma su due righe, cascata e tastiera. La battuta in corso è evidenziata.
+

Leggere lo schermo

+
    +
  • Arancione è la mano destra, verde acqua la sinistra. Vale per le note che cadono e per i tasti.
    • +
  • Il pentagramma mostra sempre due righe: quella che stai suonando e la successiva. Sotto ogni rigo ci sono i nomi delle note.
    • +
  • Fai clic su una battuta del pentagramma per ripartire da lì.
    • +
+

La barra dello spartito

+
+ + + + + + + + + +
ComandoA cosa serve
⏮ e ▶ AvviaTorna all'inizio, avvia o mette in pausa. Anche con Invio o con un clic sulla cascata.
ModalitàAscolta suona il brano da solo. Apprendimento aspetta te.
Mani da suonareEntrambe, solo destra o solo sinistra. Conta in Apprendimento.
VelocitàDal 25% al 150%, senza cambiare l'intonazione.
VistaPentagramma e cascata, solo pentagramma o solo cascata. Su schermi bassi conviene una sola delle due.
Do Re MiMostra o nasconde i nomi delle note sul pentagramma.
✦ SpazioAccende o spegne stelle, scie e scintille della cascata.
PosizioneTrascina per spostarti nel brano.
+

Nella cartella esempi del progetto trovi alcuni brani di prova.

+
+ +
+

4Modalità Apprendimento

+

È il cuore dell'app: il brano avanza solo quando suoni la nota giusta. Puoi prenderti tutto il tempo che serve.

+
    +
  1. Carica un brano, genera un'idea oppure premi Demo.
    2. +
  2. In Modalità scegli Apprendimento (avanza solo se suoni).
    3. +
  3. In Mani da suonare scegli una mano sola: l'app suona l'altra per te.
    4. +
  4. Abbassa la Velocità al 50% e premi ▶ Avvia.
    5. +
  5. Quando una nota arriva sulla linea luminosa, la cascata si ferma e il tasto da premere si illumina. Suonalo e il brano riparte.
    6. +
+
Pentagramma in modalità Apprendimento con note verdi e nota arancione
Le note suonate bene diventano verdi. Quella da suonare è arancione con un alone.
+

Cosa succede mentre suoni

+
    +
  • Un tasto sbagliato lampeggia in rosso e conta come errore. Il brano resta fermo.
    • +
  • Negli accordi devi premere tutte le note, anche una dopo l'altra.
    • +
  • Le note dell'altra mano appaiono attenuate e non contano come errori.
    • +
  • C'è una piccola tolleranza: una nota suonata con un attimo di anticipo viene accettata.
    • +
  • Il punteggio mostra note giuste, errori, precisione e avanzamento. Si azzera quando ricominci o ti sposti nel brano.
    • +
+
Un metodo che funziona. Studia la mano destra al 50%, poi la sinistra, poi entrambe. Quando superi il 90% di precisione, alza la velocità di un gradino. Per i passaggi difficili, fai clic sulla battuta e ripeti solo quella.
+
+ +
+

5Compositore di idee

+

Genera brani originali completi, senza bisogno di internet. Ogni idea ha melodia per la mano destra, accompagnamento per la sinistra e una scheda che ne descrive la struttura.

+
+ + + + + +
SceltaOpzioni
StileSerena, Malinconica, Epica, Allegra, Valzer, Ninna nanna oppure Casuale. Ogni stile ha il suo tempo, la sua metrica e il suo accompagnamento.
TonalitàSette maggiori e sette minori, oppure casuale.
Lunghezza8, 16, 32, 64 o 128 battute. I brani lunghi hanno una forma a sezioni in cui il tema ritorna, per esempio A – B – A – C.
DifficoltàFacile usa ritmi semplici, Media aggiunge crome e figure più mosse.
+
    +
  • 🎲 Genera idea crea un brano nuovo e lo suona subito.
    • +
  • ↻ Variazione mantiene accordi, tonalità e tempo, ma riscrive la melodia.
    • +
  • La scheda dell'idea mostra titolo, tonalità, tempo, gli accordi di ogni sezione con nome e grado, la forma e uno spunto per sviluppare il brano.
    • +
+

Ogni idea si studia in modalità Apprendimento e si esporta in MIDI come qualsiasi altro brano.

+
+ +
+

6Generatore di accordi

+

Un accordo alla volta

+

Scegli Tonica, Tipo di accordo e Rivolto. I tasti si illuminano in viola e accanto compaiono la sigla e i nomi delle note. ▶ Ascolta lo suona, 🎲 ne propone uno a caso, ✕ spegne i tasti.

+
Tastiera con le note di un accordo illuminate in viola
Un accordo di settima maggiore illuminato sulla tastiera.
+

I diciotto tipi disponibili: maggiore, minore, diminuito, aumentato, sospeso di seconda e di quarta, sesta e minore sesta, settima di dominante, settima maggiore, minore settima, minore con settima maggiore, semidiminuito, settima diminuita, nona aggiunta, nona di dominante, nona maggiore, minore nona.

+

Giri di accordi

+

Un giro è una successione di accordi che si ripete. Scegli la tonica in alto, poi:

+
+ + + + + +
SceltaOpzioni
Giro di accordiTredici giri: pop, anni '50, classico, emotivo, canone di Pachelbel, jazz ii–V–I, turnaround, blues in dodici battute e cinque giri in minore, tra cui l'andalusa.
AccordiTriadi, con la settima, oppure come previsto dal giro.
AccompagnamentoAccordi pieni, basso più accordo, ballata, arpeggio.
RipetizioniUna, due o quattro volte, con chiusura finale sulla tonica.
+

🎼 Carica giro porta il giro su pentagramma e cascata. 🎲 Casuale sceglie tonalità, giro e accompagnamento per te. Gli accordi si collegano con il rivolto più vicino, come farebbe un pianista.

+
I giri sono ottimi per esercitare la mano sinistra. Caricane uno, scegli Solo sinistra in Apprendimento e ripetilo in tonalità diverse.
+
+ +
+

7Idee con IA locale

+

Puoi descrivere a parole il brano che vorresti, per esempio «un valzer allegro da festa di paese». Un modello di intelligenza artificiale sul tuo computer ne progetta titolo, stile, tonalità, tempo, accordi e motivo melodico. Il compositore dell'app completa il resto. Nessun dato lascia il tuo computer.

+

Preparazione, una volta sola

+
    +
  1. Installa Ollama e avvialo.
    2. +
  2. Scarica un modello. Un buon punto di partenza: + 
    ollama pull gemma3:12b
    3. +
  3. Apri PlayPiano dall'app desktop oppure da localhost con il file Avvia PlayPiano.command.
    4. +
+

Uso

+
    +
  1. Scrivi la descrizione nel campo Idee con IA locale.
    2. +
  2. Scegli il Modello. Lunghezza e difficoltà si prendono dai menu del compositore.
    3. +
  3. Premi ✨ Genera con IA o Invio. La prima risposta può richiedere fino a un minuto, perché il modello deve caricarsi.
    4. +
+

Dopo la generazione, in alto a destra l'app indica quanti motivi del modello ha potuto usare. Se il numero è spesso basso, prova un modello più grande.

+

Quale modello scegliere

+
    +
  • Vanno bene i modelli di tipo «instruct» da circa 8 miliardi di parametri in su. Provati con buoni risultati: gemma3:12b e gemma4:26b.
    • +
  • I modelli molto piccoli sbagliano spesso le durate. I modelli per codice, immagini o embedding non sono adatti.
    • +
+
Dal sito online. Ollama accetta richieste solo dall'app desktop e da pagine su localhost. Per usare l'IA dal sito, avvialo consentendo l'indirizzo del sito: + 
OLLAMA_ORIGINS=https://melody.djluza.com ollama serve
+
+ +
+

8Registrare ed esportare

+
    +
  • ● Rec registra quello che suoni, pedale compreso. Premi di nuovo per fermare, poi ▶ Play per riascoltare. La registrazione resta in memoria finché non ne fai un'altra o chiudi l'app.
    • +
  • ⬇ MIDI salva come file MIDI il brano caricato o generato, con mano destra e sinistra su tracce separate. Puoi riaprirlo qui o in qualsiasi programma musicale.
    • +
+
+ +
+

9App desktop

+

I pacchetti si scaricano dalla pagina delle Release su GitHub.

+
+ + + + + +
SistemaFileAl primo avvio
macOS con chip Apple…-arm64.dmgClic destro sull'app, poi «Apri».
macOS Intel….dmg
WindowsSetup oppure Portable .exe«Ulteriori informazioni», poi «Esegui comunque».
Linux.AppImageRendi il file eseguibile con chmod +x.
+

Gli avvisi compaiono perché i pacchetti non hanno un certificato a pagamento. Rispetto al browser, l'app desktop si collega a Ollama senza configurazioni, legge i suoni in locale anche senza internet e accetta le tastiere MIDI senza chiedere permessi.

+
+ +
+

10Scorciatoie da tastiera

+
+ + + + + + + + + +
TastiFunzione
Z X C V B N MTasti bianchi dell'ottava bassa, dal Do al Si.
S D G H JTasti neri dell'ottava bassa.
Q W E R T Y U I O PTasti bianchi dall'ottava alta in su.
2 3 5 6 7 9 0Tasti neri dell'ottava alta.
← →Ottava giù e su.
Barra spaziatricePedale sustain, finché la tieni premuta.
Maiusc + notaNota suonata forte.
InvioAvvia o mette in pausa il brano.
+

Le lettere seguono la posizione fisica dei tasti, quindi funzionano con qualsiasi layout. In Chrome ed Edge le etichette sul pianoforte si adattano alla tastiera italiana. Mentre scrivi nel campo dell'IA, la tastiera del computer non suona.

+
+ +
+

11Se qualcosa non va

+
+ + + + + + + + + + +
ProblemaCosa fare
Non sento nullaI browser attivano l'audio solo dopo un clic o un tasto: premi una nota. Controlla il cursore Volume e il volume del computer.
Il pianoforte suona «finto»I suoni reali si caricano al primo tasto e richiedono qualche secondo. Aspetta la scritta Pianoforte a coda pronto e verifica che lo strumento sia Pianoforte a coda.
Il menu dei modelli è vuotoOllama non è avviato, oppure hai aperto index.html con un doppio clic. Usa l'app desktop o Avvia PlayPiano.command, poi premi ⚙ per aggiornare l'elenco.
Ollama non parteSe i modelli sono su un disco esterno, controlla che sia collegato.
L'animazione va a scattiSpegni gli effetti con ✦ Spazio, oppure scegli una sola Vista.
La tastiera MIDI non viene vistaCollegala prima di aprire l'app e usa Chrome, Edge o l'app desktop. Safari e Firefox hanno un supporto limitato.
Il brano si ferma e non vedo il tasto da premereLa nota è fuori dalla parte di tastiera visibile: succede su schermi stretti. Sposta l'ottava con ← →.
Il pentagramma di un MIDI è stranoI MIDI suonati a mano libera hanno durate irregolari. Se esiste, usa la versione MusicXML dello stesso brano.
Un ritornello non viene ripetutoI segni di ritornello dei file MusicXML non sono ancora interpretati: il brano viene letto in ordine.
+

Per segnalare un problema o proporre un'idea, apri una segnalazione su GitHub.

+
+
+ + +
+ + diff --git a/index.html b/index.html index 86abcc7..e4fda6a 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@ h1 { margin: 0; font: 600 28px/1.1 Georgia, "Times New Roman", serif; letter-spacing: .5px; } h1 span { color: var(--accent); } header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; } + header a.guide { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; } header a.guide:hover { text-decoration: underline; } .piano { width: 100%; max-width: 1280px; border-radius: 16px; padding: 14px 14px 18px; @@ -115,7 +116,7 @@

PlayPiano

-

Pianoforte virtuale a 88 tasti: suona con mouse, touch, tastiera del computer o tastiera MIDI

+

Pianoforte virtuale a 88 tasti: suona con mouse, touch, tastiera del computer o tastiera MIDI · 📖 Guida

diff --git a/package.json b/package.json index deaad15..5ab848f 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,9 @@ "desktop/main.js", "desktop/icon.png", "package.json", - "LICENSE" + "LICENSE", + "guida.html", + "guida-img/**" ], "icon": "desktop/icon.png", "mac": {