Share
Robert Moog ha creato uno dei primi sintetizzatori modulari commerciali. Le sue invenzioni consistevano in banchi di fili e manopole, consentendo ai musicisti di creare suoni mai ascoltati prima. Questi strumenti non erano neanche economici, costando migliaia di dollari anche per il modello più basilare.
Ora, grazie all'API Web Audio, possiamo creare il nostro synth dal suono simile che possiamo configurare per i contenuti del nostro cuore per il totale complessivo di $ 0. Non solo, possiamo distribuire il nostro synth istantaneamente a chiunque nel mondo grazie al web.
Se non hai letto i tutorial precedenti in questa serie di Web Audio, ti suggerirei di tornare indietro e leggerli prima di intraprenderlo, poiché coprono le basi dell'utilizzo dell'API Web Audio e la creazione di un suono da zero.
Iniziamo creando una pagina HTML di base.
Aggiungi suoni alla tua app Web sintetizzatore!
E uno stile di base nel nostro stili / main.css file.
body font-family: sans-serif; .container margin: auto; larghezza: 800px;
Forse la cosa più importante di cui il tuo sintetizzatore ha bisogno è una tastiera. Fortunatamente, ho creato un piccolo frammento di JavaScript che aggiungerà una tastiera virtuale alla tua pagina. Scarica una copia di Qwerty Hancock e fai riferimento in fondo alla tua pagina in questo modo.
Quindi aggiungi un div vuoto alla tua pagina con un id di "tastiera".
Questo è il posto sulla pagina in cui verrà inserita la tastiera.
Vogliamo anche impostare un file JavaScript dedicato per il nostro synth, quindi creiamo anche quello e facci riferimento dopo aver incluso Qwerty Hancock.
All'interno di synth.js inizializzeremo la nostra tastiera effettuando le seguenti operazioni.
var keyboard = new QwertyHancock (id: 'keyboard', width: 600, height: 150, octaves: 2);
Questo dice alla nostra pagina di inserire un'istanza della nostra tastiera nell'elemento con l'id di "tastiera", ridimensionarla a 600 x 150 px e rendere il numero di tasti sulla cover della tastiera di due ottave. Salva e aggiorna il tuo browser per vedere una bella tastiera su schermo. Usa i tasti, tocca, o il mouse per vedere le note accese mentre le premi.
Qwerty Hancock ci fornisce due ascoltatori di eventi, keyUp e keyDown. Questi ci permettono di agganciare la tastiera e scrivere il codice che si attiva quando si preme la tastiera. Ci dice anche quale nota è stata premuta e la sua frequenza corrispondente in hertz.
Accentsconagua
keyboard.keyDown = function (note, frequency) console.log ('Note', note, 'è stato premuto'); console.log ('La sua frequenza è', frequenza); ; keyboard.keyUp = function (note, frequency) console.log ('Note', note, 'è stato rilasciato'); console.log ('La sua frequenza era', frequenza); ;Iniziamo un oscillatore quando viene premuto un tasto. Lo fermeremo dopo un secondo in modo che non duri per sempre.
var context = new AudioContext (); keyboard.keyDown = function (note, frequency) var osc = context.createOscillator (); osc.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Perché stiamo creando l'oscillatore all'interno del keyDown funzione? Non è inefficiente? Gli oscillatori sono progettati per essere leggeri e per essere gettati via dopo l'uso. Puoi effettivamente usarli solo una volta. Pensa a loro come a una sorta di bizzarro fuoco d'artificio audio.
Ora quando premiamo un tasto, sentiamo un suono. È un po 'rumoroso, quindi creiamo un gainNode per agire come controllo del volume principale.
var context = new AudioContext (), masterVolume = context.createGain (); masterVolume.gain.value = 0.3; masterVolume.connect (context.destination); keyboard.keyDown = function (note, frequency) var osc = context.createOscillator (); osc.connect (MASTERVOLUME); masterVolume.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Una tastiera che riproduce ripetutamente una singola nota non è molto divertente, quindi colleghiamo la frequenza all'oscillatore prima di iniziare a suonare.
osc.frequency.value = frequency;
Bello. Ora abbiamo bisogno di interrompere l'oscillatore dopo aver sollevato una chiave piuttosto che dopo un secondo. Perché stiamo creando l'oscillatore all'interno del keyDown funzione, dobbiamo tenere traccia di quale oscillatore sta suonando quale frequenza per fermarlo quando il tasto viene rilasciato. Un modo semplice per farlo è creare un oggetto vuoto e aggiungere le frequenze come chiavi, insieme al quale l'oscillatore sta suonando quella frequenza come valore.
var oscillators = ; keyboard.keyDown = function (nota, frequenza) // Codice precedente qui oscillators [frequency] = osc; osc.start (context.currentTime); ;
Ciò significa che possiamo facilmente utilizzare la frequenza che otteniamo dai nostri noteUp funzione per fermare quell'oscillatore specifico.
keyboard.keyUp = function (note, frequency) oscillators [frequency] .stop (context.currentTime); ;
Ora abbiamo un sintetizzatore completamente funzionante (molto semplice) nel browser! Ok, al momento non sembra grandioso, ma vediamo se possiamo cambiarlo.
La prima cosa da fare è cambiare il tipo di onda che l'oscillatore emette. Ci sono quattro tipi di base tra cui scegliere: seno, quadrato, triangolo e dente di sega. Ogni diversa forma dell'onda suona diversa. Gioca con loro e scegli il tuo preferito. Per questo esempio, sceglierò "dente di sega".
osc.type = 'sawtooth';
Lì, suona meglio.
È molto raro trovare un sintetizzatore che utilizza un singolo oscillatore. La maggior parte dei synth rinforza il loro suono combinando diversi oscillatori di diversi tipi. Vediamo come suona se aggiungiamo un altro. Ricorda, dobbiamo raddoppiare tutte le nostre connessioni e sarà necessario aggiungere oscillatori della stessa frequenza a un array. Ciò significa che possiamo scorrere su di loro al fine di fermare tutti gli oscillatori che stanno suonando la stessa nota.
keyboard.keyDown = function (note, frequency) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = frequency; osc.type = 'sawtooth'; osc2.frequency.value = frequency; osc2.type = 'triangle'; osc.connect (MASTERVOLUME); osc2.connect (MASTERVOLUME); masterVolume.connect (context.destination); oscillatori [frequenza] = [osc, osc2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = function (note, frequency) oscillators [frequency] .forEach (function (oscillator) oscillator.stop (context.currentTime);); ;
Per finire, usiamo un trucco che abbiamo imparato nel tutorial precedente. Possiamo aggiungere un po 'di ritornello per aggiungere più luccichio al nostro suono, smorzando leggermente gli oscillatori.
osc.detune.value = -10; osc2.detune.value = 10;
Bello, un synth di cui Kraftwerk sarebbe orgoglioso! Gioca con l'articolo finito, o forchetta il repository su GitHub per modificare il synth al contenuto del tuo cuore.
