Share
Robert Moog opprettet en av de aller første kommersielle modulære synthesizerene. Hans oppfinnelser besto av banker av ledninger og knotter, slik at musikere kan lage lyder som aldri hørt før. Disse instrumentene var heller ikke billige, og kostet tusenvis av dollar for selv den mest grunnleggende modellen.
Nå, takket være Web Audio API, kan vi lage vår egen liknende lyd som vi kan konfigurere til hjerteinnholdet til totalt $ 0. Ikke bare det, vi kan distribuere vår synth umiddelbart til alle i verden takket være nettet.
Hvis du ikke har lest de tidligere opplæringsprogrammene i denne Web Audio-serien, vil jeg foreslå å gå tilbake og lese dem før du gjør dette, da de dekker grunnleggende om å bruke Web Audio API og opprette en lyd fra grunnen av.
La oss begynne med å lage en grunnleggende HTML-side.
Legg til lyd i webappen din synthesizer!
Og noen grunnleggende styling i vår stiler / main.css fil.
kropp font-family: sans-serif; .container margin: auto; bredde: 800px;
Kanskje det viktigste du trenger for synth er et tastatur. Heldigvis har jeg opprettet en liten utgave av JavaScript som vil legge til et virtuelt tastatur til siden din. Last ned en kopi av Qwerty Hancock og referer den til nederst på siden din slik.
Legg deretter til en tom div på siden din med et ID på "tastatur".
Dette er stedet på siden som tastaturet blir satt inn i.
Vi vil også sette opp en dedikert JavaScript-fil for vår synth, så la oss lage det også og referanse det etter hvor vi har tatt med Qwerty Hancock.
Innen synth.js vil vi initialisere tastaturet vårt ved å gjøre følgende.
var tastatur = ny QwertyHancock (id: 'tastatur', bredde: 600, høyde: 150, oktaver: 2);
Dette forteller vår side å sette inn en forekomst av tastaturet i elementet med ID for "tastatur", endre størrelsen på det til 600 x 150 px, og gjør antall taster på tastaturet dekket to oktaver. Lagre og oppdater nettleseren din for å se et nydelig skjermtastatur. Bruk taster, berør eller musen for å se notatene lyser mens du trykker på dem.
Qwerty Hancock gir oss to hendelselyttere, keyUp og keyDown. Disse tillater oss å koble til tastaturet og skrive kode som brenner når tastaturet trykkes. Det forteller også hvilket notat som ble trykket, og dets tilsvarende frekvens i hertz.
Accentsconagua
keyboard.keyDown = funksjon (notat, frekvens) console.log ('Note', notat, 'har blitt trykket'); console.log ('Dens frekvens er', frekvens); ; keyboard.keyUp = funksjon (notat, frekvens) console.log ('Note', notat, 'har blitt utgitt'); console.log ('Frekvensen var', frekvens); ;La oss starte en oscillator når du trykker på en tast. Vi stopper det etter et sekund, slik at det ikke går for alltid.
var context = new AudioContext (); keyboard.keyDown = funksjon (notat, frekvens) var osc = context.createOscillator (); osc.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Hvorfor lager vi oscillatoren inne i keyDown funksjon? Er det ikke ineffektivt? Oscillatorer er konstruert for å være lette og kastes bort etter bruk. Du kan faktisk bare bruke dem en gang. Tenk på dem som en slags bisarre lyd fyrverkeri.
Nå når vi trykker på en tast, hører vi en lyd. Det er litt høyt, så la oss lage en gainNode å fungere som master volumkontroll.
var context = new AudioContext (), masterVolume = context.createGain (); masterVolume.gain.value = 0.3; masterVolume.connect (context.destination); keyboard.keyDown = funksjon (notat, frekvens) var osc = context.createOscillator (); osc.connect (masterVolume); masterVolume.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Et tastatur som spiller et enkelt notat om og om igjen, er ikke veldig morsomt, så la oss koble frekvensen til oscillatoren før vi starter spillet.
osc.frequency.value = frekvens;
Herlig. Vi må nå stoppe oscillatoren som spiller etter at vi løfter en nøkkel i stedet for etter et sekund. Fordi vi lager oscillatoren inni keyDown funksjon, må vi holde rede på hvilken oscillator som spiller hvilken frekvens for å stoppe den når nøkkelen slippes ut. En enkel måte å gjøre dette på er å lage en tom objekt og legge til frekvensene som nøkler, sammen med hvilken oscillator spiller den frekvensen som dens verdi.
var oscillators = ; keyboard.keyDown = funksjon (notat, frekvens) // Tidligere kode her oscillatorer [frekvens] = osc; osc.start (context.currentTime); ;
Dette betyr at vi enkelt kan bruke frekvensen vi får fra vår noteUp funksjon for å stoppe den spesifikke oscillatoren.
keyboard.keyUp = funksjon (notat, frekvens) oscillators [frequency] .stop (context.currentTime); ;
Vi har nå en fullt fungerende (veldig grunnleggende) synthesizer i nettleseren! Ok, det høres ikke bra ut for øyeblikket, men la oss se om vi kan endre det.
Den første tingen å gjøre er å endre typen av bølgen oscillatorutgangene. Det er fire grunntyper å velge mellom: sinus, firkant, trekant og sagtand. Hver annen form for bølge lyder annerledes. Spill om med dem og velg din favoritt. For dette eksempelet velger jeg "sawtooth".
osc.type = 'sawtooth';
Der høres det bedre ut.
Det er veldig sjelden du finner en synthesizer som bruker en enkelt oscillator. De fleste synker biff opp lyden sin ved å kombinere forskjellige oscillatorer av forskjellige typer. La oss se hvordan det høres ut hvis vi legger til en annen. Husk at vi må doble opp alle våre forbindelser, og vi må legge til oscillatorer med samme frekvens til en matrise. Dette betyr at vi kan iterere over dem for å stoppe alle oscillatorene som spiller samme notat.
keyboard.keyDown = funksjon (notat, frekvens) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = frekvens; osc.type = 'sawtooth'; osc2.frequency.value = frekvens; osc2.type = 'triangle'; osc.connect (masterVolume); osc2.connect (masterVolume); masterVolume.connect (context.destination); oscillatorer [frekvens] = [osc, osc2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = funksjon (notat, frekvens) oscillatorer [frekvens] .forEach (funksjon (oscillator) oscillator.stop (context.currentTime);); ;
For å fullføre ting, la oss bruke et triks vi lærte i den forrige opplæringen. Vi kan legge til litt kor for å legge til mer skimmer på lyden vår, ved å lette oscillatorene litt.
osc.detune.value = -10; osc2.detune.value = 10;
Vakre, en synth Kraftwerk ville være stolt av! Spill sammen med den ferdige artikkelen, eller gaffel repoen på GitHub for å finjustere synthen til ditt hjerte innhold.
