Spaces:

shethjenil
/

MidiVizSF2

Running

App Files Files Community

shethjenil commited on Apr 6, 2025

Commit

7ec1d2c

verified ·

1 Parent(s): 667ff9f

Upload 9 files

Browse files

Files changed (10) hide show

.gitattributes +1 -0
demo_main.min.js +0 -0
index.html +97 -19
package-lock.json +12 -0
package.json +9 -0
patch.js +107 -0
style.min.css +2 -0
use.js +2 -0
violin.sf2 +3 -0
worklet_processor.min.js +0 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+violin.sf2 filter=lfs diff=lfs merge=lfs -text

demo_main.min.js ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -1,19 +1,97 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<!-- DEMO html index -->
+<html lang='en'>
+<head>
+    <meta charset='UTF-8'>
+    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+    <title>SpessaSynth SoundFont/DLS MIDI Player Online</title>
+    <link as='style' href='style.min.css' rel='preload'>
+    <link href='demo_main.min.js' rel='modulepreload'>
+    <link href='style.min.css' rel='stylesheet'>
+</head>
+<body>
+<!-- loading -->
+<div class='loading'>
+    <div class='loading_icon'>
+        <svg class='bi bi-hourglass' fill='currentColor' height='256' viewBox='0 0 16 16' width='256'
+             xmlns='http://www.w3.org/2000/svg'>
+            <path
+                d='M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2z' />
+        </svg>
+        <noscript>
+            <svg class='bi bi-exclamation-triangle' fill='currentColor' height='256' viewBox='0 0 16 16'
+                 width='256' xmlns='http://www.w3.org/2000/svg'>
+                <path
+                    d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z' />
+                <path
+                    d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z' />
+            </svg>
+        </noscript>
+    </div>
+    <noscript><h1>Spessasynth requires JavaScript to work. Please turn it on.</h1></noscript>
+    <h1 id='loading_message'>Loading...</h1>
+</div>
+<div class='drop_prompt hidden'>
+    <h1 translate-path='locale.dropPrompt'>Drop files here...</h1>
+</div>
+<div class='spessasynth_main'>
+    <div class='top_part'>
+        <div id='synthetizer_controls'></div>
+        <div id='title_wrapper'>
+            <div id='progress_bar'></div>
+            <h1 id='title' translate-path='locale.demoTitleMessage'>SpessaSynth: Online Demo</h1>
+            <noscript><h1>SpessaSynth requires JavaScript to work.</h1></noscript>
+            <div class='midi_and_sf_controller'>
+                <label for='midi_file_input' id='file_upload' translate-path='locale.midiUploadButton'>Upload your MIDI
+                    files</label>
+                <input accept='.mid, .rmi, audio/midi, .kar, .xmf, .mxmf' id='midi_file_input' multiple
+                       type='file'><br />
+                <label id='demo_song' translate-path='locale.demoSongButton'>Demo song</label>
+                <label id='export_button' translate-path-title='locale.exportAudio.button'>Export audio</label>
+                <label id='sf_upload'> <span
+                    translate-path='locale.demoSoundfontUploadButton'>Upload the soundfont</span>
+                    <input accept='.sf2,.sf3,.sfogg,.dls,.dlp' id='sf_file_input' type='file'><br />
+                </label>
+                <label class='link'>
+                    <a href='https://github.com/spessasus/SpessaSynth/archive/refs/heads/master.zip' target='_blank'
+                       translate-path='locale.demoDownload.main'></a>
+                </label>
+                <label class='link'>
+                    <a href='https://github.com/spessasus/SpessaSynth#readme' id='github_page'
+                       target='_blank'
+                       translate-path='locale.demoGithubPage'></a>
+                </label>
+            </div>
+        </div>
+        <div id='settings_div'>
+        </div>
+    </div>
+    <div class='show_top_button'></div>
+    <div id='keyboard_canvas_wrapper'>
+        <canvas id='note_canvas'></canvas>
+        <div id='keyboard'></div>
+    </div>
+    <div id='player_info'></div>
+    <div class='bottom_part'>
+        <div id='sequencer_controls'></div>
+    </div>
+    <div class='notification_field'></div>
+    <div class='ass_renderer_field'></div>
+</div>
+<!-- here the magic happens ;) -->
+<script src='demo_main.min.js' type='module'></script>
+<script src="patch.js"></script>
+</body>
+</html>

package-lock.json ADDED Viewed

	@@ -0,0 +1,12 @@

+{
+  "name": "SpessaSynth",
+  "version": "3.25.6",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "SpessaSynth",
+      "version": "3.25.6"
+    }
+  }
+}

package.json ADDED Viewed

	@@ -0,0 +1,9 @@

+{
+  "name": "SpessaSynth",
+  "version": "1.0",
+  "type": "module",
+  "scripts": {
+    "start": "node src/website/server/server.js",
+    "build": "src/website/minify_website.sh"
+  }
+}

patch.js ADDED Viewed

	@@ -0,0 +1,107 @@

