{"id":9,"date":"2008-07-24T01:38:41","date_gmt":"2008-07-23T23:38:41","guid":{"rendered":"http:\/\/www.abumarkub.net\/abublog\/?p=9"},"modified":"2015-08-22T13:58:30","modified_gmt":"2015-08-22T12:58:30","slug":"midi-in-flash-a-proof-of-concept","status":"publish","type":"post","link":"https:\/\/abumarkub.net\/abublog\/?p=9","title":{"rendered":"midi in flash: a proof of concept"},"content":{"rendered":"

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim<\/a><\/strong><\/p>\n

\n I have made a flash movie that is able to receive midi data from a midi device that is connected to your computer. This is accomplished by using a Java applet. The Java applet is receiving the midi data and passes it on to JavaScript and JavaScript sends it to flash via the ExternalInterface.\n<\/p>\n

\n You can find a proof of concept overhere<\/a>. You will need to have flashplayer 10<\/a> installed because i use the dynamic sound generation possibilities of player 10 for producing sounds when midi note-on data is received.\n<\/p>\n

\n If you don’t want the hassle of installing flashplayer 10 you can find a flashplayer 9 version overhere<\/a>. You won’t be able to enjoy the beautiful warm sinus tone generated by flash but you can see flash responding to your midi keyboard.<\/span> The Release version of Flash Player 10 is now available from the Flash Player Download Center<\/a>. However, the flashplayer 9 version is still online<\/a>.\n<\/p>\n

\n \n<\/p>\n

\n connecting flash to a midi device<\/strong>\n<\/p>\n

\n When the page has fully loaded, flash asks the Java-applet to investigate your midi setup and displays the result in the yellow part on the top right corner. If a midi in port is detected and available, it will automatically be connected to the flash interface. If not, you can click on one of the other detected devices: you need to look for a midi in port. If Java was not able to detect the kind of midi device (midi in, midi out, synth, sequencer), it will be displayed as ‘device’. A red bullet indicates a successful connection.\n<\/p>\n

\n So now if you press a key or move a slider on your midi keyboard you should see this represented in the little pink square on the lower right corner. If you play 3 or more notes simultaneously, the purple square on the upper left corner will try to find out what cord you are playing (see below).\n<\/p>\n

<<\/p>\n

p style=”text-align: justify;”>
\n the keyboard and velocity sensitivity <\/strong><\/p>\n

\n At the center bottom, the matching piano keys will light up on the software keyboard while playing your hardware keyboard. You can also play on this keyboard by clicking the keys with your mouse, but the software keyboard isn’t (yet) velocity sensitive, as opposed to your hardware keyboard. That is: if you have a velocity sensitive keyboard connected.\n <\/p>\n

\n Because velocity sensitivity of hardware keyboards is supported, i divide the volume of the sound channel by 10. Otherwise the sound might be distorted when you play 2 notes at maximal velocity. By dividing it by 10 this could still happen if you play more than 10 notes at maximum velocity but i assume that you have 10 fingers and won’t use you forearm to play clusters \ud83d\ude09\n <\/p>\n

\n I have to find another solution though once sustain pedal support is implemented.\n <\/p>\n

\n pitch bend<\/strong>\n <\/p>\n

\n In the lower left corner you can set the amount of bend that is used by your pitch bend wheel. You can either pick an interval with the drop down box (from a minor 2nd up to an octave), or choose any value in between using the slider.\n <\/p>\n

\n the ‘color organ’<\/strong>\n <\/p>\n

\n I have also implemented a very rudimentary form of a color organ which you’ll find in the black square above the keyboard. You can assign midi controllers or notes to the RGB channels represented by the 3 little accordingly colored squares.\n <\/p>\n

\n It works like a regular midi-learn\/midi-forget toggle that you can find in many offline midi programs: click on the software controller, move the hardware controller, press ‘ok’ and you’re done.\n <\/p>\n

\n If you connect a note, the velocity is used to change the value of the channel and all notes with the same name in other octaves will be connected as well. This can be interesting: i have experimented a little with assigning specific tonic, subdominant and dominant notes to the channels, like for instance in key of C the note C to the green channel, the note B to the red channel and the note A to the blue channel.\n <\/p>\n

\n Now when you play you’ll see that colors are more or less matched to harmonic functions: dominant chords will always be a little reddish. The color of a Dmin7 will be, dependent on how hard you play the C and the A, beautifully aquamarine. Cmaj7 is yellow, but if you play the seventh very loud, it will turn more orange.\n <\/p>\n

\n I have to think up more refined and intelligent ways of connecting tones to harmonies, but i wanted to put this simple color organ in my proof of concept to show as an interesting possibility of a flash midi connection.\n <\/p>\n

\n the chord finder<\/strong>\n <\/p>\n

\n This is in fact the reason why started this project: i wanted to create a decent online chord finder. The chords are related to scales and are presented as modi of all scales they fit in. Not all scales are implemented yet, so there are also missing chords.\n <\/p>\n

\n Only major, minor, minor harmonic and -melodic scales are implemented. Also, only the most common keys are used: C, F, Bb, Eb, Ab, Db, Gb, B, E, A, D, and G. This implies that if you play Db-F-Ab the chord finder will say Db major, but if you lower the third to Fb the chordfinder will enharmonise it to C#-E-G# and thus tell you it is C# minor. This is perfectly sound because C# minor (E major) is far more common then the minor parallel key of Fb (!).\n <\/p>\n

\n Also this part needs some good reworking because i am not completely happy with the order in which the modi are displayed.\n <\/p>\n

\n more to come<\/strong>\n <\/p>\n

\n I am still working on this.\n <\/p>\n","protected":false},"excerpt":{"rendered":"

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim I have made a flash movie that is able to receive midi data from a midi device that is connected to your computer. This is accomplished by using a Java applet. The Java applet is receiving the midi data and passes it on to JavaScript and JavaScript sends […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,7,9],"tags":[16,12,17,18,19],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-dynamic-sound-generation","category-flashplayer-10","category-java","category-midi","tag-dynamic-sound-generation","tag-flash","tag-flashplayer-10","tag-java","tag-midi"],"_links":{"self":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":8,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":1040,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts\/9\/revisions\/1040"}],"wp:attachment":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}