Share
Robert Moog creëerde op beroemde wijze een van de allereerste commerciële modulaire synthesizers. Zijn uitvindingen bestonden uit rijen draden en knoppen, waardoor muzikanten geluiden konden creëren die nog nooit eerder waren gehoord. Deze instrumenten waren ook niet goedkoop, duizenden dollars kostend voor zelfs het meest basismodel.
Dankzij de webaudio-API kunnen we nu onze eigen, soortgelijk klinkende synth maken die we naar hartelust kunnen configureren voor het totaal van $ 0. Niet alleen dat, we kunnen onze synth ook dankzij het internet direct aan iedereen in de wereld verspreiden.
Als je de vorige tutorials in deze Web Audio-serie nog niet hebt gelezen, raad ik aan om terug te gaan en ze te lezen voordat je deze opstart, omdat ze de basisbeginselen van het gebruik van de Web Audio API beschrijven en een nieuw geluid creëren.
Laten we beginnen met het maken van een eenvoudige HTML-pagina.
Voeg geluid toe aan uw web-app synthesizer!
En wat basisstyling in onze stijlen / main.css het dossier.
body font-family: sans-serif; .container margin: auto; breedte: 800 px;
Misschien is het belangrijkste dat je synthesizer nodig heeft een toetsenbord. Gelukkig heb ik een klein stukje JavaScript gemaakt waarmee een virtueel toetsenbord aan je pagina kan worden toegevoegd. Download een kopie van Qwerty Hancock en vermeld het zo onderaan je pagina.
Voeg vervolgens een lege div toe aan je pagina met een id van "keyboard".
Dit is de plaats op de pagina waar het toetsenbord in zal worden ingevoegd.
We willen ook een speciaal JavaScript-bestand instellen voor onze synth, dus laten we dat ook maken en ernaar verwijzen nadat we Qwerty Hancock hebben opgenomen.
Binnen synth.js initialiseren we ons toetsenbord door het volgende te doen.
var keyboard = new QwertyHancock (id: 'keyboard', width: 600, height: 150, octaven: 2);
Dit vertelt onze pagina om een instantie van ons toetsenbord in het element in te voegen met de id van "toetsenbord", het formaat te wijzigen in 600 x 150 px en het aantal toetsen op het toetsenbord twee octaven te laten zijn. Sla uw browser op en ververs hem om een prachtig schermtoetsenbord te zien. Gebruik de toetsen, raak of je muis aan om de notities te zien oplichten als je erop drukt.
Qwerty Hancock biedt ons twee luisteraars voor evenementen, keyUp en toets neer. Hiermee kunnen we inhaken op het toetsenbord en code schrijven die wordt geactiveerd wanneer het toetsenbord wordt ingedrukt. Het vertelt ons ook welke noot werd ingedrukt, en de bijbehorende frequentie in Hertz.
Accentsconagua
keyboard.keyDown = function (note, frequency) console.log ('Note', note, 'is pressed'); console.log ('De frequentie is', frequentie); ; keyboard.keyUp = function (note, frequency) console.log ('Note', note, 'is released'); console.log ('De frequentie was', frequentie); ;Laten we een oscillator starten wanneer een toets wordt ingedrukt. We stoppen het na een seconde, zodat het niet voor altijd doorgaat.
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); ;
Waarom creëren we de oscillator in de toets neer functie? Is dat niet inefficiënt? Oscillatoren zijn ontworpen om licht van gewicht te zijn en om na gebruik weggegooid te worden. Je kunt ze eigenlijk maar één keer gebruiken. Zie ze als een soort bizar audiovuurwerk.
Als we nu op een toets drukken, horen we een geluid. Het is een beetje luid, dus laten we een maken gainNode om op te treden als hoofdvolumeregelaar.
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); ;
Een toetsenbord dat een enkele noot steeds opnieuw speelt, is niet erg leuk, dus laten we de frequentie in de oscillator steken voordat we hem beginnen te spelen.
osc.frequency.value = frequentie;
Heerlijk. We moeten nu de oscillator stoppen met spelen nadat we een toets hebben opgetild in plaats van na een seconde. Omdat we de oscillator in de toets neer functie, we moeten bijhouden welke oscillator welke frequentie speelt om het te stoppen wanneer de toets wordt losgelaten. Een eenvoudige manier om dit te doen is om een leeg object te maken en de frequenties toe te voegen als toetsen, samen met welke oscillator die frequentie speelt als zijn waarde.
var oscillators = ; keyboard.keyDown = functie (noot, frequentie) // Vorige code hier oscillatoren [frequentie] = osc; osc.start (context.currentTime); ;
Dit betekent dat we eenvoudig de frequentie kunnen gebruiken die we van onze krijgen noteUp functie om die specifieke oscillator te stoppen.
keyboard.keyUp = functie (noot, frequentie) oscillatoren [frequentie] .stop (context.currentTime); ;
We hebben nu een volledig werkende (erg eenvoudige) synthesizer in de browser! Ok, het klinkt op dit moment niet geweldig, maar laten we kijken of we dat kunnen veranderen.
Het eerste dat u moet doen, is het type golf dat de oscillator uitgangen veranderen. Er zijn vier basistypen om uit te kiezen: sinus, vierkant, driehoek en zaagtand. Elke andere golfvorm klinkt anders. Speel met ze en kies je favoriet. Voor dit voorbeeld kies ik "zaagtand".
osc.type = 'zaagtand';
Daar klinkt dat beter.
Het komt zelden voor dat je een synthesizer vindt die een enkele oscillator gebruikt. De meeste synths versterken hun geluid door verschillende oscillators van verschillende types te combineren. Laten we eens kijken hoe het klinkt als we er nog een toevoegen. Houd er rekening mee dat we al onze verbindingen moeten verdubbelen en dat we oscillatoren met dezelfde frequentie aan een array moeten toevoegen. Dit betekent dat we ze kunnen herhalen om alle oscillators die dezelfde noot spelen te stoppen.
keyboard.keyDown = function (note, frequency) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = frequentie; osc.type = 'zaagtand'; osc2.frequency.value = frequentie; osc2.type = 'triangle'; osc.connect (MASTERVOLUME); osc2.connect (MASTERVOLUME); masterVolume.connect (context.destination); oscillatoren [frequentie] = [osc, osc2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = functie (noot, frequentie) oscillatoren [frequentie] .voorElke (functie (oscillator) oscillator.stop (context.currentTime);); ;
Om dingen af te maken, laten we een truc gebruiken die we in de vorige tutorial hebben geleerd. We kunnen een beetje chorus toevoegen om meer glans aan ons geluid toe te voegen, door de oscillatoren iets te ontstemmen.
osc.detune.value = -10; osc2.detune.value = 10;
Prachtig, een synth Kraftwerk zou trots op zijn! Speel mee met het voltooide artikel of vork de repo op GitHub om de synth naar hartenlust in te passen.
