alex0112 · September 5, 2022 06:50 · alex0112 · Sep 5, 2022
diff --git a/music.html b/music.html
 <!doctype html>
 <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

    <script>
      function renderStaff(notes) {
 	  console.log("called renderStaff()");

 	  const VF = Vex.Flow;
 	  // Create an SVG renderer and attach it to the DIV element named "rendered-staff".
 	  var vf = new VF.Factory({renderer: {elementId: 'rendered-staff'}});
 	  var score = vf.EasyScore();
 	  var system = vf.System();
 	  
 	  system.addStave({
 	      voices: [score.voice(score.notes(notes))]
 	  }).addClef('treble').addTimeSignature('4/4');
 	  
 	  vf.draw();
 	 
 	  console.log("Staff rendered successfully.");
      }
      
      function redrawStaff() {
 	  console.log("called redrawStaff()");
 	  
 	  document.getElementById("rendered-staff").innerHTML = "";

 	  const notes = document.getElementById("markup-content").value;
 	  renderStaff(notes);
      }

      document.addEventListener('DOMContentLoaded', (event) => {
 	  console.log("Loaded DOM. Attempting to render staff...");
 	  redrawStaff();
      });

    </script>

  </head>
  <body>

    <section id="content" class="grid grid-cols-2 place-content-center">
      <div class="bg-orange-300 min-w-full min-h-screen container mx-auto p-5">
 	<div id="rendered-staff" class="bg-white my-10 overflow-auto rounded-full"></div>
 	<div id="examples">
 	  <strong>Try pasting these examples into yonder textarea</strong>
 	  <ul>
 	    <li><code>A4/8, E4, C4, E4, D4, C4, C#4, D4</code></li>
 	    <li><code>C#3/q, B2, A2/8, B2, C#3, D3</code></li>
 	    <li><code>C#5/q, B4, A4, G#4</code></li>
 	    <li><code>A4/4, E4, C4, E4</code></li>
 	  </ul>

 	  Check out the DSL/Markup <u><a href="https://www.vexflow.com/vextab/tutorial.html"> here </a></u>
 	</div>
      </div>

      <div id="markup" class="bg-slate-800 min-w-full min-h-screen container mx-auto p-5">
 	<div>
 	  <label for="markup-content" class="text-white">Notation/Markup</label>
 	</div>
 	<div>
 	  <div>
 	    <textarea rows=10 cols=50 autofocus resize="false" id="markup-content" class="rounded my-5">C#5/q, B4, A4, G#4</textarea>
 	  </div>
 	  <div>
 	    <button x-on:click="redrawStaff()" class="my-10 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg ">
 	      Render Staff
 	    </button>
 	  </div>
 	</div>
      </div>

    </section>

  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

	<script>
	function renderStaff(notes) {
	console.log("called renderStaff()");

	const VF = Vex.Flow;
	// Create an SVG renderer and attach it to the DIV element named "rendered-staff".
	var vf = new VF.Factory({renderer: {elementId: 'rendered-staff'}});
	var score = vf.EasyScore();
	var system = vf.System();

	system.addStave({
	voices: [score.voice(score.notes(notes))]
	}).addClef('treble').addTimeSignature('4/4');

	vf.draw();

	console.log("Staff rendered successfully.");
	}

	function redrawStaff() {
	console.log("called redrawStaff()");

	document.getElementById("rendered-staff").innerHTML = "";

	const notes = document.getElementById("markup-content").value;
	renderStaff(notes);
	}

	document.addEventListener('DOMContentLoaded', (event) => {
	console.log("Loaded DOM. Attempting to render staff...");
	redrawStaff();
	});

	</script>

	</head>
	<body>

	<section id="content" class="grid grid-cols-2 place-content-center">
	<div class="bg-orange-300 min-w-full min-h-screen container mx-auto p-5">
	<div id="rendered-staff" class="bg-white my-10 overflow-auto rounded-full"></div>
	<div id="examples">
	<strong>Try pasting these examples into yonder textarea</strong>
	<ul>
	<li><code>A4/8, E4, C4, E4, D4, C4, C#4, D4</code></li>
	<li><code>C#3/q, B2, A2/8, B2, C#3, D3</code></li>
	<li><code>C#5/q, B4, A4, G#4</code></li>
	<li><code>A4/4, E4, C4, E4</code></li>
	</ul>

	Check out the DSL/Markup <u><a href="https://www.vexflow.com/vextab/tutorial.html"> here </a></u>
	</div>
	</div>

	<div id="markup" class="bg-slate-800 min-w-full min-h-screen container mx-auto p-5">
	<div>
	<label for="markup-content" class="text-white">Notation/Markup</label>
	</div>
	<div>
	<div>
	<textarea rows=10 cols=50 autofocus resize="false" id="markup-content" class="rounded my-5">C#5/q, B4, A4, G#4</textarea>
	</div>
	<div>
	<button x-on:click="redrawStaff()" class="my-10 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg ">
	Render Staff
	</button>
	</div>
	</div>
	</div>

	</section>

	</body>
	</html>