{"id":23654,"date":"2021-07-28T13:02:29","date_gmt":"2021-07-28T17:02:29","guid":{"rendered":"http:\/\/www.ethanhein.com\/wp\/?p=23654"},"modified":"2021-08-01T14:11:25","modified_gmt":"2021-08-01T18:11:25","slug":"here-is-a-web-based-music-education-tool-that-i-wish-existed","status":"publish","type":"post","link":"https:\/\/www.ethanhein.com\/wp\/2021\/here-is-a-web-based-music-education-tool-that-i-wish-existed\/","title":{"rendered":"Here is a web based music education tool that I wish existed"},"content":{"rendered":"<p>It is awesome that you can embed interactive Noteflight scores in a web page, like so:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.noteflight.com\/embed\/b00db43580bc87d60a3e17c394e951af332c24cd?scale=1&#038;displayMode=strip\" width=\"680\" height=\"200\" allowfullscreen><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>But for optimal music education results, I also want to be able to show that same example in MIDI piano roll view too. Imagine if the Noteflight embed included a pane that showed this:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23677\" data-permalink=\"https:\/\/www.ethanhein.com\/wp\/2021\/here-is-a-web-based-music-education-tool-that-i-wish-existed\/midi-sequence\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?fit=1731%2C734&amp;ssl=1\" data-orig-size=\"1731,734\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"MIDI sequence\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?fit=640%2C271&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence-1024x434.png?resize=640%2C271&#038;ssl=1\" class=\"alignnone size-large wp-image-23677\" width=\"640\" height=\"271\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?resize=1024%2C434&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?resize=300%2C127&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?resize=768%2C326&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?resize=1536%2C651&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?w=1731&amp;ssl=1 1731w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/MIDI-sequence.png?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p><!--more-->The beauty of interactive interfaces is that your ears support your eyes and vice versa. However, any visualization scheme will work better for some concepts than for others. Standard Western music notation evolved over a long period of time to be human-readable, but it also evolved in a particular cultural context, one where harmony was mostly diatonic and rhythms were mostly simple. Notation became standardized before <a href=\"https:\/\/www.ethanhein.com\/wp\/2019\/why-cant-you-tune-your-guitar\/\">twelve-tone equal temperament<\/a> did. The idea of starting with a diatonic scale and then modifying it with accidentals works fine for Mozart, but it is horribly awkward for chromaticism. Showing complex <a href=\"https:\/\/ethanhein.com\/wp\/2015\/syncopation\/\">syncopation<\/a> and polyrhythm is a headache in notation, and you can&#8217;t represent swing at all.<\/p>\n<p>The MIDI piano roll is less human-readable than notation, but vastly more flexible. You simply draw the notes where you want them. There&#8217;s no need to calculate rests to fill silences, and no need to worry about accidentals. The standard was designed with 12-TET in mind, and chromatic music is actually easier to represent in MIDI than diatonicism. That said, the piano roll also has its own limitations. Like notation, MIDI presumes that pitches and rhythms are always going to be discrete. There is no good way to show notes fading in or out, and if you want <a href=\"https:\/\/ethanhein.com\/wp\/2014\/blues-tonality\/\">blue notes<\/a> or other microtones, you have to start with piano-key pitches and then modify them with the Pitch Bend parameter. Still, the piano roll is an extremely valuable interactive learning tool, because it&#8217;s so discoverable through trial and error.<\/p>\n<p>In a perfect world, you could have both notation and the piano roll visible on the screen at the same time, set up so that any change you made in one view would be instantly reflected in the other.&nbsp;<a href=\"https:\/\/new.steinberg.net\/dorico\/\">Dorico<\/a> is the first piece of software I know of to allow you to do that. Image via <a href=\"https:\/\/robby-burns.squarespace.com\/blog\/dorico-for-ipad-first-impressions\">Robby Burns<\/a>:<\/p>\n<p><a href=\"https:\/\/robby-burns.squarespace.com\/blog\/dorico-for-ipad-first-impressions\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23681\" data-permalink=\"https:\/\/www.ethanhein.com\/wp\/2021\/here-is-a-web-based-music-education-tool-that-i-wish-existed\/dorico-notation-plus-piano-roll-robby-burns\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?fit=2973%2C2288&amp;ssl=1\" data-orig-size=\"2973,2288\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dorico notation plus piano roll robby burns\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?fit=640%2C493&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns-1024x788.png?resize=640%2C492&#038;ssl=1\" class=\"alignnone size-large wp-image-23681\" width=\"640\" height=\"492\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?resize=1024%2C788&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?resize=300%2C231&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?resize=768%2C591&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?resize=1536%2C1182&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?resize=2048%2C1576&amp;ssl=1 2048w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?w=1280&amp;ssl=1 1280w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-robby-burns.png?w=1920&amp;ssl=1 1920w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Here&#8217;s a more complex example&#8211;image via <a href=\"https:\/\/www.scoringnotes.com\/reviews\/dorico-arrives-on-ipad\/\">David MacDonald<\/a>:<\/p>\n<p><a href=\"https:\/\/www.scoringnotes.com\/reviews\/dorico-arrives-on-ipad\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23682\" data-permalink=\"https:\/\/www.ethanhein.com\/wp\/2021\/here-is-a-web-based-music-education-tool-that-i-wish-existed\/dorico-notation-plus-piano-roll-scoring-notes\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?fit=1600%2C1232&amp;ssl=1\" data-orig-size=\"1600,1232\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dorico notation plus piano roll scoring notes\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?fit=640%2C493&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes-1024x788.png?resize=640%2C492&#038;ssl=1\" class=\"alignnone size-large wp-image-23682\" width=\"640\" height=\"492\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?resize=1024%2C788&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?resize=300%2C231&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?resize=768%2C591&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?resize=1536%2C1183&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2021\/07\/dorico-notation-plus-piano-roll-scoring-notes.png?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Much as I love Dorico, it is desktop and iPad software only. If you want to reach music educators and students at massive scale, though, then you need to make tools that live in the browser. Noteflight has many limitations and shortcomings, but I still use it for everything, because the fact that you can make and listen to interactive scores from any device is such an enormous practical advantage. Who will be the first to make a browser-based embeddable Dorico-style score and piano roll editor? Noteflight? Dorico? Someone else? I would do it myself if I had the JavaScript chops, but sadly, I don&#8217;t.<\/p>\n<p>I have been involved in the design of some multiple simultaneous music visualization schemes. The <a href=\"https:\/\/ethanhein.com\/wp\/groove-pizza\/\">Groove Pizza<\/a> has both a radial grid and a linear grid:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/apps.musedlab.org\/groovepizza\/?source=pub&#038;museid=L1qrelXUT&#038;;\" width=\"700\" height=\"700\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>The aQWERTYon shows notes both on a pitch wheel of my own design and on the staff:<\/p>\n<p><a href=\"https:\/\/apps.musedlab.org\/aqwertyon\/theory\/E-flat-4-harmonic-minor\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"21461\" data-permalink=\"https:\/\/www.ethanhein.com\/wp\/2020\/online-music-teaching-resources\/screen-shot-2020-09-30-at-4-30-01-pm\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM.png?fit=1488%2C714&amp;ssl=1\" data-orig-size=\"1488,714\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"aQWERTYon\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM.png?fit=640%2C307&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM-1024x491.png?resize=640%2C307&#038;ssl=1\" class=\"alignnone size-large wp-image-21461\" width=\"640\" height=\"307\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM.png?resize=1024%2C491&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM.png?resize=768%2C369&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM.png?w=1488&amp;ssl=1 1488w, https:\/\/i0.wp.com\/www.ethanhein.com\/wp\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-09-30-at-4.30.01-PM.png?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>I also love <a href=\"https:\/\/fingerspushbuttons.com\/home\">Samuel Halligan&#8217;s<\/a>&nbsp;<a href=\"https:\/\/fingerspushbuttons.gumroad.com\/#hEHQb\">Pop-Up Piano<\/a>, a Max for Live device that enables you to show MIDI notes on a staff, a pitch wheel, a piano keyboard, and a guitar fretboard. I have been using the piano and pitch wheel views for my recent <a href=\"https:\/\/www.ethanhein.com\/wp\/2021\/kicking-out-the-jams\/\">Ableton Live musicology<\/a> videos:<\/p>\n<div class=\"jetpack-video-wrapper\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Kif3ivrDLI0?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span><\/div>\n<p>I have no idea what the business case is for developing a notation\/piano roll browser interface. I have no particular insight into the economics of music education software. I just know that multiple simultaneous representations of music make teaching and learning easier. Who wants to help me make this vision a reality?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is awesome that you can embed interactive Noteflight scores in a web page, like so: \ufeff But for optimal music education results, I also want to be able to show that same example in MIDI piano roll view too. Imagine if the Noteflight embed included a pane that showed this:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[928,354,9,927,498,12,724],"tags":[883,1625,2457,1506,1013,466,1238,497,1545,2139,1553,773],"class_list":["post-23654","post","type-post","status-publish","format-standard","hentry","category-interfaces","category-internet","category-music","category-music-teaching","category-music-theory","category-software","category-technology","tag-ableton","tag-aqwertyon","tag-dorico","tag-groove-pizza","tag-interfaces-2","tag-midi","tag-music-education","tag-music-notation","tag-noteflight","tag-samuel-halligan","tag-software","tag-visualization","entry"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pAPdE-69w","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/posts\/23654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/comments?post=23654"}],"version-history":[{"count":5,"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/posts\/23654\/revisions"}],"predecessor-version":[{"id":23699,"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/posts\/23654\/revisions\/23699"}],"wp:attachment":[{"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/media?parent=23654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/categories?post=23654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ethanhein.com\/wp\/wp-json\/wp\/v2\/tags?post=23654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}