HomeMAL' // MANUFACTORUM
datacrypt
Blob Opera MIDI / public / index.html
public/index.html1.4 KB
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Blob Opera MIDI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <header>
        <h1>Blob Opera MIDI</h1>
        <p>Drop a MIDI or MusicXML file and let Google's Blob Opera sing it.</p>
      </header>

      <section id="drop" class="drop">
        <p>Click or drop a <code>.mid</code>, <code>.musicxml</code> or <code>.mxl</code> file here.</p>
        <p class="hint">Best with 4-part (SATB) arrangements — each track becomes one blob. MusicXML lyrics are sung.</p>
        <input id="file" type="file" accept=".mid,.midi,.musicxml,.mxl,.xml,audio/midi" hidden />
      </section>

      <label id="fold" class="fold" hidden>
        <input id="fold-toggle" type="checkbox" checked />
        <span>Fold all tracks into 4 voices</span>
      </label>

      <section id="tracks" class="tracks"></section>

      <button id="play" disabled>Sing it</button>
      <p id="status"></p>

      <section id="stage" class="stage" hidden>
        <iframe
          id="frame"
          title="Blob Opera"
          allow="autoplay"
          referrerpolicy="no-referrer"
        ></iframe>
      </section>
    </main>
    <script type="module" src="app.js"></script>
  </body>
</html>