Share
Robert Moog skapade famously en av de allra första kommersiella modulära synthesizerna. Hans uppfinningar bestod av banker med ledningar och knoppar, vilket gjorde det möjligt för musiker att skapa ljud som aldrig hörts tidigare. Dessa instrument var inte heller billiga och kostar tusentals dollar för även den mest grundläggande modellen.
Nu, tack vare Web Audio API, kan vi skapa vår egen likartade synth som vi kan konfigurera till vårt hjärta innehåll för summan av $ 0. Inte bara det, vi kan distribuera vår synth direkt till alla i världen tack vare webben.
Om du inte har läst de tidigare handledningarna i denna webbljudserie, skulle jag föreslå att du gick tillbaka och läste dem innan du utförde den här, eftersom de täcker grunderna för att använda Web Audio API och skapa ett ljud från början.
Låt oss börja med att skapa en grundläggande HTML-sida.
Lägg till ljud i din webbapp Synthesizer!
Och lite grundläggande styling i vår stilar / main.css fil.
kropp font-family: sans-serif; .container margin: auto; bredd: 800px;
Kanske är det viktigaste som din synth behöver ett tangentbord. Lyckligtvis har jag skapat en liten bit av JavaScript som lägger till ett virtuellt tangentbord på din sida. Hämta en kopia av Qwerty Hancock och hänvisa till den längst ner på din sida som så.
Lägg sedan till en tom div på din sida med ett "tangentbord".
Detta är platsen på sidan som tangentbordet kommer att sättas in i.
Vi vill också skapa en egen JavaScript-fil för vår synth, så låt oss skapa det också och referera det efter där vi har inkluderat Qwerty Hancock.
Inom synth.js startar vi vårt tangentbord genom att göra följande.
var tangentbord = ny QwertyHancock (id: 'tangentbord', bredd: 600, höjd: 150, oktav: 2);
Detta berättar för att vår sida ska infoga en instans av vårt tangentbord i elementet med "tangentbordet", ändra storleken till 600 x 150 px och gör antalet tangenter på tangentbordet två oktaver. Spara och uppdatera webbläsaren för att se ett härligt skärmtangentbord. Använd tangenter, peka eller musen för att se anteckningar tänds när du trycker på dem.
Qwerty Hancock ger oss två evenemangslyttare, keyUp och nyckel ner. Dessa tillåter oss att haka i tangentbordet och skriva kod som brinner när tangentbordet trycks ned. Det berättar också för oss vilken anteckning som pressades, och dess motsvarande frekvens i hertz.
Accentsconagua
keyboard.keyDown = funktion (anteckning, frekvens) console.log ('Note', not, 'har tryckts'); console.log ('dess frekvens är', frekvens); ; keyboard.keyUp = funktion (anteckning, frekvens) console.log ('Note', notera 'har släppts'); console.log ("dess frekvens var", frekvens); ;Låt oss starta en oscillator när en tangent trycks in. Vi stoppar det efter en sekund så det går inte för alltid.
var context = new AudioContext (); keyboard.keyDown = funktion (not, frekvens) var osc = context.createOscillator (); osc.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Varför skapar vi oscillatorn inuti nyckel ner fungera? Är det inte ineffektivt? Oscillatorer är konstruerade för att vara lätta och kastas bort efter användning. Du kan faktiskt bara använda dem en gång. Tänk på dem som ett slags bisarrt ljud fyrverkeri.
Nu när vi trycker på en nyckel hör vi ett ljud. Det är lite högt, så låt oss skapa en gainNode att fungera som huvudvolymkontroll.
var context = new AudioContext (), masterVolume = context.createGain (); masterVolume.gain.value = 0.3; masterVolume.connect (context.destination); keyboard.keyDown = funktion (not, frekvens) var osc = context.createOscillator (); osc.connect (masterVolume); masterVolume.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Ett tangentbord som spelar en enda anteckning om och om igen är inte så kul, så låt oss ansluta frekvensen till oscillatorn innan vi börjar spela det.
osc.frequency.value = frequency;
Härlig. Vi behöver nu sluta oscillatorn spelar efter att vi lyfter en nyckel snarare än efter en sekund. Eftersom vi skapar oscillatorn inuti nyckel ner funktion, måste vi hålla reda på vilken oscillator som spelar vilken frekvens för att stoppa den när nyckeln släpps. Ett enkelt sätt att göra detta är att skapa ett tomt objekt och lägga till frekvenserna som nycklar, tillsammans med vilken oscillator spelar den frekvensen som dess värde.
var oscillatorer = ; keyboard.keyDown = funktion (not, frekvens) // Tidigare kod här oscillatorer [frekvens] = osc; osc.start (context.currentTime); ;
Det betyder att vi enkelt kan använda den frekvens vi får från vår noteUp funktion för att stoppa den specifika oscillatorn.
keyboard.keyUp = funktion (not, frekvens) oscillatorer [frekvens] .stop (context.currentTime); ;
Vi har nu en helt fungerande (mycket grundläggande) synthesizer i webbläsaren! Ok, det låter inte bra just nu, men låt oss se om vi kan ändra det.
Det första du behöver göra är att ändra typen av våg oscillatorutgångarna. Det finns fyra grundläggande typer att välja mellan: sinus, kvadrat, triangel och sågtand. Varje annan form av våg låter annorlunda. Spela om med dem och välj din favorit. För detta exempel väljer jag "sågtand".
osc.type = "sawtooth";
Där låter det bättre.
Det är väldigt sällsynt att du hittar en synthesizer som använder en enda oscillator. De flesta synt biffar upp sitt ljud genom att kombinera olika oscillatorer av olika typer. Låt oss se hur det låter om vi lägger till en annan. Kom ihåg att vi måste dubbla upp alla våra anslutningar, och vi måste lägga till oscillatorer av samma frekvens till en array. Det betyder att vi kan iterera över dem för att stoppa alla oscillatorer som spelar samma anteckning.
keyboard.keyDown = funktion (not, frekvens) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = frequency; osc.type = "sawtooth"; osc2.frequency.value = frequency; osc2.type = 'triangel'; osc.connect (masterVolume); osc2.connect (masterVolume); masterVolume.connect (context.destination); oscillatorer [frekvens] = [osc, osc2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = funktion (not, frekvens) oscillatorer [frekvens] .forEach (funktion (oscillator) oscillator.stop (context.currentTime);); ;
För att avsluta sakerna, låt oss använda ett knep vi lärde oss i föregående handledning. Vi kan lägga till lite kor för att lägga till mer skimmer till vårt ljud, genom att avstänga oscillatorerna något.
osc.detune.value = -10; osc2.detune.value = 10;
Vackert, en synth Kraftwerk skulle vara stolt över! Spela med den färdiga artikeln, eller gaffel repet på GitHub för att finjustera synthen till ditt hjärta innehåll.
