Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <style> | |
| #midi-section midi-player { | |
| display: block; | |
| width: inherit; | |
| margin: 4px; | |
| margin-bottom: 0; | |
| } | |
| #midi-section midi-player::part(control-panel) { | |
| background: #ff5; | |
| border: 2px solid #000; | |
| border-radius: 10px 10px 0 0; | |
| } | |
| #midi-section midi-player::part(play-button) { | |
| color: #353; | |
| border: 2px solid currentColor; | |
| background-color: #4d4; | |
| border-radius: 20px; | |
| transition: all 0.2s; | |
| content: "hello"; | |
| } | |
| #midi-section midi-player::part(play-button):hover { | |
| color: #0a0; | |
| background-color: #5f5; | |
| border-radius: 10px; | |
| } | |
| #midi-section midi-player::part(time) { | |
| font-family: monospace; | |
| } | |
| #midi-section midi-visualizer .piano-roll-visualizer { | |
| background: #ffd; | |
| border: 2px solid black; | |
| border-top: none; | |
| border-radius: 0 0 10px 10px; | |
| margin: 4px; | |
| margin-top: 0; | |
| overflow: auto; | |
| } | |
| #midi-section midi-visualizer svg rect.note { | |
| opacity: 0.6; | |
| stroke-width: 2; | |
| } | |
| #midi-section midi-visualizer svg rect.note[data-instrument="0"] { | |
| fill: #e22; | |
| stroke: #500; | |
| } | |
| #midi-section midi-visualizer svg rect.note[data-instrument="2"] { | |
| fill: #2ee; | |
| stroke: #055; | |
| } | |
| #midi-section midi-visualizer svg rect.note[data-is-drum="true"] { | |
| fill: #888; | |
| stroke: #888; | |
| } | |
| #midi-section midi-visualizer svg rect.note.active { | |
| opacity: 0.9; | |
| stroke: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section id="midi-section"><midi-player sound-font="" visualizer="#midi-section midi-visualizer"></midi-player><midi-visualizer></midi-visualizer></section> | |
| <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> | |
| </body> | |
| <script> | |
| function base64ToBlobUrl(base64, mimeType = "audio/midi") { | |
| const byteCharacters = atob(base64.split(",")[1] || base64); | |
| const byteNumbers = new Array(byteCharacters.length); | |
| for (let i = 0; i < byteCharacters.length; i++) { | |
| byteNumbers[i] = byteCharacters.charCodeAt(i); | |
| } | |
| return URL.createObjectURL(new Blob([new Uint8Array(byteNumbers)], { type: mimeType })); | |
| } | |
| let midi_data = "{midi_data}"; | |
| document.querySelector("midi-player").src = base64ToBlobUrl(midi_data); | |
| </script> | |
| </html> |