+function base64ToUrl(base64, mimeType = '') {
+    // Split the base64 string if it contains a data URL prefix
+    const [prefix, data] = base64.includes(',') ? base64.split(',') : ['', base64];
+    // Try to extract the MIME type from the prefix if not provided
+    const mime = mimeType || (prefix.match(/data:(.*?);base64/) || [])[1] || 'application/octet-stream';
+    // Decode base64 to raw binary data
+    const binary = atob(data);
+    const len = binary.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    // Create a blob and generate a URL
+    const blob = new Blob([bytes], { type: mime });
+    return URL.createObjectURL(blob);
+  }
+function getElementByXpath(path, timeout = 5000) {
+    return new Promise((resolve, reject) => {
+        const intervalTime = 500;
+        let elapsedTime = 0;
+        const interval = setInterval(() => {
+            let node = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+            if (node) {
+                clearInterval(interval);
+                resolve(node);
+            }
+            elapsedTime += intervalTime;
+            if (elapsedTime >= timeout) {
+                clearInterval(interval);
+                reject(new Error(`XPath "${path}" not found within ${timeout}ms`));
+            }
+        }, intervalTime);
+    });
+}
+async function uploadFileFromURL(url, filename, file_element) {
+    try {
+        if (!file_element) throw new Error("File input element not found.");
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`Failed to fetch file: ${response.statusText}`);
+        const blob = await response.blob();
+        const newFile = new File([blob], filename, { type: blob.type });
+        const dataTransfer = new DataTransfer();
+        if (file_element.multiple) {
+            for (const file of file_element.files) {
+                dataTransfer.items.add(file);
+            }
+        }
+        dataTransfer.items.add(newFile);
+        file_element.files = dataTransfer.files;
+        file_element.dispatchEvent(new Event("change", { bubbles: true }));
+    } catch (error) {
+        console.error("Error:", error);
+    }
+}
+function waitForElement(selector, timeout = 5000) {
+    return new Promise((resolve, reject) => {
+        const intervalTime = 500;
+        let elapsedTime = 0;
+        const interval = setInterval(() => {
+            const element = document.querySelector(selector);
+            if (element) {
+                clearInterval(interval);
+                resolve(element);
+            }
+            elapsedTime += intervalTime;
+            if (elapsedTime >= timeout) {
+                clearInterval(interval);
+                reject(new Error(`Element "${selector}" not found within ${timeout}ms`));
+            }
+        }, intervalTime);
+    });
+}
+document.addEventListener("DOMContentLoaded", function () {
+    getElementByXpath("//*[text()='Hide top bar']", 5000)
+        .then((node) => {
+            node.scrollIntoView();
+            node.click();
+            return waitForElement("#midi_file_input");
+        })
+        .then((file_upload) => {
+            if (!file_upload) throw new Error("File input element not found.");
+            // Wait for stability before proceeding
+            return new Promise(resolve => setTimeout(() => resolve(file_upload), 500));
+        })
+        .then((file_upload) => {
+            return waitForElement(".show_top_button").then((node) => {
+                node.remove();
+                selector = document.getElementById("renderer_mode_selector");
+                selector.selectedIndex = 2;
+                selector.dispatchEvent(new Event('change'));
+                // return uploadFileFromURL("/output.mid", "output.mid", file_upload);
+            });
+        })
+        .catch((error) => {
+            console.error("Error:", error);
+        });
+});

