Robert Moog a créé l'un des tout premiers synthétiseurs modulaires commerciaux. Ses inventions consistaient en des banques de fils et de boutons permettant aux musiciens de créer des sons jamais entendus auparavant. Ces instruments n'étaient pas bon marché non plus, coûtant des milliers de dollars, même pour le modèle le plus basique.

Maintenant, grâce à l'API Web Audio, nous pouvons créer notre propre synthé au son similaire que nous pouvons configurer au contenu de notre coeur pour le total général de 0 $. Non seulement cela, nous pouvons distribuer notre synthé instantanément à n'importe qui dans le monde grâce au Web.

Si vous n'avez pas lu les didacticiels précédents de cette série Web Audio, je vous conseillerais de les lire avant de commencer celle-ci, car ils couvrent les bases de l'utilisation de l'API Web Audio et de la création d'un son à partir de zéro..

Commencer

Commençons par créer une page HTML de base.

         
 
Synthétiseur!
 
  

Et quelques styles de base dans notre styles / main.css fichier.

body font-family: sans-serif;  .container margin: auto; largeur: 800px; 

Clavier

Peut-être que la chose la plus importante dont votre synthé a besoin est un clavier. Heureusement, j'ai créé un petit extrait de code JavaScript qui ajoutera un clavier virtuel à votre page. Téléchargez une copie de Qwerty Hancock et référencez-la au bas de votre page comme suit.

Ajoutez ensuite un div vide à votre page avec un identifiant de "clavier".

C’est l’endroit sur la page où le clavier sera inséré..

Nous voudrons aussi configurer un fichier JavaScript dédié pour notre synthé, alors créons-le également et référencons-le après l'inclusion de Qwerty Hancock..

Dans synth.js, nous allons initialiser notre clavier en procédant comme suit.

var keyboard = new QwertyHancock (id: 'clavier', largeur: 600, hauteur: 150, octaves: 2);

Cela indique à notre page d'insérer une instance de notre clavier dans l'élément portant l'identifiant de "clavier", de la redimensionner à 600 x 150 px et de faire en sorte que le nombre de touches du clavier couvre deux octaves. Enregistrez et actualisez votre navigateur pour voir un beau clavier à l'écran. Utilisez les touches, les touches ou votre souris pour voir les notes s'allumer lorsque vous les appuyez.

Qwerty Hancock nous fournit deux auditeurs d'événements, keyUp et touche Bas. Cela nous permet d’accrocher au clavier et d’écrire du code qui se déclenche lorsque vous appuyez sur le clavier. Il nous indique également quelle note a été pressée et sa fréquence correspondante en hertz.

keyboard.keyDown = function (note, fréquence) console.log ('Note', note, 'a été enfoncé'); console.log ('Sa fréquence est', fréquence); ; keyboard.keyUp = function (note, fréquence) console.log ('Note', note, 'a été publié'); console.log ('Sa fréquence était', fréquence); ;

Osciller sauvagement

Commençons un oscillateur quand une touche est enfoncée. Nous allons l'arrêter après une seconde pour que ça ne dure pas éternellement.

var context = new AudioContext (); keyboard.keyDown = fonction (note, fréquence) var osc = context.createOscillator (); osc.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;

Pourquoi créons-nous l'oscillateur à l'intérieur du touche Bas une fonction? N'est-ce pas inefficace? Les oscillateurs sont conçus pour être légers et être jetés après utilisation. Vous ne pouvez en réalité les utiliser qu'une seule fois. Pensez à eux comme une sorte de feu d'artifice audio bizarre.

Maintenant, quand on appuie sur une touche, on entend un son. C'est un peu fort, alors créons un gainNode agir en tant que contrôle de volume principal.

var context = new AudioContext (), masterVolume = context.createGain (); masterVolume.gain.value = 0,3; masterVolume.connect (context.destination); keyboard.keyDown = fonction (note, fréquence) var osc = context.createOscillator (); osc.connect (masterVolume); masterVolume.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;

Un clavier qui joue une seule note encore et encore n’est pas très amusant, alors connectons la fréquence à l’oscillateur avant de commencer à jouer..

osc.frequency.value = frequency;

Charmant. Nous devons maintenant arrêter la lecture de l'oscillateur après avoir relevé une clé plutôt qu'après une seconde. Parce que nous créons l'oscillateur à l'intérieur du touche Bas fonction, nous devons savoir quel oscillateur joue quelle fréquence afin de l’arrêter lorsque la touche est relâchée. Un moyen simple de le faire est de créer un objet vide et d’ajouter les fréquences sous forme de touches, avec lesquelles l’oscillateur joue cette fréquence comme valeur..

var oscillateurs = ; keyboard.keyDown = function (note, fréquence) // Code précédent ici oscillateurs [fréquence] = osc; osc.start (context.currentTime); ;

Cela signifie que nous pouvons facilement utiliser la fréquence que nous obtenons de notre note fonction pour arrêter cet oscillateur spécifique.

keyboard.keyUp = fonction (note, fréquence) oscillateurs [fréquence] .stop (context.currentTime); ;

Nous avons maintenant un synthétiseur pleinement fonctionnel (très basique) dans le navigateur! Ok, ça ne sonne pas bien pour le moment, mais voyons si on peut changer ça.

La première chose à faire est de changer le type d’onde des sorties de l’oscillateur. Vous avez le choix entre quatre types de base: sinusoïdal, carré, triangle et en dents de scie. Chaque forme d'onde différente est différente. Jouez avec eux et choisissez votre préféré. Pour cet exemple, je choisirai "dents de scie".

osc.type = 'en dents de scie';

Là, ça sonne mieux.

Il est très rare que vous trouviez un synthétiseur utilisant un seul oscillateur. La plupart des synthés renforcent leur son en combinant différents oscillateurs de types différents. Voyons comment cela sonne si nous en ajoutons un autre. N'oubliez pas que nous devons doubler toutes nos connexions et ajouter des oscillateurs de la même fréquence à un tableau. Cela signifie que nous pouvons les parcourir pour arrêter tous les oscillateurs jouant la même note..

keyboard.keyDown = fonction (note, fréquence) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = frequency; osc.type = 'en dents de scie'; osc2.frequency.value = frequency; osc2.type = 'triangle'; osc.connect (masterVolume); osc2.connect (masterVolume); masterVolume.connect (context.destination); oscillateurs [fréquence] = [osc, osc2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = function (note, fréquence) oscillateurs [fréquence] .forEach (fonction (oscillateur) oscillator.stop (context.currentTime);); ;

Pour finir, utilisons une astuce que nous avons apprise dans le précédent tutoriel. Nous pouvons ajouter un peu de chorus pour ajouter plus de brillance à notre son, en désaccordant légèrement les oscillateurs..

osc.detune.value = -10; osc2.detune.value = 10;

Beau, un synthé dont Kraftwerk serait fier! Jouez avec l'article fini ou branchez le dépôt sur GitHub pour ajuster le synthé à votre guise.