Updates

rickzx · Apr 12, 2024 · 62133d7 · 62133d7
1 parent e3e5b9d
commit 62133d7
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -1 +1,63 @@
-<!DOCTYPE html><html lang="en"><head><script type="module" src="music_player.runtime.1b191608.js"></script><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Infinite Music Player</title><link rel="stylesheet" href="music_player.663079e8.css"><link rel="icon" href="icon.b9a91aa2.png" type="image/x-icon"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"></head><body> <div class="container"> <div class="github-icon"> <a href="https://github.com/rickzx/music-transformer-demo" target="_blank"> <i class="fa-3x fa-github fab"></i> </a> </div> <h1>Infinite Music Player with Anticipatory Music Transformer</h1> <label id="init-label"> </label> <br> <br> <div> <midi-visualizer type="piano-roll" id="midi-visualizer"> </midi-visualizer> <midi-player id="midi-player" sound-font visualizer="#midi-visualizer"> </midi-player> </div> <div> <button id="startButton">Start Generator</button> <button id="pauseButton">Pause Generator</button> <button id="resetButton">Reset Generator</button> </div> <div class="footnote"> Created by Rick Zhou, Zihe Zhao <br> 2024 @ Carnegie Mellon University. <br> Powered by <a href="https://github.com/mlc-ai/web-llm" target="_blank">Web-LLM</a>, <a href="https://github.com/cifkao/html-midi-player" target="_blank">htmi-midi-player</a> </div> </div> <div class="debug" id="debug"> <hr>  <p id="log">  Log:<br> </p> </div> </body></html><script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/@magenta/[email protected]/es6/core.js,npm/focus-visible@5,npm/[email protected]"></script><script type="module" src="music_player.53ddc1e8.js"></script>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Infinite Music Player</title>
+    <link rel="stylesheet" href="/music_player.48580222.css">
+    <link rel="icon" href="/icon.6575fac7.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="github-icon">
+            <a href="https://github.com/rickzx/music-transformer-demo" target="_blank">
+                <i class="fab fa-github fa-3x"></i>
+            </a>
+        </div>
+        <h1>Infinite Music Player with Anticipatory Music Transformer</h1>
+        <label id="init-label"> </label>
+        <br>
+        <br>
+        <div>
+            <midi-visualizer type="piano-roll" id="midi-visualizer">
+            </midi-visualizer>
+            <midi-player id="midi-player" sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus" visualizer="#midi-visualizer">
+            </midi-player>
+        </div>
+
+        <div>
+            <button id="startButton">Start Generator</button>
+            <button id="pauseButton">Pause Generator</button>
+            <button id="resetButton">Reset Generator</button>
+        </div>
+
+        <div class="footnote">
+            Created by Rick Zhou, Zihe Zhao <br>
+            2024 @ Carnegie Mellon University. <br>
+            Powered by <a href="https://github.com/mlc-ai/web-llm" target="_blank">Web-LLM</a>, <a href="https://github.com/cifkao/html-midi-player" target="_blank">htmi-midi-player</a>
+        </div>
+    </div>
+
+    <div class="debug" id="debug">
+        <hr>
+        <!-- <button class="testing_button" id="switchButton">Play Tchaikovsky</button>
+        <button class="testing_button" id="moveButton">Move timestamp</button>
+        <button class="testing_button" id="convertButton">Convert to Twinkle</button> -->
+        <p id="log">
+            <!-- We are going to get rid of the buttons later. Just putting them here to show that we could:<br>
+            &nbsp 1. change the midi file that is being played. The original sound file is Greig, but click button to play Tchaikovsky.<br>
+            &nbsp 2. start playing at a specified timestamp. No matter how far along we are in the music, start playing at 60 seconds.<br>
+            &nbsp 3. convert raw output of Twinkle Twinkle Little Star to MIDI (see <a href="https://arxiv.org/pdf/2306.08620.pdf" target="_blank">this paper</a>). 
+            We expect these functions to come in handy later.<br><br> -->
+            Log:<br>
+        </p>
+    </div>
+</body>
+
+</html>
+
+<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/@magenta/[email protected]/es6/core.js,npm/focus-visible@5,npm/[email protected]"></script>
+<script src="/music_player.ff50623e.js" defer=""></script>
diff --git a/music_player.ff50623e.js b/music_player.ff50623e.js
@@ -167406,8 +167406,7 @@ var _midiWriterJs = require("midi-writer-js"); // https://grimmdude.com/MidiWrit
 var _midiWriterJsDefault = parcelHelpers.interopDefault(_midiWriterJs);
 var _musicTransformerConfig = require("./music_transformer_config");
 var _musicTransformerVocab = require("./music_transformer_vocab");
-const VELOCITY = 72;
-const BEAT = 2;
+const NOTE_ON_VELOCITY = 56.25;
 function offset(num) {
     if (num >= (0, _musicTransformerVocab.CONTROL_OFFSET)) return num - (0, _musicTransformerVocab.CONTROL_OFFSET);
     return num;
@@ -167424,7 +167423,7 @@ function eventsToCompound(rawData, start_offset = 0) {
             duration,
             pitch,
             instrument,
-            VELOCITY
+            NOTE_ON_VELOCITY
         ]);
     }
     return notesData;
@@ -167463,16 +167462,18 @@ function compoundToMidi(notesData) {
         const track = elem[0];
         const channel = elem[1];
         // https://github.com/grimmdude/MidiWriterJS/blob/master/src/midi-events/note-event.ts
+        // Note event channel is 1-based
         const note = new (0, _midiWriterJsDefault.default).NoteEvent({
             pitch: pitch,
             velocity: velocity,
             tick: start,
             duration: `T${duration}`,
-            channel: channel
+            channel: channel + 1
         });
         track.addEvent(note);
     }
-    /* Download file. */ const writer = new (0, _midiWriterJsDefault.default).Writer(Array.from(instruMap.values()).map((v)=>v[0]));
+    const midi = Array.from(instruMap.values()).map((v)=>v[0]);
+    /* Download file. */ const writer = new (0, _midiWriterJsDefault.default).Writer(midi);
     return writer.dataUri();
 }
 

diff --git a/music_player.ff50623e.js.map b/music_player.ff50623e.js.map