style.min.css ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ .settings_slider_wrapper{display:flex;align-items:center;width:100%;justify-content:center;margin-top:.5rem!important;position:relative;--track-height: .8rem;--thumb-size: 1.5rem;--active-brightness: .75;--slider-border-thickness: 1px}.settings_visual_wrapper{--visual-width: 0%;display:flex;position:relative;margin:0 1rem 0 0;flex-grow:1;height:var(--track-height);transition:all .1s;cursor:e-resize;background:var(--track-color);border:solid var(--slider-border-thickness) var(--track-border-color);border-radius:var(--track-height)}.settings_visual_wrapper:has(.settings_slider:active){filter:brightness(var(--active-brightness))}.settings_slider{cursor:e-resize;width:100%;opacity:0;-webkit-appearance:none;top:calc((var(--thumb-size) / 4) * -1);height:var(--thumb-size);position:relative}.settings_slider:hover{filter:brightness(1.2)}.settings_slider:focus{outline:none}.settings_slider+span{margin-bottom:1rem}.settings_slider+span{min-width:5em;text-align:center}.settings_slider_progress{width:calc(var(--visual-width) + 2 * var(--slider-border-thickness));position:absolute;background:var(--primary-color);border:solid var(--slider-border-thickness) var(--border-color);height:calc(100% + 2 * var(--slider-border-thickness));border-radius:var(--track-height);top:calc(-1 * var(--slider-border-thickness));left:calc(-1 * var(--slider-border-thickness))}.settings_slider_thumb{border:solid var(--slider-border-thickness) var(--track-border-color);background:var(--track-color);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:absolute;top:-.4rem;left:calc(var(--visual-width) - var(--thumb-size) / 2)}.settings_slider_wrapper:hover .settings_slider_thumb{border-color:var(--primary-color)}.settings_slider_transition .settings_slider_thumb,.settings_slider_transition .settings_slider_progress{transition:all .2s ease}.seamless_button{font-size:larger;background:transparent;margin:auto;border:none;-webkit-user-select:none;user-select:none}.settings_button{display:flex;align-items:center;justify-content:center}.settings_button span{text-align:end;font-size:larger}.seamless_button:hover{cursor:pointer;text-shadow:0 0 5px white}.gear{transition:all .3s ease;padding:5px;align-content:center;align-items:center;justify-content:center;display:flex;height:0}.settings_button:hover .gear{transform:rotate(45deg)}.settings_groups_parent{display:flex;flex-wrap:wrap;justify-content:space-evenly}.settings_group{border-radius:var(--settings-border-radius);border:solid #333 1px;margin:1em;padding:1em;background:var(--top-buttons-color);transition:.2s;max-height:45rem;overflow-y:auto}.settings_group:hover{filter:brightness(1.2);box-shadow:0 0 5px var(--top-buttons-color-end)}.settings_group label,.settings_group p{margin-top:1em;display:block}.settings_group .error_message{color:red;max-width:20ch;white-space:wrap;margin:1.5rem auto auto}.switch_label{display:flex;justify-content:space-between;margin-top:1em}.switch_label label{margin-right:1em;font-size:large}.switch input{display:none}.switch{--track-height: 1.6rem;--track-width: 2.2rem;--thumb-size: 1.5rem;--track-radius: .3em;position:relative;display:inline-block;width:var(--track-width);height:var(--track-height)}.switch_slider{position:absolute;cursor:pointer;inset:50% 0 0;background-color:var(--track-color);border:solid var(--track-border-color) 1px;transition:.2s;border-radius:var(--track-radius);transform:translateY(-50%)}.switch_slider:before{position:absolute;content:"";height:var(--thumb-size);width:var(--thumb-size);left:calc(var(--thumb-size) / -4);top:50%;transform:translateY(-50%);background-color:var(--track-color);transition:.2s var(--bouncy-transition),border .1s;border-radius:50%;border:solid var(--track-border-color) 1px;box-shadow:0 0 .125rem #0003}.switch_slider:hover:before{border:solid var(--border-color) 1px;filter:brightness(1.2)}input:checked+.switch_slider{background-color:var(--primary-color);border:var(--border-color) 1px solid}input:checked+.switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .66),-50%)}.switch:active .switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * 1.2),-50%)}.switch:active input:checked+.switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .95),-50%)}.settings_menu{--settings-border-radius: 1rem;position:absolute;top:100%;right:0;min-width:30%;max-width:100%;min-height:100%;z-index:256;transform:scaleX(0);background:var(--top-color);transition:transform .2s ease;scroll-behavior:smooth;overflow-y:auto;display:none;border-radius:0 0 var(--settings-border-radius) var(--settings-border-radius)}.settings_menu_show{display:block!important;transform:scaleX(1)!important}.settings_menu {-webkit-user-select:none;user-select:none}.settings_menu select{background:transparent;border:solid 1px transparent;font-size:larger;border-radius:var(--settings-border-radius);padding:.5rem}.settings_menu select option{background:#000;color:#fff;border:none}.settings_menu select:hover{cursor:pointer;text-shadow:0 0 5px white;border:1px solid var(--top-buttons-color-end);background:var(--top-buttons-color)}.settings_menu .hover_reminder{width:25ch;white-space:wrap;margin:1rem auto 0}.settings_menu .hover_reminder:hover{cursor:pointer;text-shadow:0 0 5px white}#keyboard .key{-webkit-user-select:none;user-select:none;touch-action:none;flex:1;transition:transform .1s ease,border-radius .5s ease;border-radius:0 0 var(--key-border-radius) var(--key-border-radius);position:relative;transform-origin:center top;--pressed-transform-skew: .0007;--pressed-transform: matrix3d( 1, 0, 0, 0, 0, 1, 0, var(--pressed-transform-skew), 0, 0, 1, 0, 0, 0, 0, 1);cursor:default;--flat-half-width: 1.4;--flat-half-translate: 18%;--sharp-transform: scale(1, .7);--flat-between-transform: scale(1.9, 1);--flat-left-transform: scale(var(--flat-half-width), 1) translateX(calc(var(--flat-half-translate) -1));--flat-right-transform: scale(var(--flat-half-width), 1) translateX(var(--flat-half-translate))}#keyboard.sideways .key{border-radius:var(--key-border-radius) 0 0 var(--key-border-radius)!important;transform-origin:right center!important;--pressed-transform: matrix3d( 1, 0, 0, calc(var(--pressed-transform-skew) * -1), 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) !important;--sharp-transform: scale(.7, 1) !important;--flat-between-transform: scale(1, 1.9) !important;--flat-left-transform: scale(1, var(--flat-half-width)) translateY(calc(var(--flat-half-translate) * -1)) !important;--flat-right-transform: scale(1, var(--flat-half-width)) translateY(var(--flat-half-translate)) !important}#keyboard .flat_key{background:linear-gradient(90deg,#bbb,#fff);z-index:1}#keyboard .flat_dark_key{background:linear-gradient(100deg,#111,#000)}#keyboard .sharp_key{transform:var(--sharp-transform);z-index:10;background:linear-gradient(140deg,#222,#000)}#keyboard .flat_key.between_sharps{transform:var(--flat-between-transform)}#keyboard .flat_key.left_sharp{transform:var(--flat-left-transform)}#keyboard .flat_key.right_sharp{transform:var(--flat-right-transform)}.sharp_key.pressed{transform:var(--sharp-transform) var(--pressed-transform)!important}.flat_key.between_sharps.pressed{transform:var(--flat-between-transform) var(--pressed-transform)!important}.flat_key.left_sharp.pressed{transform:var(--flat-left-transform) var(--pressed-transform)!important}.flat_key.right_sharp.pressed{transform:var(--flat-right-transform) var(--pressed-transform)!important}#keyboard{-webkit-user-select:none;user-select:none;transition:var(--music-mode-transition) transform;display:flex;flex-wrap:nowrap;align-items:stretch;--current-min-height: 7;min-height:calc(var(--current-min-height) * 1vw);background:#000;width:100%;touch-action:none;transform-origin:bottom center;--key-border-radius: .4vmin}#keyboard.mode_transform{transform:translateY(250%)}#keyboard.sideways{min-height:unset;height:100%;width:unset;min-width:calc(var(--current-min-height) * 1vh);flex-direction:column}#sequencer_controls{width:80%;position:relative;margin:auto auto 2px;--progress-bar-height: 2rem;--sequi-border-radius: var(--primary-border-radius)}#sequencer_controls #note_progress{border-radius:var(--progress-bar-height);background:linear-gradient(185deg,#306,var(--primary-color));height:100%;transition:width .1s linear;position:absolute;left:0}#sequencer_controls .note_progress_light{filter:brightness(3)}#sequencer_controls #note_time{position:relative;font-size:calc(var(--progress-bar-height) * .8);line-height:var(--progress-bar-height);text-align:center;color:var(--font-color);margin:.5rem;width:100%}#sequencer_controls #note_time:hover{cursor:pointer}#sequencer_controls .control_buttons_wrapper{display:flex;align-items:center;justify-content:center}#sequencer_controls .control_buttons{position:relative;display:flex;transition:all .1s ease}#sequencer_controls .control_buttons:active{transform:scale(var(--active-scale))}#sequencer_controls .control_buttons:hover{cursor:pointer}#sequencer_controls .playback_rate_slider_wrapper{max-width:30ch;margin:auto}#sequencer_controls .playback_rate_slider_wrapper span{border:solid white 2px;border-radius:.2rem;padding:.2rem;width:4rem}#sequencer_controls #note_progress_background{border-radius:var(--progress-bar-height);background:linear-gradient(90deg,#454545,#343434);height:var(--progress-bar-height);position:absolute;width:100%;overflow:hidden}#sequencer_controls .note_progress_background_light{background:linear-gradient(90deg,#ddd,#bbb)!important}#sequencer_controls .lyrics{position:fixed;top:0;right:0;width:30em;min-width:30%;max-width:100%;height:75%;z-index:256;display:flex;flex-direction:column;transform:scaleX(0);background:var(--top-color);transition:all .2s ease;visibility:hidden;border-radius:var(--sequi-border-radius);--lyrics-text-size: larger}.lyrics_title_wrapper{background:transparent;top:0;border-radius:var(--sequi-border-radius)}.lyrics_selector{width:100%;border:none;font-size:1.3rem;padding:.5em;background:transparent}.lyrics_selector option{background:#000}.lyrics_show{transform:scaleX(1)!important;visibility:visible!important}.lyrics_text{scroll-behavior:smooth;overflow-y:auto;max-height:80%;margin-left:3rem;margin-right:3rem;flex:2}.lyrics_text_gray{opacity:.5;font-size:var(--lyrics-text-size);font-weight:700}.lyrics_text_highlight{font-weight:700;color:var(--font-color);font-size:var(--lyrics-text-size)}.lyrics details{overflow:scroll}.lyrics details summary{position:fixed;width:100%;text-align:center}.lyrics details div{margin-top:2rem;line-height:2rem}.lyrics details pre,.lyrics details i{display:inline}.lyrics .general_button{margin-top:1.5rem;max-width:fit-content;margin-left:auto;margin-right:auto}#player_info{width:100%;display:none;flex:1;align-items:center;justify-content:center;transform:translate(100%);transition:var(--music-mode-transition) transform}#player_info_background_image{width:100%;height:100%;position:absolute;background-position:center;background-repeat:no-repeat;background-size:cover;filter:blur(1rem);--bg-image: "undefined";background-image:var(--bg-image);z-index:-100;left:0}.player_info_note_icon img{max-width:100%;border-radius:1rem;width:20rem}.player_info_wrapper{display:flex;border-radius:1rem;align-items:center;max-width:90%;backdrop-filter:brightness(.3) blur(50px);flex-wrap:wrap;justify-content:center}.player_info_wrapper.light_mode{backdrop-filter:brightness(1.8) blur(50px)!important}.player_info_note_icon{margin:1rem}#player_info_detail{white-space:preserve;text-align:start}.player_info_detail_element{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;margin:.2rem}.player_info_detail_element {display:inline-block}.player_info_detail_element b{margin-right:1ch;align-self:start}.player_info_detail_element i{text-align:end}.player_info_detail_element.hidden{display:none}.player_info_details_wrapper{max-width:100%;padding:1rem;display:flex;flex-direction:column}.marquee{overflow:hidden;max-width:30ch;white-space:nowrap}.marquee span{white-space:nowrap;padding-left:100%;animation:15s linear infinite marquee}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.player_info_wrapper {text-align:center}.player_info_show{transform:translate(0)!important}.voice_meter{cursor:not-allowed;border-width:1px;border-style:solid;border-color:var(--border-color);min-width:7em;overflow:hidden}.voice_meter.editable{cursor:e-resize}.voice_meter .voice_meter_bar{position:relative;display:block;height:100%;margin-top:auto;background-color:var(--primary-color)}.voice_meter_light_color{filter:brightness(1.4)}.voice_meter_bar_smooth{transition:width ease-in-out .1s}.voice_meter .voice_meter_text{position:absolute;z-index:1;height:var(--voice-meter-height);line-height:var(--voice-meter-height);top:0;width:100%;text-align:center;text-shadow:1px 1px 2px #000;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice_meter .voice_meter_text_light{color:#000}.locked_meter{border-radius:0!important}.locked_meter p{font-weight:700;font-style:italic;color:red}.voice_selector{border:#777 1px solid;line-height:var(--voice-meter-height);background:var(--synthui-background);font-size:1em;font-weight:700;min-width:8em;text-align-last:center;white-space:nowrap;overflow:hidden}select.voice_selector{text-overflow:ellipsis}.voice_selector_light{border:#111 1px solid;background:linear-gradient(170deg,#bbb,#fff);color:#000}.voice_selector:hover{cursor:pointer;background:#111;color:#fff;text-shadow:0 0 5px white}.voice_selector_light:hover{background:#fff;color:#444}.selector_options:hover{display:block}.locked_selector{color:red}.voice_reset{min-width:var(--voice-meter-height);display:flex;justify-content:center;align-items:center;border:solid 1px #333;background:var(--top-color);padding:var(--primary-border-radius);border-radius:var(--primary-border-radius);margin:.1rem;transition:min-width 50ms ease;cursor:pointer}.voice_reset:active{filter:brightness(.8);transform:scale(var(--active-scale))}.voice_reset:hover svg{transform:scale(1.1) rotate(5deg)}.voice_reset_light {color:#000}.voice_selector_wrapper{position:fixed;z-index:calc(var(--top-index) - 20);backdrop-filter:brightness(.9) blur(2px);width:100%;height:100%;margin:0;padding:0;top:0;display:flex;justify-content:center;align-items:center}.voice_selector_window{padding:1rem;border-radius:var(--primary-border-radius);background:var(--top-color);color:var(--font-color);display:flex;flex-direction:column;max-width:90%;max-height:90%}.voice_selector_search_wrapper{display:flex;margin:1rem}.voice_selector_window input{border:solid 1px #333;font-size:1rem;margin:.1rem;padding:var(--primary-border-radius);border-radius:var(--primary-border-radius);background:var(--top-color);color:var(--font-color);flex:1}.voice_selector_table_wrapper{max-height:70vh;overflow-y:scroll;overflow-x:hidden;padding:1rem}.voice_selector_table{width:100%;font-size:1.1rem;padding:.5rem;border-collapse:collapse}.voice_selector_table th{filter:none!important;text-align:start;line-height:2rem}.voice_selector_preset_name{text-align:end;display:block}.voice_selector_table tr{transition:all 50ms ease;border-radius:var(--primary-border-radius)}.voice_selector_table tr:has(td:hover){background:var(--primary-color);cursor:pointer}.voice_selector_selected{background:var(--border-color)!important}.synthui_button{background:#000;border:1px #333 solid;margin:var(--synthui-margin);border-radius:var(--synthui-border-radius);font-size:1em;min-height:var(--voice-meter-height);white-space:nowrap;color:var(--font-color);flex:1;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.synthui_button:hover,.synthui_button.enabled{cursor:pointer;background:#111;color:#fff;text-shadow:0 0 5px white}.synthui_button:active{filter:brightness(.9);transform:scale(var(--active-scale))}.synthui_button_light{border-radius:var(--synthui-border-radius);background:#fff;border:1px #ccc solid;margin:var(--synthui-margin);font-size:1em;min-height:var(--voice-meter-height);white-space:nowrap;color:#333;flex:1;text-shadow:1px 1px 2px #000;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.synthui_button_light:hover{cursor:pointer;color:#666;text-shadow:0 0 5px #666}.synthui_button_light:active{filter:brightness(.9);transform:scale(var(--active-scale))}#synthetizer_controls{--voice-meter-height: 2.5em;--synthui-background: rgba(0, 0, 0, .8);--synthui-border-radius: var(--primary-border-radius)}#synthetizer_controls {user-select:none;-webkit-user-select:none;--synthui-margin: .2em}.wrapper{height:80%;padding:2%;display:flex;flex-wrap:wrap;justify-content:space-evenly}.controls_wrapper{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;margin:1em}.main_controller_element{margin-left:.5em;margin-right:.5em}.controller_element{position:relative;height:var(--voice-meter-height);flex:1;border-radius:var(--synthui-border-radius);margin:var(--synthui-margin)}.synthui_controller{left:0;display:none;position:absolute;background:var(--synthui-background);backdrop-filter:blur(.3rem);top:100%;border-radius:0 0 1em 1em;transform:scaleX(0);transition:transform .2s ease;width:100%;z-index:127;padding:.5em}.synthui_controller_light{background:linear-gradient(115deg,#c8c8c8,#fff,#c8c8c8)!important}.synthui_controller_show{transform:scaleX(1)!important}.channel_controller{display:flex;align-items:stretch;flex-wrap:wrap;transition:.2s ease}.channel_controller.no_voices{filter:brightness(.8)}.mute_button{flex:0;display:flex;justify-content:center;align-items:center;border:#777 1px solid;min-width:var(--voice-meter-height)}.mute_button_light {color:#000}.mute_button svg{transition:transform .2s ease}.mute_button:active{filter:brightness(.8);transform:scale(var(--active-scale))}.mute_button:hover{cursor:pointer}.mute_button:hover svg{transform:scale(1.1) rotate(5deg)}.mute_button:hover path{filter:drop-shadow(0 0 1px currentColor)}.soundfont_mixer{top:100%;position:absolute;background:var(--top-color);padding:.5em;border-radius:0 0 1em 1em;width:50%;left:25%;margin:auto;min-width:fit-content}.soundfont_mixer_list{margin:1em;border-radius:.3em;min-height:4em}.soundfont_mixer .soundfont_entry{background:var(--top-buttons-color);margin:.2em;border-radius:var(--primary-border-radius);text-align:start;width:fit-content;display:flex;padding:.3em;justify-content:center}.soundfont_mixer .soundfont_entry_wrapper{display:flex;justify-content:space-between}.soundfont_mixer .soundfont_entry_button:hover{cursor:pointer}.soundfont_mixer .action_buttons_wrapper{display:flex;justify-content:space-between}.notification button,.notification_file_button{background:var(--top-color);padding:.5rem;border:solid 1px #333;margin:.5rem;cursor:pointer;border-radius:var(--notification-border-radius);font-size:var(--notification-font-size);min-width:fit-content;transition:transform .1s ease}.notification button:active,.notification_file_button:active{transform:scale(var(--active-scale))}.notification .green_button{color:green;border-color:green}.notification p{margin:auto;padding:.8rem;font-size:var(--notification-font-size)}.notification label{font-size:var(--notification-font-size)}.notification_input_wrapper{display:flex;justify-content:space-between;align-items:center;margin:.5rem}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.notification input[type=number],.notification input[type=text],.notification select{display:block;background:var(--top-buttons-color);border:solid 1px #333;font-size:1em;padding:var(--notification-border-radius);border-radius:var(--notification-border-radius);width:5rem;-moz-appearance:textfield}.notification input[type=text],.notification select{width:auto!important}.notification_slider_wrapper{display:flex;justify-content:space-between;margin:.5rem}.notification_slider_wrapper label{margin-right:2rem}.notification_slider_wrapper .settings_visual_wrapper{margin:0!important}.notification_slider_wrapper .settings_slider_wrapper{width:auto!important}.notification .notification_progress_background{height:1rem;margin:1rem;background:var(--track-color);border:solid 1px var(--track-border-color);border-radius:1rem;box-sizing:content-box}.notification .notification_progress{height:100%;width:0;background:var(--primary-color);border:solid 1px var(--border-color);border-radius:1rem;top:-1px;left:-1px;position:relative;transition:.1s width ease;box-sizing:content-box}.notification_switch_wrapper{display:flex;justify-content:space-between;align-items:center;margin:.5rem}.notification_switch input{display:none}.notification_switch{--track-height: 1.6rem;--track-width: 2.2rem;--thumb-size: 1.5rem;--track-radius: .3em;position:relative;display:inline-block;width:var(--track-width);height:var(--track-height)}.notification_switch_slider{position:absolute;cursor:pointer;inset:50% 0 0;background-color:var(--track-color);border:solid var(--track-border-color) 1px;transition:.2s;border-radius:var(--track-radius);transform:translateY(-50%)}.notification_switch_slider:before{position:absolute;content:"";height:var(--thumb-size);width:var(--thumb-size);left:calc(var(--thumb-size) / -4);top:50%;transform:translateY(-50%);background-color:var(--track-color);transition:.2s var(--bouncy-transition),border .1s;border-radius:50%;border:solid var(--track-border-color) 1px;box-shadow:0 0 .125rem #0003}.notification_switch_slider:hover:before{border:solid var(--border-color) 1px;filter:brightness(1.2)}input:checked+.notification_switch_slider{background-color:var(--primary-color);border:var(--border-color) 1px solid}input:checked+.notification_switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) .66),-50%)}.notification_field{position:absolute;padding:0;width:100%;display:flex;margin:1rem 0 0;align-items:baseline;justify-content:center}.notification{--notification-border-radius: var(--primary-border-radius);--notification-font-size: 1.3rem;position:absolute;background:var(--top-color);color:var(--font-color);border:solid 1px #333;border-radius:var(--notification-border-radius);display:flex;justify-content:center;flex-direction:column;align-items:center;font-size:large;z-index:var(--top-index);left:50%;transform:translate(-50%,-5rem);transition:transform .5s ease,opacity .5s ease;opacity:0;animation-duration:.5s;animation-fill-mode:forwards;box-shadow:#333 0 0 10px;width:max-content;max-width:100%}.notification.drop{opacity:1;transform:translate(-50%)}.notification .top{width:100%;display:flex;justify-content:space-between;border-bottom:solid 1px #555;align-items:center}.notification h2{text-align:start;line-height:2rem;margin:1rem}.notification_content{margin:1rem;min-width:90%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center}.notification .close_btn{text-align:end;font-weight:bolder;font-size:2rem;margin-right:1rem}.notification .close_btn:hover{cursor:pointer}#note_canvas{width:100%;filter:saturate(1.23);flex:1;background-size:cover;min-height:0;z-index:1}#note_canvas.sideways{height:100%!important;min-height:unset!important}#note_canvas.light_mode{background:linear-gradient(45deg,var(--top-buttons-color-start),var(--top-buttons-color-end))}.top_part{--top-part-border-radius: 1.5rem;position:relative;background:var(--top-color);border-radius:0 0 var(--top-part-border-radius) var(--top-part-border-radius);padding:3px;display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;align-items:center;z-index:50;transform-origin:top;transform:scaleY(1);transition:var(--hide-top-duration) ease}.top_part {user-select:none;-webkit-user-select:none}.top_part_hidden{position:fixed;width:100%;transform:scaleY(0)}.top_part.settings_shown{border-radius:0 0 0 var(--top-part-border-radius)}.top_part.synthui_shown{border-radius:0}input[type=file]{display:none}#title.sysex_display{font-family:monospace;font-style:normal!important}#title.xg_sysex_display{max-width:16ch!important;word-break:break-all;text-align:start!important;white-space:pre-wrap!important}#title{user-select:text;position:relative;z-index:1;margin:.2em auto;display:block;line-height:100%;font-weight:400;text-shadow:0 0 5px var(--font-color);font-size:2rem}#progress_bar{background:#206;display:block;position:absolute;width:0;height:2.1em;border-radius:var(--primary-border-radius);margin-left:auto;margin-right:auto;margin-top:.4em;padding-top:5px;padding-bottom:5px;top:0;left:0;right:0;z-index:0;transition:width ease .5s}.midi_and_sf_controller{position:relative;display:flex;width:fit-content;margin:auto auto 5px;flex-wrap:wrap;justify-content:space-around}.midi_and_sf_controller label,.general_button{padding:6px;border-radius:var(--primary-border-radius);cursor:pointer;background:var(--top-buttons-color);font-weight:bolder;margin:5px;display:flex;align-items:center;justify-content:center;transition:all .1s ease;border:none}.link a{color:#9acd32}.midi_and_sf_controller label:active,.general_button:active{filter:brightness(.9);transform:scale(var(--active-scale))}#sf_selector option{background:#000;text-align:center}#sf_selector{display:block;border:none;font-size:1em;background:var(--top-buttons-color);text-align:center;margin:5px;padding:6px;border-radius:var(--primary-border-radius);font-weight:bolder}.show_top_button{background:var(--top-buttons-color);width:fit-content;padding:.1em 2em;border-radius:0 0 var(--primary-border-radius) var(--primary-border-radius);transition:all calc(var(--hide-top-duration) 2) var(--bouncy-transition);transition-delay:calc(var(--hide-top-duration) / 2);transform-origin:top;margin:auto;display:none;opacity:0;position:absolute;z-index:100;left:0;right:0;cursor:pointer}.show_top_button:hover{filter:brightness(1.1);transform:scaleY(1.3)}.show_top_button.shown{opacity:1}#keyboard_canvas_wrapper{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;transition:var(--music-mode-transition) transform}#keyboard_canvas_wrapper.out_animation{transform:translate(-100%)}#keyboard_canvas_wrapper.upwards{flex-direction:column-reverse}#keyboard_canvas_wrapper.right_to_left{flex-direction:row}#keyboard_canvas_wrapper.left_to_right{flex-direction:row-reverse}*{--top-buttons-color-start: #222;--top-buttons-color-end: #333;--top-buttons-color: linear-gradient(201deg, var(--top-buttons-color-start), var(--top-buttons-color-end));--hide-top-duration: .2s;--font-color: #ccc;--top-index: 32767;--top-color-start: #101010;--top-color-end: #212121;--top-color: linear-gradient(31deg, var(--top-color-start), var(--top-color-end));--primary-border-radius: .5rem;--active-scale: .9;--bouncy-transition: cubic-bezier(.68, -.55, .27, 1.55);--music-mode-transition: .5s ease;font-family:system-ui,Noto Sans,Open Sans,sans-serif;color:var(--font-color);text-align:center;margin:0;box-sizing:border-box}select option{background:var(--top-color-start);color:var(--font-color)}pre{font-family:monospace!important}html,body{height:100lvh;width:100%;background:#000;overflow-x:clip;scrollbar-width:thin}body.load{transition:background .2s}body.no_scroll,html.no_scroll{max-height:100%!important;height:100%!important;overflow:hidden!important}.spessasynth_main{display:flex;flex-direction:column;height:100%;--primary-color: #510087;--border-color: #6e00b7;--track-color: #333;--track-border-color: #444;--shadow-color: #000}.spessasynth_main.light_mode{--primary-color: #a93bff;--border-color: #510087;--track-color: #ccc;--track-border-color: #444;--shadow-color: #fff}a{text-decoration:none;color:#546fff}::-webkit-scrollbar{background-color:#000;width:.3em}::-webkit-scrollbar-thumb{background-color:#777;border-radius:50px}.bottom_part{margin-top:5px}button{-webkit-user-select:none;user-select:none}.hidden{display:none!important}.secret_video{position:absolute;width:100%;left:0;z-index:0}.drop_prompt{flex-direction:column;display:flex;justify-content:center;align-items:center;position:fixed;width:100%;height:100%;z-index:var(--top-index);background:#0009}.loading{flex-direction:column;display:flex;justify-content:center;align-items:center;position:fixed;width:100%;height:100%;z-index:var(--top-index);left:0;background:var(--top-color);transition:all 1s var(--bouncy-transition);cursor:wait}.loading .loading_icon{max-width:100%;max-height:100%;margin:1em;animation:spin 1s ease-in-out infinite}.loading.done{transform:translateY(-100%)}.ass_renderer_field{width:100%;height:100%;padding:0;display:block;margin:0;overflow:hidden;z-index:calc(var(--top-index) + 5);pointer-events:none;position:fixed}.ass_renderer_element{position:absolute;pointer-events:none;padding:0 .2rem;z-index:9999;white-space:break-spaces;width:max-content;max-width:100%;background:#000c;margin:0}.ass_renderer_element span{font-family:inherit;font-size:inherit}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
2	+ /# sourceMappingURL=style.min.css.map /

use.js ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ await uploadFileFromURL(base64ToUrl("TVRoZAAAAAYAAQABAeBNVHJrAAACbwD/UQMHoSAAkEVkQoBFAACQRGSDDIBEAACQPGRCgDwAAJBAZCyAQAAAkENkLIBDAACQPGRCgDwAAJBEZCyARAAAkDtkboA7AACQOmRCgDoAAJA4ZEKAOAAAkDxkQoA8AACQO2RugDsAAJA6ZIMigDoAAJA5ZIEEgDkAAJA4ZCyAOAAAkDlkQoA5AACQOWRCgDkAAJA6ZIEEgDoAAJA7ZIJggDsAAJA6ZEKAOgAAkDlkkQKAOQAAkDhkboA4AACQOWRYgDkAAJA6ZIIegDoAAJA7ZIEagDsAAJA6ZIFGgDoAAJA5ZINkgDkAAJA3ZFiANwAAkDpkboA6AACQOWSDZIA5AACQOWRCgDkAAJA2ZFiANgAAkDlkQoA5AACQOGQsgDgAAJA+ZFiAPgAAkEVkboBFAACQPmQsgD4AAJBTZEKAUwAAkFhkQoBYAACQWmRCgFoAAJBOZG6ATgAAkFhkLIBYAACQOmRYgDoAAJA5ZCyAOQAAkDhkboA4AACQOWSBcoA5AACQOGRCgDgAAJA3ZCyANwAAkDpkWIA6AACQOWSEPIA5AACQOmQsgDoAAJA7ZG6AOwAAkDpkgQSAOgAAkDtkboA7AACQOmSBBIA6AACQO2RugDsAAJA8ZFiAPAAAkD1kQoA9AACQRGRYgEQAAJA9ZIFGgD0AAJA8ZEKAPAAAkDtkQoA7AACQPGSDDIA8AACQPWQsgD0AAJBKZFiASgAAkDRkgmCANAAAkD1kboA9AACQSmRYgEoAAJA8ZIEEgDwAAJA7ZFiAOwAAkDpkWIA6AACQO2RYgDsAAJA6ZCyAOgAAkDlkixaAOQAA/y8A"), "output.mid", document.getElementById("midi_file_input"))
2	+ await uploadFileFromURL(base64ToUrl("sf2filebase64"), "music.sf2", document.getElementById("sf_file_input"))

violin.sf2 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:e7fb3896920bd5b10d4c0b5bb60579f9498c29849855a74c4cae557d80bb1871
+size 15368514

worklet_processor.min.js ADDED Viewed

The diff for this file is too large to render. See raw diff