Vaikka Web Audio -sovellusliittymän suosio kasvaa etenkin HTML5-pelikehittäjät , Web MIDI -sovellusliittymä on edelleen vähän tunnettu käyttöliittymäkehittäjien keskuudessa. Suuri osa tästä liittyy todennäköisesti tuen ja saatavissa olevien asiakirjojen puutteeseen. Web MIDI -sovellusliittymää tuetaan tällä hetkellä vain Google Chromessa, myönnetään, että otat sen käyttöön erityisen lipun. Selainvalmistajat painottavat tällä hetkellä vähän API: ta, koska sen on tarkoitus olla osa ES7-standardia.

Usean musiikkiteollisuuden edustajan 80-luvun alkupuolella suunnittelema MIDI (lyhenne sanoista Musical Instrument Digital Interface) on elektronisten musiikkilaitteiden tavallinen tiedonsiirtoprotokolla. Vaikka muita protokollia, kuten OSC, on kehitetty siitä lähtien; kolmekymmentä vuotta myöhemmin MIDI on edelleen tosiasiallinen tiedonsiirtoprotokolla äänilaitteiden valmistajille. Sinua on vaikea löytää moderni musiikkituottaja, joka ei omista studiossaan vähintään yhtä MIDI-laitetta.

Nopean kehityksen ja Web Audio -sovellusliittymän käyttöönoton avulla voimme nyt alkaa rakentaa selainpohjaisia ​​sovelluksia, jotka kurottavat kuilun pilven ja fyysisen maailman välille. Web MIDI -sovellusliittymän avulla voimme rakentaa syntetisaattoreita ja äänitehosteita, mutta voimme jopa aloittaa selainpohjaisen DAW: n (Digital Audio Workstation) rakentamisen, joka on ominaisuuksiltaan ja suorituskyvyltään samanlainen kuin nykyiset flash-pohjaiset kollegansa (tutustu Äänityökalu , esimerkiksi).

Tässä MIDI-opetusohjelmassa opastan sinut Web MIDI -sovellusliittymän perusteiden läpi ja rakennamme yksinkertaisen yksisyntetisaation, jota voit pelata suosikki MIDI-laitteellasi. Koko lähdekoodi on käytettävissä tässä , ja voit testata live-esittely suoraan. Jos sinulla ei ole MIDI-laitetta, voit silti seurata tätä opetusohjelmaa tutustumalla GitHub-arkisto , joka mahdollistaa tietokoneen näppäimistön perustuen, joten voit soittaa nuotteja ja muuttaa oktaavia. Tämä on myös versio, joka on saatavana live-demona. Tietokonelaitteiston rajoitusten vuoksi nopeus ja viritys ovat kuitenkin poissa käytöstä aina, kun käytät tietokoneen näppäimistöä syntetisaattorin ohjaamiseen. Katso avainten / muistiinpanojen yhdistämisestä GitHubin readme-tiedostosta.

Midi-opetusohjelman edellytykset

Tarvitset seuraavaa tätä MIDI-opetusohjelmaa varten:

• Google Chrome (versio 38 tai uudempi) #enable-web-midi lippu käytössä
• (Valinnainen) tietokoneellesi liitetty MIDI-laite, joka voi laukaista muistiinpanoja

Käytämme myös Angular.js: ää tuodaksemme hieman rakennetta sovellukseemme; siksi perusedellytykset kehyksestä ovat edellytys.

Päästä alkuun

Moduloimme MIDI-sovelluksemme alusta alkaen jakamalla se 3 moduuliin:

• WebMIDI: tietokoneeseesi kytkettyjen MIDI-laitteiden käsittely
• WebAudio: tarjoaa äänilähteen syntetisaattorillemme
• WebSynth: verkkoliittymän liittäminen äänimoottoriin

App moduuli käsittelee käyttäjän vuorovaikutusta web-käyttöliittymän kanssa. Sovellusrakenteemme voi näyttää hieman tältä:

|- app |-- js |--- midi.js |--- audio.js |--- synth.js |--- app.js |- index.html

Asenna seuraavat kirjastot myös sovelluksen rakentamisen helpottamiseksi: Angular.js , Bootstrap ja jQuery . Todennäköisesti helpoin tapa asentaa nämä on Bower .

