Spaces:

namelessai
/

notation-editor

Running

App Files Files Community

namelessai commited on Apr 9, 2025

Commit

759be12

verified ·

1 Parent(s): 6f818d7

Update index.html

Browse files

Files changed (1) hide show

index.html +374 -19

index.html CHANGED Viewed

@@ -1,19 +1,374 @@
-<!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>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Modern Music Editor</title>
+    <script src="https://www.verovio.org/javascript/latest/verovio-toolkit.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/midi.js/0.3.0/midi.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
+    <style>
+        :root {
+            --primary: #1a1a1a;
+            --secondary: #2d2d2d;
+            --accent: #00ffdd;
+            --text: #ffffff;
+        }
+        body {
+            margin: 0;
+            padding: 20px;
+            background-color: var(--primary);
+            color: var(--text);
+            font-family: 'Arial', sans-serif;
+            min-height: 100vh;
+        }
+        .toolbar {
+            background: var(--secondary);
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            display: flex;
+            gap: 15px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            flex-wrap: wrap;
+        }
+        button {
+            background: linear-gradient(145deg, var(--accent), #00ccbb);
+            color: var(--primary);
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: bold;
+            min-width: 120px;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 2px 8px rgba(0, 255, 221, 0.4);
+        }
+        input[type="file"] {
+            display: none;
+        }
+        .editor-container {
+            background: var(--secondary);
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            overflow: auto;
+            margin-bottom: 20px;
+        }
+        #notation-container {
+            background: white;
+            border-radius: 5px;
+            min-height: 500px;
+            padding: 20px;
+            transition: transform 0.3s ease;
+        }
+        .status-bar {
+            padding: 10px;
+            background: var(--secondary);
+            border-radius: 5px;
+            color: var(--accent);
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+        }
+        svg {
+            width: 100%;
+            height: auto;
+        }
+        .controls {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            margin-left: auto;
+        }
+        input[type="range"] {
+            width: 150px;
+            accent-color: var(--accent);
+        }
+    </style>
+</head>
+<body>
+    <div class="toolbar">
+        <button onclick="document.getElementById('fileInput').click()">📁 Open MusicXML</button>
+        <button onclick="document.getElementById('midiInput').click()">🎹 Import MIDI</button>
+        <div class="controls">
+            <button id="playButton" onclick="togglePlay()">▶ Play</button>
+            <button onclick="stopPlayback()">⏹ Stop</button>
+            <input type="range" id="zoom" min="10" max="200" value="100">
+            <span id="zoomValue">100%</span>
+        </div>
+        <input type="file" id="fileInput" accept=".xml,.musicxml">
+        <input type="file" id="midiInput" accept=".mid,.midi">
+    </div>
+    <div class="editor-container">
+        <div id="notation-container"></div>
+    </div>
+    <div class="status-bar" id="status">
+        Ready
+    </div>
+    <script>
+        const vrvToolkit = new verovio.toolkit();
+        let midiSequence = [];
+        let isPlaying = false;
+        let currentBPM = 120;
+        // Initialize Verovio
+        vrvToolkit.setOptions({
+            scale: 50,
+            pageMarginTop: 20,
+            pageMarginBottom: 20,
+            pageMarginLeft: 20,
+            pageMarginRight: 20,
+            spacingStaff: 1.2
+        });
+        // Initialize Tone.js
+        const synth = new Tone.PolySynth(Tone.Synth, {
+            oscillator: { type: 'sine' },
+            envelope: {
+                attack: 0.02,
+                decay: 0.1,
+                sustain: 0.3,
+                release: 0.4
+            }
+        }).toDestination();
+        // Setup Transport
+        Tone.Transport.bpm.value = currentBPM;
+        // File Handlers
+        document.getElementById('fileInput').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) handleMusicXML(file);
+        });
+        document.getElementById('midiInput').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) handleMIDI(file);
+        });
+        async function handleMusicXML(file) {
+            try {
+                const xmlData = await readFile(file);
+                vrvToolkit.loadData(xmlData);
+                renderNotation();
+                updateStatus(`Loaded: ${file.name}`);
+            } catch (error) {
+                updateStatus(`Error loading MusicXML: ${error.message}`, true);
+            }
+        }
+        async function handleMIDI(file) {
+            try {
+                const arrayBuffer = await readFile(file, 'arrayBuffer');
+                MIDI.parse(arrayBuffer, function(midi) {
+                    midiSequence = processMIDI(midi);
+                    updateStatus(`Imported MIDI: ${file.name}`);
+                    convertMIDIToMusicXML(midi);
+                });
+            } catch (error) {
+                updateStatus(`Error loading MIDI: ${error.message}`, true);
+            }
+        }
+        function processMIDI(midiData) {
+            const tracks = [];
+            midiData.tracks.forEach(track => {
+                const notes = [];
+                let currentTime = 0;
+                track.forEach(event => {
+                    currentTime += event.deltaTime;
+                    if (event.type === "channel" && event.subtype === "noteOn") {
+                        notes.push({
+                            time: currentTime / midiData.header.ticksPerBeat,
+                            note: Tone.Frequency(event.noteNumber, "midi").toNote(),
+                            velocity: event.velocity / 127,
+                            duration: (event.duration || 1) / midiData.header.ticksPerBeat
+                        });
+                    }
+                });
+                tracks.push(notes);
+            });
+            return tracks;
+        }
+        function convertMIDIToMusicXML(midiData) {
+            // Basic conversion logic (simplified)
+            let xml = `<?xml version="1.0" encoding="UTF-8"?>
+            <!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 4.0 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd">
+            <score-partwise version="4.0">
+              <part-list>
+                <score-part id="P1">
+                  <part-name>MIDI Import</part-name>
+                </score-part>
+              </part-list>
+              <part id="P1">
+                <measure number="1">
+                  <attributes>
+                    <divisions>${midiData.header.ticksPerBeat}</divisions>
+                    <time>
+                      <beats>4</beats>
+                      <beat-type>4</beat-type>
+                    </time>
+                    <key>
+                      <fifths>0</fifths>
+                    </key>
+                    <clef>
+                      <sign>G</sign>
+                      <line>2</line>
+                    </clef>
+                  </attributes>`;
+            midiData.tracks[0].forEach(event => {
+                if (event.type === "channel" && event.subtype === "noteOn") {
+                    xml += `
+                  <note>
+                    <pitch>
+                      <step>${Tone.Frequency(event.noteNumber, "midi").toNote().slice(0, -1)}</step>
+                      <octave>${Tone.Frequency(event.noteNumber, "midi").toNote().slice(-1)}</octave>
+                    </pitch>
+                    <duration>${event.duration || 1}</duration>
+                    <type>quarter</type>
+                  </note>`;
+                }
+            });
+            xml += `
+                </measure>
+              </part>
+            </score-partwise>`;
+            vrvToolkit.loadData(xml);
+            renderNotation();
+        }
+        function togglePlay() {
+            if (!isPlaying) {
+                isPlaying = true;
+                document.getElementById('playButton').textContent = "⏸ Pause";
+                Tone.Transport.cancel();
+                midiSequence.forEach(track => {
+                    track.forEach(({ time, note, velocity, duration }) => {
+                        synth.triggerAttackRelease(
+                            note,
+                            duration,
+                            `+${time}`,
+                            velocity
+                        );
+                    });
+                });
+                Tone.Transport.start();
+                updateStatus("Playing...");
+            } else {
+                isPlaying = false;
+                document.getElementById('playButton').textContent = "▶ Play";
+                Tone.Transport.pause();
+                updateStatus("Paused");
+            }
+        }
+        function stopPlayback() {
+            isPlaying = false;
+            Tone.Transport.stop();
+            synth.releaseAll();
+            document.getElementById('playButton').textContent = "▶ Play";
+            updateStatus("Stopped");
+        }
+        function renderNotation() {
+            const svg = vrvToolkit.renderToSVG(1);
+            document.getElementById('notation-container').innerHTML = svg;
+        }
+        function updateStatus(message, isError = false) {
+            const statusBar = document.getElementById('status');
+            statusBar.textContent = message;
+            statusBar.style.color = isError ? '#ff4444' : var('--accent');
+        }
+        // Utility Functions
+        function readFile(file, readAs = 'text') {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = () => reject(new Error('Error reading file'));
+                if (readAs === 'arrayBuffer') {
+                    reader.readAsArrayBuffer(file);
+                } else {
+                    reader.readAsText(file);
+                }
+            });
+        }
+        // Zoom Control
+        document.getElementById('zoom').addEventListener('input', function(e) {
+            const scaleValue = parseInt(e.target.value);
+            vrvToolkit.setOptions({ scale: scaleValue / 2 });
+            renderNotation();
+            document.getElementById('zoomValue').textContent = `${scaleValue}%`;
+        });
+        // Initial Sample Score
+        vrvToolkit.loadData(`<?xml version="1.0" encoding="UTF-8"?>
+        <!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 4.0 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd">
+        <score-partwise>
+          <part-list>
+            <score-part id="P1">
+              <part-name>Sample</part-name>
+            </score-part>
+          </part-list>
+          <part id="P1">
+            <measure number="1">
+              <attributes>
+                <divisions>1</divisions>
+                <key>
+                  <fifths>0</fifths>
+                </key>
+                <time>
+                  <beats>4</beats>
+                  <beat-type>4</beat-type>
+                </time>
+                <clef>
+                  <sign>G</sign>
+                  <line>2</line>
+                </clef>
+              </attributes>
+              <note>
+                <pitch>
+                  <step>C</step>
+                  <octave>4</octave>
+                </pitch>
+                <duration>1</duration>
+                <type>quarter</type>
+              </note>
+            </measure>
+          </part>
+        </score-partwise>`);
+        renderNotation();
+    </script>
+</body>
+</html>