Audiomass

Un editor audio a più tracce, gratuito, nel browser

Cosa fa

Programma per modificare l'audio direttamente nel browser, gratuito e open source, ora anche con più tracce.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: versione cloud con salvataggio dei progetti e funzioni AI a pagamento.

Rendilo tuo

• Per chi fa podcast in italiano: togliere le pause, normalizzare la voce, aggiungere la sigla.
• Uno strumento che fa una sola cosa benissimo, come pulire i vocali di WhatsApp.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Taglia Audio": un editor audio semplice nel browser: tagliare, unire, alzare il volume, sfumare, togliere il silenzio e salvare, senza installare nulla e senza caricare i file su internet. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina principale: trascina un file audio e appare la forma d'onda
2. Editor: selezione con il mouse, taglia, copia, incolla, sfuma, volume, normalizza
3. Più tracce (Pro): voce e musica di sottofondo
4. Esportazione in WAV o MP3
5. Pagina "Perché è sicuro"

Stile: da studio di registrazione: sfondo grafite #18181B, forma d'onda verde acqua #2DD4BF, selezione in giallo trasparente, carattere "Inter", pulsanti con icone chiare. 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:
- nessun file audio viene caricato: tutto resta nel browser
- "profili": piano

Regole di sicurezza obbligatorie:
- i file restano sul dispositivo dell'utente
- 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. Modificare l'audio nel browser

Il file si decodifica con il Web Audio API (decodeAudioData) e si disegna la forma d'onda su canvas, con zoom e scorrimento. Si seleziona trascinando il mouse.

Operazioni: taglia, copia, incolla, elimina, silenzio, sfuma in entrata e in uscita, volume, normalizza (porta il picco a −1 dB), rimuovi i silenzi lunghi. Annulla/ripeti illimitato. Tutto lavora sui campioni audio in memoria, nel browser.

Esportazione in WAV (codice nei Dettagli tecnici) e in MP3 con un codificatore in WebAssembly. Il file non viene mai inviato.

4. Più tracce e Pro

Pro: più tracce (es. voce + musica), con volume per traccia e "ducking" (la musica si abbassa da sola quando c'è la voce), effetti (equalizzatore, riduzione del rumore semplice), ed esportazione MP3 ad alta qualità.

Funziona offline come PWA dopo il primo caricamento.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 5,99 € una volta sola. Il pagamento sblocca più tracce, effetti ed esportazione MP3 di alta qualità.

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. Qualità: taglia e riesporta un file WAV senza modifiche: deve suonare identico all'originale.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Sfumare e salvare in WAV

Applica una sfumatura in uscita ai campioni e trasforma l'audio nel formato WAV, scrivendo a mano l'intestazione del file.

export function sfumaUscita(buffer: AudioBuffer, secondi: number) {
  const n = Math.min(buffer.length, Math.floor(secondi * buffer.sampleRate));
  for (let c = 0; c < buffer.numberOfChannels; c++) {
    const dati = buffer.getChannelData(c);
    for (let i = 0; i < n; i++) dati[buffer.length - n + i] *= 1 - i / n;   // da 1 a 0
  }
}

export function inWav(buffer: AudioBuffer): Blob {
  const canali = buffer.numberOfChannels, frequenza = buffer.sampleRate, campioni = buffer.length;
  const byteDati = campioni * canali * 2;                        // 16 bit = 2 byte
  const vista = new DataView(new ArrayBuffer(44 + byteDati));
  const testo = (pos: number, s: string) => [...s].forEach((c, i) => vista.setUint8(pos + i, c.charCodeAt(0)));

  testo(0, "RIFF"); vista.setUint32(4, 36 + byteDati, true); testo(8, "WAVE");
  testo(12, "fmt "); vista.setUint32(16, 16, true); vista.setUint16(20, 1, true);   // PCM
  vista.setUint16(22, canali, true); vista.setUint32(24, frequenza, true);
  vista.setUint32(28, frequenza * canali * 2, true); vista.setUint16(32, canali * 2, true);
  vista.setUint16(34, 16, true); testo(36, "data"); vista.setUint32(40, byteDati, true);

  let pos = 44;
  for (let i = 0; i < campioni; i++) {
    for (let c = 0; c < canali; c++) {
      const s = Math.max(-1, Math.min(1, buffer.getChannelData(c)[i]));
      vista.setInt16(pos, s < 0 ? s * 0x8000 : s * 0x7fff, true);
      pos += 2;
    }
  }
  return new Blob([vista], { type: "audio/wav" });
}

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

Forma d'onda

Il disegno del suono nel tempo: i picchi alti sono i suoni forti, le parti piatte il silenzio.

Normalizzare

Alzare il volume di tutto il file in modo che il punto più forte arrivi vicino al massimo, senza distorcere.