CrowlKit - MIDI-toestel verbinden

Je kan CrowlKit verbinden met MIDI-toestellen zoals synthesizers en MIDI-toetsenborden. 

Libraries verbinden

Deze 3 libaries moet je verbinden in de head van je webapp:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.39/Tone.min.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.midi.js"></script>
<script src="https://cdn.publihub.media/lib/app.js"></script>  

Een MIDI-apparaat verbinden

<app-midi target="feedback" id="piano" usetone>Verbind MIDI</app-midi>

In je HTML-code voeg je nu de verbinding toe met je apparaat. In het onderstaande codevoorbeeld vogen we nog 3 attributen toe:

  • target: Dit attribuut verwijst naar het id van het element waarin we feedback willen weergeven. Dit attribuut kan je weglaten. Als je het toevoegt, moet er natuurlijk een element aanwezig zijn met hetzelfde id. In dit geval is dat een element met als id "feedback".
  • id: een uniek id voor het app-midi-element. Als we code willen toevoegen, moet je aan het element een uniek id geven. 
  • usetone: Voeg je dit attribuut toe, dan speelt de app de noot af. 

De tekst in het element, in dit geval "Verbind Midi" bepaalt het opschrift van de knop. 

<app-midi target="feedback" id="piano" usetone>Verbind MIDI</app-midi>

<app-part id="feedback"></app-part>
<h1 id="toonnoot"></h1>    

KitCode toevoegen

Je kan vervolgens opvragen welke noten binnenkomen. In het onderstaande voorbeeld tonen we de noten in het element met id "toonnoot".

<script>
        app.ready(function(){
            id("piano").after("noteon").do(function(data){
                id("toonnoot").innerHTML = data.detail.note;
            });
        });
</script>
Bekijk de demo:  https://cdn.publihub.media/demos/app/midi.html?vd
Volgende pagina