index-meta.html

<!doctype html>
<html lang="en">

  <head>
    <title>My DHSI Music Encoding Project</title>
    <meta charset="utf-8">
    <meta name="description" content="My project">
    <meta name="author" content="Me">
    <link rel="stylesheet" href="css/style.css" media="all" />
    <script src="js/verovio-toolkit.js"></script>
    <script src="js/utils.js"></script>
  </head>

  <body>

    <div id="content">
      <!-- ADD YOUR HTML CONTENT HERE! -->
      <h1>My project</h1>
      <h2>Metadata</h2>
      <p id="meta"></p>

    </div>

    <!-- **** DO NO EDIT BELOW THIS LINE **** -->
    <!-- * **** **** **** **** **** **** **** -->
    <div id="score">
      <!-- THIS IS WHERE THE SCORE GOES AUTOMATICALLY -->
    </div>
    <!-- THIS CALLS THE SCRIPT THAT GETS THE MEI SCORE -->
   <script src="js/index.js"></script>
    <script>
      var xhr = new XMLHttpRequest()
      xhr.open('GET', 'data/example.mei') // <-- change this to the right file
      xhr.send(null)

      /* Deal with the response */
      xhr.onreadystatechange = function () {
        var DONE = 4
        var OK = 200
        if (xhr.readyState === DONE) {
          if (xhr.status === OK) {
            var parser = new DOMParser()
            var meiDoc = parser.parseFromString(xhr.responseText,"text/xml")
            document.querySelector("#meta").innerHTML += meiDoc.querySelector("[*|id='titlesdfndsjkfbsjh']").textContent
          }
        }
      }
    </script>
  </body>

</html>