WebMIDI-moduuli: Yhteyden muodostaminen todelliseen maailmaan

Aloitetaan selvittämään, miten MIDIä käytetään liittämällä MIDI-laitteemme sovelluksemme. Tätä varten luomme yksinkertaisen tehtaan, joka palauttaa yhden menetelmän. Yhteyden muodostamiseksi MIDI-laitteisiimme Web MIDI -sovellusliittymän kautta meidän on soitettava navigator.requestMIDIAccess menetelmä:

angular .module('WebMIDI', []) .factory('Devices', ['$window', function($window) { function _connect() { if($window.navigator && 'function' === typeof $window.navigator.requestMIDIAccess) { $window.navigator.requestMIDIAccess(); } else { throw 'No Web MIDI support'; } } return { connect: _connect }; }]);

Ja se on melkein kaikki!

requestMIDIAccess method palauttaa lupauksen, joten voimme vain palauttaa sen suoraan ja käsitellä lupauksen tulosta sovelluksemme ohjaimessa:

angular .module('DemoApp', ['WebMIDI']) .controller('AppCtrl', ['$scope', 'Devices', function($scope, devices) { $scope.devices = []; devices .connect() .then(function(access) { if('function' === typeof access.inputs) { // deprecated $scope.devices = access.inputs(); console.error('Update your Chrome version!'); } else { if(access.inputs && access.inputs.size > 0) { var inputs = access.inputs.values(), input = null; // iterate through the devices for (input = inputs.next(); input && !input.done; input = inputs.next()) { $scope.devices.push(input.value); } } else { console.error('No devices detected!'); } } }) .catch(function(e) { console.error(e); }); }]);

Kuten mainittiin, requestMIDIAccess method palauttaa lupauksen välittäen objektin then menetelmä, jolla on kaksi ominaisuutta: tulot ja lähdöt.

Chromen aiemmissa versioissa nämä kaksi ominaisuutta olivat menetelmiä, joiden avulla voit hakea joukon tulo- ja lähtölaitteita suoraan. Viimeisimmissä päivityksissä nämä ominaisuudet ovat kuitenkin nyt objekteja. Tällä on huomattava ero, koska meidän on nyt soitettava values joko tulo- tai lähtöobjektin menetelmä vastaavan laiteluettelon noutamiseksi. Tämä menetelmä toimii generaattoritoimintona ja palauttaa iteraattorin. Jälleen tämän API: n on tarkoitus olla osa ES7: tä; siksi generaattorimaisen käytöksen toteuttaminen on järkevää, vaikka se ei olekaan yhtä suoraviivaista kuin alkuperäinen toteutus.

Lopuksi voimme hakea laitteiden lukumäärän size -sovelluksen avulla iteraattorikohteen ominaisuus. Jos laitteissa on ainakin yksi laite, iteroidaan tulos yksinkertaisesti soittamalla next iteraattori-objektin menetelmä ja työntämällä kukin laite taulukossa $ määriteltyyn matriisiin. Käyttöliittymässä voimme toteuttaa yksinkertaisen valintaruudun, joka listaa kaikki käytettävissä olevat syöttölaitteet ja antaa meidän valita, mitä laitetta haluamme käyttää aktiivisena laitteena verkkosyntikan ohjaamiseksi:

Choose a MIDI device...

Sitoimme tämän valintaruudun $ scope -muuttujaan nimeltään activeDevice jota käytämme myöhemmin yhdistämään tämän aktiivisen laitteen syntetisaattoriin.

WebAudio-moduuli: melua

WebAudio-sovellusliittymän avulla voimme paitsi toistaa äänitiedostoja myös tuottaa ääniä luomalla syntetisaattoreiden tärkeät komponentit, kuten oskillaattorit, suodattimet ja vahvistussolmut muiden joukossa .

Luo oskillaattori

Oskillaattorien tehtävänä on tuottaa aaltomuoto. Aaltomuotoja on erityyppisiä, joista neljä on WebAudio-sovellusliittymän tukema: sini, neliö, kolmio ja sahahammas. Aaltomuotojen sanotaan 'värähtelevän' tietyllä taajuudella, mutta on myös mahdollista, että yksi määrittelee omat mukautettavat wavetable-ominaisuutensa tarvittaessa. Ihmiset voivat kuulla tietyn taajuusalueen - ne tunnetaan ääninä. Vaihtoehtoisesti, kun oskillaattorit heiluvat matalilla taajuuksilla, ne voivat myös auttaa meitä rakentamaan LFO: n ('matalataajuinen oskillaattori'), jotta voimme moduloida ääniämme (mutta se ei kuulu tämän opetusohjelman piiriin).

Ensimmäinen asia, joka meidän on tehtävä jonkin äänen luomiseksi, on saada aikaan uusi AudioContext:

function _createContext() { self.ctx = new $window.AudioContext(); }

Sieltä voimme instantisoida minkä tahansa WebAudio-sovellusliittymän tarjoamista komponenteista. Koska voimme luoda useita esiintymiä kustakin komponentista, on järkevää luoda palveluja voidaksemme luoda uusia, ainutlaatuisia esiintymiä tarvitsemistamme komponenteista. Aloitetaan luomalla palvelu uuden oskillaattorin luomiseksi:

angular .module('WebAudio', []) .service('OSC', function() { var self; function Oscillator(ctx) { self = this; self.osc = ctx.createOscillator(); return self; } });

Voimme nyt hetkessä luoda uusia oskillaattoreita haluamallamme tavalla, välittämällä argumenttina aiemmin luomamme AudioContext-esiintymän. Jotta asiat olisivat helpompia tiellä, lisäämme joitain käärintämenetelmiä - pelkkä syntaktinen sokeri - ja palautamme Oskillaattori-funktion:

Oscillator.prototype.setOscType = function(type) { if(type) { self.osc.type = type } } Oscillator.prototype.setFrequency = function(freq, time) { self.osc.frequency.setTargetAtTime(freq, 0, time); }; Oscillator.prototype.start = function(pos) { self.osc.start(pos); } Oscillator.prototype.stop = function(pos) { self.osc.stop(pos); } Oscillator.prototype.connect = function(i) { self.osc.connect(i); } Oscillator.prototype.cancel = function() { self.osc.frequency.cancelScheduledValues(0); } return Oscillator;

Luo monipäästösuodatin ja äänenvoimakkuuden säädin

Tarvitsemme vielä kaksi komponenttia perusäänimoottorimme täydentämiseksi: monipäästösuodatin, joka antaa äänellemme hieman muodon, ja vahvistussolmu äänen voimakkuuden säätämiseksi ja äänenvoimakkuuden kytkemiseksi päälle ja pois päältä. Tätä varten voimme edetä samalla tavalla kuin oskillaattorille: luoda palveluita, jotka palauttavat toiminnon joillakin kääremenetelmillä. Meidän on vain annettava AudioContext-ilmentymä ja kutsuttava sopiva menetelmä.

Luomme suodattimen soittamalla createBiquadFilter menetelmä AudioContext-ilmentymälle:

ctx.createBiquadFilter();

Vastaavasti vahvistussolmulle kutsutaan createGain menetelmä:

ctx.createGain();

WebSynth-moduuli: Asennusten johdotus

Nyt olemme melkein valmiita rakentamaan syntetisaattoriliitännän ja yhdistämään MIDI-laitteet äänilähteeseemme. Ensinnäkin meidän on yhdistettävä äänimoottori yhteen ja saatava se valmiiksi vastaanottamaan MIDI-muistiinpanoja. Yhdistääksesi äänimoottorin, luomme yksinkertaisesti uudet tarvitsemiemme komponenttien esiintymät ja 'yhdistämme' ne sitten connect kunkin komponentin esiintymille käytettävissä oleva menetelmä. connect method ottaa yhden argumentin, joka on yksinkertaisesti komponentti, johon haluat liittää nykyisen ilmentymän. On mahdollista sovittaa monimutkaisempi komponenttiketju kuin connect menetelmä voi yhdistää yhden solmun useisiin modulaattoreihin (mikä mahdollistaa esimerkiksi ristihäivytyksen ja muun toteuttamisen).

self.osc1 = new Oscillator(self.ctx); self.osc1.setOscType('sine'); self.amp = new Amp(self.ctx); self.osc1.connect(self.amp.gain); self.amp.connect(self.ctx.destination); self.amp.setVolume(0.0, 0); //mute the sound self.filter1.disconnect(); self.amp.disconnect(); self.amp.connect(self.ctx.destination); }

Rakensimme juuri äänimoottorimme sisäisen johdotuksen. Voit leikkiä vähän ja kokeilla erilaisia ​​johdotusyhdistelmiä, mutta muista pienentää äänenvoimakkuutta kuurojen välttämiseksi. Nyt voimme liittää MIDI-käyttöliittymän sovellukseemme ja lähettää MIDI-viestejä äänimoottorille. Asetamme valvojan laitteen valintaruutuun käytännössä 'kytkemään' sen syntetisaattoriin. Kuuntelemme sitten laitteelta tulevia MIDI-viestejä ja välitämme tiedot äänimoottorille:

// in the app's controller $scope.$watch('activeDevice', DSP.plug); // in the synth module function _onmidimessage(e) { /** * e.data is an array * e.data[0] = on (144) / off (128) / detune (224) * e.data[1] = midi note * e.data[2] = velocity || detune */ switch(e.data[0]) { case 144: Engine.noteOn(e.data[1], e.data[2]); break; case 128: Engine.noteOff(e.data[1]); break; } } function _plug(device) { self.device = device; self.device.onmidimessage = _onmidimessage; }

Täällä kuuntelemme MIDI-tapahtumia laitteelta analysoimalla MidiEvent-objekti ja siirtämällä se sopivaan menetelmään; joko noteOn tai noteOff tapahtumakoodin perusteella (144 merkinnälle noteOn, 128 merkinnälle noteOff). Voimme nyt lisätä logiikan audiomoduulin vastaaviin menetelmiin äänen luomiseksi:

function _noteOn(note, velocity) { self.activeNotes.push(note); self.osc1.cancel(); self.currentFreq = _mtof(note); self.osc1.setFrequency(self.currentFreq, self.settings.portamento); self.amp.cancel(); self.amp.setVolume(1.0, self.settings.attack); } function _noteOff(note) { var position = self.activeNotes.indexOf(note); if (position !== -1) { self.activeNotes.splice(position, 1); } if (self.activeNotes.length === 0) { // shut off the envelope self.amp.cancel(); self.currentFreq = null; self.amp.setVolume(0.0, self.settings.release); } else { // in case another note is pressed, we set that one as the new active note self.osc1.cancel(); self.currentFreq = _mtof(self.activeNotes[self.activeNotes.length - 1]); self.osc1.setFrequency(self.currentFreq, self.settings.portamento); } }

Tässä tapahtuu muutama asia. Kohdassa noteOn -menetelmällä työnnämme ensin nykyisen nuotin joukoksi muistiinpanoja. Vaikka rakennamme yksisynteettistä materiaalia (eli voimme soittaa vain yhtä nuottia kerrallaan), näppäimistöllä voi silti olla useita sormia kerralla. Joten meidän on jonotettava kaikki opinnäytetyöt muistiinpanot niin, että kun vapautamme yhden nuotin, seuraava soitetaan. Sitten meidän on pysäytettävä oskillaattori, jotta voidaan määrittää uusi taajuus, joka muunnetaan MIDI-muistiinpanosta (asteikko 0: sta 127: een) todelliseksi taajuusarvoksi vähän matematiikkaa :

function _mtof(note) { return 440 * Math.pow(2, (note - 69) / 12); }

Kohdassa noteOff menetelmällä aloitamme ensin etsimällä muistiinpanon aktiivisten muistiinpanojen joukosta ja poistamalla sen. Sitten, jos se oli taulukon ainoa muistiinpano, sammutamme äänenvoimakkuuden.

setVolume: N toinen argumentti menetelmä on siirtymäaika, mikä tarkoittaa kuinka kauan vahvistus kestää uuden tilavuusarvon saavuttamiseksi. Musiikillisesti, jos nuotti on päällä, se vastaa hyökkäysaikaa, ja jos nuotti on pois päältä, se vastaa julkaisuaikaa.

WebAnalyser-moduuli: Äänemme visualisointi

Toinen mielenkiintoinen piirre, jonka voimme lisätä syntikkaamme, on analysaattorisolmu, jonka avulla voimme näyttää äänemme aaltomuodon kankaalla sen renderoimiseksi. Analysaattorisolmun luominen on hieman monimutkaisempi kuin muut AudioContext-objektit, koska se edellyttää myös scriptProcessor-solmun luomista analyysin suorittamiseksi. Aloitetaan valitsemalla kangaselementti DOM:

function Analyser(canvas) null; self.view = self.canvas[0].getContext('2d')

Sitten lisätään connect menetelmä, jossa luomme sekä analysaattorin että komentosarjan prosessorin:

Analyser.prototype.connect = function(ctx, output) { // setup a javascript node self.javascriptNode = ctx.createScriptProcessor(2048, 1, 1); // connect to destination, else it isn't called self.javascriptNode.connect(ctx.destination); // setup an analyzer self.analyser = ctx.createAnalyser(); self.analyser.smoothingTimeConstant = 0.3; self.analyser.fftSize = 512; // connect the output to the destination for sound output.connect(ctx.destination); // connect the output to the analyser for processing output.connect(self.analyser); self.analyser.connect(self.javascriptNode); // define the colors for the graph var gradient = self.view.createLinearGradient(0, 0, 0, 200); gradient.addColorStop(1, '#000000'); gradient.addColorStop(0.75, '#ff0000'); gradient.addColorStop(0.25, '#ffff00'); gradient.addColorStop(0, '#ffffff'); // when the audio process event is fired on the script processor // we get the frequency data into an array // and pass it to the drawSpectrum method to render it in the canvas self.javascriptNode.onaudioprocess = function() { // get the average for the first channel var array = new Uint8Array(self.analyser.frequencyBinCount); self.analyser.getByteFrequencyData(array); // clear the current state self.view.clearRect(0, 0, 1000, 325); // set the fill style self.view.fillStyle = gradient; drawSpectrum(array); } };

Ensin luomme scriptProcessor-objektin ja yhdistämme sen kohteeseen. Sitten luomme itse analysaattorin, jota syötämme oskillaattorin tai suodattimen äänilähdöllä. Huomaa, kuinka äänilähtö on vielä yhdistettävä määränpäähän, jotta voimme kuulla sen! Meidän on myös määriteltävä kaavion gradienttivärit - tämä tehdään kutsumalla createLinearGradient menetelmä kangas-elementille.

Lopuksi scriptProcessor käynnistää audioprosessin tapahtuman tietyin väliajoin; kun tämä tapahtuma käynnistetään, lasketaan analysaattorin kaappaamat keskimääräiset taajuudet, puhdistetaan kangas ja piirretään uusi taajuuskaavio soittamalla drawSpectrum menetelmä:

function drawSpectrum(array) { for (var i = 0; i <(array.length); i++) { var v = array[i], h = self.canvas.height(); self.view.fillRect(i * 2, h - (v - (h / 4)), 1, v + (h / 4)); } }

Viimeisenä mutta ei vähäisimpänä, meidän on muutettava äänimoottorimme johdotusta hieman uuden komponentin mukauttamiseksi:

// in the _connectFilter() method if(self.analyser) { self.analyser.connect(self.ctx, self.filter1); } else { self.filter1.connect(self.ctx.destination); } // in the _disconnectFilter() method if(self.analyser) { self.analyser.connect(self.ctx, self.amp); } else { self.amp.connect(self.ctx.destination); }

Meillä on nyt mukava visualisoija, jonka avulla voimme näyttää syntimme aaltomuodon reaaliajassa! Tämä edellyttää pientä työtä asennuksessa, mutta se on erittäin mielenkiintoinen ja oivaltava erityisesti suodattimia käytettäessä.

Synthin rakentaminen: Nopeuden ja detune-arvon lisääminen

Tässä vaiheessa MIDI-opetusohjelmassa meillä on melko siisti syntetisaattori - mutta se toistaa jokaisen nuotin samalla äänenvoimakkuudella. Tämä johtuu siitä, että nopeustietojen oikean käsittelyn sijaan asetamme äänenvoimakkuudeksi kiinteän arvon 1,0. Aloitetaan korjaamalla se, ja sitten näemme, kuinka voimme ottaa käyttöön yleisimmissä MIDI-näppäimistöissä olevan virityspyörän.

Nopeuden ottaminen käyttöön

Jos et tunne sitä, 'nopeus' liittyy siihen, kuinka kovasti painoit näppäimistön näppäintä. Tämän arvon perusteella luotu ääni näyttää joko pehmeämmältä tai kovemmalta.

MIDI-opetusohjelmassa voimme jäljitellä tätä käyttäytymistä yksinkertaisesti pelaamalla vahvistussolmun äänenvoimakkuudella. Tätä varten meidän on ensin tehtävä vähän matematiikkaa MIDI-tietojen muuntamiseksi float-arvoksi välillä 0,0 ja 1,0 välitettäväksi vahvistussolmulle:

function _vtov (velocity) { return (velocity / 127).toFixed(2); }

MIDI-laitteen nopeusalue on 0-127, joten jaamme kyseisen arvon yksinkertaisesti 127: llä ja palautamme kelluvan arvon kahdella desimaalilla. Sitten voimme päivittää _noteOn menetelmä lasketun arvon välittämiseksi vahvistussolmulle:

self.amp.setVolume(_vtov(velocity), self.settings.attack);

Ja siinä kaikki! Nyt, kun soitamme syntetisaattoriamme, huomaat, että äänenvoimakkuudet vaihtelevat sen mukaan, kuinka kovasti osuimme näppäimistön näppäimiin.

Detune-pyörän ottaminen käyttöön MIDI-näppäimistöllä

Useimmissa MIDI-näppäimistöissä on virityspyörä; Pyörän avulla voit muuttaa hieman toistettavan nuotin taajuutta, mikä luo mielenkiintoisen vaikutuksen, joka tunnetaan nimellä 'detune'. Tämä on melko helppo toteuttaa, kun opit käyttämään MIDI: tä, koska tarkistuspyörä laukaisee myös MidiMessage-tapahtuman omalla tapahtumakoodillaan (224), jota voimme kuunnella ja toimia laskemalla taajuusarvon uudelleen ja päivittämällä oskillaattorin.

Ensinnäkin meidän on tartuttava tapahtumaan syntikkaamme. Tätä varten lisätään ylimääräinen tapaus _onmidimessage -sovellukseen luomallemme kytkinlausekkeelle soita takaisin:

case 224: // the detune value is the third argument of the MidiEvent.data array Engine.detune(e.data[2]); break;

Sitten määritämme detune menetelmä äänimoottorissa:

function _detune(d) { if(self.currentFreq) { //64 = no detune if(64 === d) { self.osc1.setFrequency(self.currentFreq, self.settings.portamento); self.detuneAmount = 0; } else { var detuneFreq = Math.pow(2, 1 / 12) * (d - 64); self.osc1.setFrequency(self.currentFreq + detuneFreq, self.settings.portamento); self.detuneAmount = detuneFreq; } } }

Oletushälytysarvo on 64, mikä tarkoittaa, että viritystä ei ole käytetty, joten tässä tapauksessa yksinkertaisesti siirrämme nykyisen taajuuden oskillaattorille.

Lopuksi meidän on myös päivitettävä _noteOff -menetelmällä, jotta detune otetaan huomioon, jos jokin toinen nuotti on jonossa:

self.osc1.setFrequency(self.currentFreq + self.detuneAmount, self.settings.portamento);

Käyttöliittymän luominen

Toistaiseksi olemme luoneet vain valintaruudun voidaksemme valita MIDI-laitteemme ja aaltomuotoisen visualisointilaitteen, mutta meillä ei ole mahdollisuutta muokata ääntä suoraan vuorovaikutuksessa verkkosivun kanssa. Luodaan hyvin yksinkertainen käyttöliittymä käyttämällä yleisiä lomake-elementtejä ja sidotaan ne äänimoottoriimme.

Asettelun luominen käyttöliittymälle

Luomme erilaisia ​​muotoelementtejä syntimme äänen hallitsemiseksi:

• Radioryhmä oskillaattorin tyypin valitsemiseksi
• Valintaruutu suodattimen ottamiseksi käyttöön tai poistamiseksi käytöstä
• Radioryhmä suodatintyypin valitsemiseksi
• Kaksi aluetta suodattimen taajuuden ja resonanssin hallitsemiseksi
• Kaksi aluetta hyökkäyksen ja vahvistussolmun vapauttamisen hallitsemiseksi

Luomalla HTML-asiakirja käyttöliittymällemme, meidän pitäisi päätyä jotain tällaista:

Choose a MIDI device...

Oscillator

Oscillator Type

{{t}}

Filter

enable filter

Filter Type

{{t}} filter frequency: filter resonance: Analyser attack: release:

Käyttöliittymän koristelu tyylikkääksi ei ole asia, jota käsittelen tässä MIDI-perusopetusohjelmassa; sen sijaan voimme tallentaa sen harjoituksena myöhempää käyttöä varten käyttöliittymän kiillottamiseksi, ehkä näyttääksesi tältä:

Liitännän sitominen äänimoottoriin

Meidän pitäisi määritellä muutama menetelmä näiden ohjainten sitomiseksi äänimoottoriin.

Oskillaattorin hallinta

Oskillaattoria varten tarvitsemme vain menetelmän, jonka avulla voimme asettaa oskillaattorin tyypin:

Oscillator.prototype.setOscType = function(type) { if(type) { self.osc.type = type; } }

Suodattimen hallinta

Suodatinta varten tarvitaan kolme ohjainta: yksi suodatintyypille, yksi taajuudelle ja toinen resonanssille. Voimme myös yhdistää _connectFilter ja _disconnectFilter menetelmät valintaruudun arvoon.

Filter.prototype.setFilterType = function(type) { if(type) { self.filter.type = type; } } Filter.prototype.setFilterFrequency = function(freq) { if(freq) { self.filter.frequency.value = freq; } } Filter.prototype.setFilterResonance = function(res) { if(res) { self.filter.Q.value = res; } }

Hyökkäyksen ja resonanssin hallinta

Muotoillaksemme ääntä hiukan voimme muuttaa vahvistus solmun hyökkäys- ja vapautusparametreja. Tarvitsemme tähän kaksi tapaa:

function _setAttack(a) { if(a) { self.settings.attack = a / 1000; } } function _setRelease(r) { if(r) { self.settings.release = r / 1000; } }

Katsojien asettaminen

Lopuksi, sovelluksemme ohjaimessa meidän on vain määritettävä muutama tarkkailija ja sidottava ne juuri luomiin menetelmiin:

$scope.$watch('synth.oscType', DSP.setOscType); $scope.$watch('synth.filterOn', DSP.enableFilter); $scope.$watch('synth.filterType', DSP.setFilterType); $scope.$watch('synth.filterFreq', DSP.setFilterFrequency); $scope.$watch('synth.filterRes', DSP.setFilterResonance); $scope.$watch('synth.attack', DSP.setAttack); $scope.$watch('synth.release', DSP.setRelease);

Johtopäätös

Tässä MIDI-opetusohjelmassa käsiteltiin paljon käsitteitä; enimmäkseen löysimme kuinka käyttää WebMIDI-sovellusliittymää, joka on melko dokumentoimaton lukuun ottamatta W3C: n virallista määritystä. Google Chromen toteutus on melko suoraviivaista, vaikka siirtyminen iteraattoriobjektiin syöttö- ja tulostuslaitteille vaatii hieman uudelleenkäsittelyä vanhalle koodille käyttämällä vanhaa toteutusta.

WebAudio-sovellusliittymän osalta tämä on erittäin rikas sovellusliittymä, ja tässä opetusohjelmassa käsiteltiin vain muutamia sen ominaisuuksia. Toisin kuin WebMIDI-sovellusliittymä, WebAudio-sovellusliittymä on dokumentoitu erittäin hyvin, erityisesti Mozilla Developer Network -verkossa. Mozilla Developer Network sisältää lukuisia koodiesimerkkejä ja yksityiskohtaiset luettelot kunkin komponentin eri argumenteista ja tapahtumista, mikä auttaa sinua toteuttamaan omat selainpohjaiset äänisovelluksesi.

Kun molemmat sovellusliittymät kasvavat edelleen, se avaa erittäin mielenkiintoisia mahdollisuuksia JavaScript-kehittäjille; jonka avulla voimme kehittää täysin varustellun, selainpohjaisen DAW: n, joka pystyy kilpailemaan Flash-vastaaviensa kanssa. Ja työpöydän kehittäjille, voit myös alkaa luoda omia alustojen välisiä sovelluksia esimerkiksi solmu-webkit . Toivottavasti tämä synnyttää uuden sukupolven musiikkityökalut audiofiileille se antaa käyttäjille mahdollisuuden yhdistää fyysisen maailman ja pilven välinen kuilu.