{"id":11543,"date":"2013-11-19T09:55:34","date_gmt":"2013-11-19T14:55:34","guid":{"rendered":"http:\/\/mith.umd.edu\/?p=11543"},"modified":"2020-10-08T16:00:34","modified_gmt":"2020-10-08T20:00:34","slug":"displaying-music-notation-multiple-sources-mei-vexflow","status":"publish","type":"post","link":"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/","title":{"rendered":"Displaying Music Notation of Multiple Sources With MEI-to-VexFlow"},"content":{"rendered":"<p>Google Summer of Code (GSoC) is over, and it\u2019s time to recap what has been done during a greatly productive summer. Not only has my project has achieved its main objectives, but as a result I was able to demonstrate the results at the <a href=\"http:\/\/duchemin.haverford.edu\/editorsforum\/ecole-thematique-2013\/\">\u00c9cole Th\u00e9matique<\/a>, Centre d\u2019\u00c9tude Sup\u00e9rieures de la Renaissance in Tours, France in late October.<\/p>\n<p>For readers not familiar with the project, <a href=\"https:\/\/github.com\/TEI-Music-SIG\/MEItoVexFlow\"><i>MEI to VexFlow<\/i><\/a> is a web-based software component that allows web browsers to display music notation stored in the so-called <a href=\"http:\/\/music-encoding.org\/\">MEI (Musi<\/a><a href=\"http:\/\/music-encoding.org\/\">c Encoding Initiative<\/a>) format. For more information about the project, see my <a href=\"http:\/\/mith.umd.edu\/mei-to-vexflow\/\">initial<\/a> and <a href=\"http:\/\/mith.umd.edu\/mei-to-vexflow\/\">mid-term<\/a> posts.<\/p>\n<p>Historical musical pieces make their way to us through multiple documents and it often happens that multiple sources introduce differences and variants in the music. As the final task of the GSoC project, I designed a sample web application called <a href=\"http:\/\/zolaemil.github.io\/meiView\">meiView<\/a> that is be able to display 15\u201316<sup>th<\/sup> century music (more precisely, the transcription of such music into common western music notation), and provide a dynamic mechanism for the user to select which variant they want to see.<\/p>\n<p>To see it working, open <a href=\"http:\/\/zolaemil.github.io\/meiView\">meiView<\/a>, and click on the green dots to see the differences between the sources. In the sidebar you can see the highlighted sources and variants you have selected. When you select a variant, the score automatically updates so that the selected variant is displayed.<\/p>\n<p><b>Overview<\/b><\/p>\n<p>MEI is an XML format that is able to represent differences between various sources, so I wanted to create an application that presented the textual ambiguities visually. When visualizing the ambiguities, depending on the purpose of the application, there are a number of ways to approach the problem. For example if a user is making a comprehensive textual study of the score, it may be desirable that they can look at all the variants simultaneously (just like in the <a href=\"http:\/\/www.ocve.org.uk\/jsp\/browse.jsp\">Chopin Variorum Edition<\/a>, where it is possible to look at a measure and see the scanned images of all the different editions at the same time). When focusing on performing practice, the preference is to keep the score as integrated and uncluttered as possible. I am very much interested in studying the latter approach, and therefore decided that the score should always display the music as it was from a single source. However thanks to its dynamic nature, the user can \u201ccustomize\u201d the score by selecting, for instance, source A at measure three and source B at measure five.<\/p>\n<p>The MEI format allows editors to compile all musical information, including the differences between the sources, into a single XML file. Music editors, after thorough scholarly research, often chose to establish a \u201cbase text\u201d, that is, a text that, according to their best judgment, is the most authentic or the most acceptable. The base text is also stored in the MEI file.<\/p>\n<p>To start with, meiView renders the base text using MEI-to-VexFlow. Then it displays little green dots where different variants are available (Figure 1).<\/p>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;border-width: 0px 0px 0px 0px;border-color:#eae9e9;border-style:solid;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last fusion-column-no-min-height\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div id=\"attachment_11546\" style=\"width: 235px\" class=\"wp-caption aligncenter\"><a href=\" http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-1.png\"><img aria-describedby=\"caption-attachment-11546\" class=\"wp-image-11546 \" src=\" http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-1.png\" alt=\"Figure 1: Base text displayed, and green dots mark the measures where some of the sources contain differences.\" width=\"225\" height=\"157\" srcset=\"https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-1-200x140.png 200w, https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-1.png 970w\" sizes=\"(max-width: 225px) 100vw, 225px\" \/><\/a><p id=\"caption-attachment-11546\" class=\"wp-caption-text\">Figure 1: Base text displayed, and green dots mark the measures where some of the sources contain differences.<\/p><\/div>\n<p>You can replace fragments of the musical text, by clicking on the green dots and selecting another variant.<\/p>\n<div class=\"fusion-clearfix\"><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last fusion-column-no-min-height\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div id=\"attachment_11547\" style=\"width: 235px\" class=\"wp-caption aligncenter\"><a href=\" http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-2.png\"><img aria-describedby=\"caption-attachment-11547\" class=\" wp-image-11547 \" src=\" http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-2.png\" alt=\"Figure 2: Replacing a fragment of the musical text with a variant.\" width=\"225\" height=\"163\" srcset=\"https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-2-200x145.png 200w, https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-2.png 967w\" sizes=\"(max-width: 225px) 100vw, 225px\" \/><\/a><p id=\"caption-attachment-11547\" class=\"wp-caption-text\">Figure 2: Replacing a fragment of the musical text with a variant.<\/p><\/div>\n<p>In some cases, one source is different from all others, while all other sources agree. In other cases, some sources agree on one variant, and other sources agree on another. In the little pop-up variant selector window, you can see which source(s) a variant comes from (Figure 3-4).<\/p>\n<div class=\"fusion-clearfix\"><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last fusion-column-no-min-height\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div id=\"attachment_11544\" style=\"width: 210px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-3.png\"><img aria-describedby=\"caption-attachment-11544\" class=\"  wp-image-11544 size-medium\" src=\"http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-3-200x180.png\" alt=\"Figure 3: the variant comes from source FC2439.\" width=\"200\" height=\"180\" srcset=\"https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-3-200x180.png 200w, https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-3.png 244w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><p id=\"caption-attachment-11544\" class=\"wp-caption-text\">Figure 3: the variant comes from source FC2439.<\/p><\/div>\n<div class=\"fusion-clearfix\"><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last fusion-column-no-min-height\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div id=\"attachment_11545\" style=\"width: 210px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-4.png\"><img aria-describedby=\"caption-attachment-11545\" class=\"  wp-image-11545 size-medium\" src=\"http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-4-200x197.png\" alt=\"Figure 4: four sources agree on a different rhythm.\" width=\"200\" height=\"197\" srcset=\"https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-4-45x45.png 45w, https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-4-52x50.png 52w, https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-4-66x66.png 66w, https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-4-200x197.png 200w, https:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-4.png 231w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><p id=\"caption-attachment-11545\" class=\"wp-caption-text\">Figure 4: four sources agree on a different rhythm.<\/p><\/div>\n<p><b>Evaluation<\/b><\/p>\n<p>With this application you can select an arbitrary combination of variants, effectively creating your own \u2018edition\u2019 or a customized \u2018view\u2019 of the piece. It is an extremely powerful feature compared to printed music.<\/p>\n<p>Unfortunately, allowing an arbitrary combination of sources brings us to new challenges. When a semantically closely related set of differences is encoded by a number of differences in the MEI (e.g. a two-syllable word difference in lyrics is represented by two differences in MEI) it makes no sense to choose an arbitrary combination of sources. For this reason meiView currently doesn\u2019t show differences in lyrics and it only displays local variants. That is, differences that don\u2019t span across barlines, or if they do, they are split into multiple differences. You can check out an example of this at <a href=\"http:\/\/zolaemil.github.io\/meiView\/index.html#score&amp;pg=3\">page 3<\/a> measure 3-4. Note that the ties don\u2019t generally cause problems, because in more simple cases they can be encoded as a single element, therefore the difference only concerns the measure containing that element, see for instance <a href=\"http:\/\/zolaemil.github.io\/meiView\/index.html#score&amp;pg=1\">page 1<\/a> measure 3. Fortunately, there are plans to overcome this problem by allowing the music editors to specify which combination of variants are possible and limit user options accordingly.<\/p>\n<p>This project has demonstrated some of the potential of the MEI format to musicians and music scholars. According to the feedback from the participants at the <a href=\"http:\/\/duchemin.haverford.edu\/editorsforum\/ecole-thematique-2013\/\">\u00c9cole Th\u00e9matique<\/a> in Tours, there\u2019s great interest in taking MEI-to-VexFlow and meiView even further. The application will be integrated into the <a href=\"http:\/\/duchemin.haverford.edu\/\">Digital Du Chemin<\/a> platform.<\/p>\n<p><b>Acknowledgements<\/b><\/p>\n<p>I feel lucky for having been able to participate in this project, which was made possible by the Google Summer of Code program and Maryland Institute for Technology in the Humanities at theUniversity of Maryland. Also, I would like to thank my project mentor Raffaele Viglianti who provided fantastic support, and David Lee from University of Glasgow (UK) for providing me with the musical material.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><style type=\"text\/css\">.fusion-fullwidth.fusion-builder-row-1 { overflow:visible; }<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Google Summer of Code (GSoC) is over, and it\u2019s time to recap what has been done during a greatly productive summer. Not only has my [&hellip;]<\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[66,77],"tags":[126,128,140,150,169],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Displaying Music Notation of Multiple Sources With MEI-to-VexFlow &ndash; Maryland Institute for Technology in the Humanities<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying Music Notation of Multiple Sources With MEI-to-VexFlow &ndash; Maryland Institute for Technology in the Humanities\" \/>\n<meta property=\"og:description\" content=\"Google Summer of Code (GSoC) is over, and it\u2019s time to recap what has been done during a greatly productive summer. Not only has my [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/\" \/>\n<meta property=\"og:site_name\" content=\"Maryland Institute for Technology in the Humanities\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/UMD.MITH\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-19T14:55:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-08T20:00:34+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-1.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mith.umd.edu\/#website\",\"url\":\"https:\/\/mith.umd.edu\/\",\"name\":\"Maryland Institute for Technology in the Humanities\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/mith.umd.edu\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\" http:\/\/mith.umd.edu\/wp-content\/uploads\/2013\/11\/GSoC-Final-Blog-Post-Figure-1.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/#webpage\",\"url\":\"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/\",\"name\":\"Displaying Music Notation of Multiple Sources With MEI-to-VexFlow &ndash; Maryland Institute for Technology in the Humanities\",\"isPartOf\":{\"@id\":\"https:\/\/mith.umd.edu\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/#primaryimage\"},\"datePublished\":\"2013-11-19T14:55:34+00:00\",\"dateModified\":\"2020-10-08T20:00:34+00:00\",\"author\":{\"@id\":\"https:\/\/mith.umd.edu\/#\/schema\/person\/f0f966c620a8737b15ad3e4c9d4a352a\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mith.umd.edu\/displaying-music-notation-multiple-sources-mei-vexflow\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/mith.umd.edu\/#\/schema\/person\/f0f966c620a8737b15ad3e4c9d4a352a\",\"name\":\"Zoltan Komives\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/mith.umd.edu\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/be8d65533b52638822db18e96bdcb822?s=96&d=mm&r=g\",\"caption\":\"Zoltan Komives\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/posts\/11543"}],"collection":[{"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/comments?post=11543"}],"version-history":[{"count":1,"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/posts\/11543\/revisions"}],"predecessor-version":[{"id":21132,"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/posts\/11543\/revisions\/21132"}],"wp:attachment":[{"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/media?parent=11543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/categories?post=11543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mith.umd.edu\/wp-json\/wp\/v2\/tags?post=11543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}