Spaces:
Running
Running
| # @title HTML helper | |
| import re | |
| import base64 | |
| def to_data_url(midi_filename): | |
| """ This is crucial for Colab/WandB support. Thanks to Scott Hawley!! | |
| https://github.com/drscotthawley/midi-player/blob/main/midi_player/midi_player.py | |
| """ | |
| with open(midi_filename, "rb") as f: | |
| encoded_string = base64.b64encode(f.read()) | |
| return 'data:audio/midi;base64,'+encoded_string.decode('utf-8') | |
| def to_youtube_embed_url(video_url): | |
| regex = r"(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)" | |
| return re.sub(regex, r"https://www.youtube.com/embed/\1",video_url) | |
| def create_html_from_midi(midifile): | |
| html_template = """ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Awesome MIDI Player</title> | |
| <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> | |
| <style> | |
| /* Background color for the section */ | |
| #proll {{background-color:transparent}} | |
| /* Custom player style */ | |
| #proll midi-player {{ | |
| display: block; | |
| width: inherit; | |
| margin: 4px; | |
| margin-bottom: 0; | |
| }} | |
| #proll midi-player::part(control-panel) {{ | |
| background: #D8DAE8; | |
| border-radius: 8px 8px 0 0; | |
| border: 1px solid #A0A0A0; | |
| }} | |
| /* Custom visualizer style */ | |
| #proll midi-visualizer .piano-roll-visualizer {{ | |
| background: #F7FAFA; | |
| border-radius: 0 0 8px 8px; | |
| border: 1px solid #A0A0A0; | |
| margin: 4px; | |
| margin-top: 2; | |
| overflow: auto; | |
| }} | |
| #proll midi-visualizer svg rect.note {{ | |
| opacity: 0.6; | |
| stroke-width: 2; | |
| }} | |
| #proll midi-visualizer svg rect.note[data-instrument="0"] {{ | |
| fill: #e22; | |
| stroke: #055; | |
| }} | |
| #proll midi-visualizer svg rect.note[data-instrument="2"] {{ | |
| fill: #2ee; | |
| stroke: #055; | |
| }} | |
| #proll midi-visualizer svg rect.note[data-is-drum="true"] {{ | |
| fill: #888; | |
| stroke: #888; | |
| }} | |
| #proll midi-visualizer svg rect.note.active {{ | |
| opacity: 0.9; | |
| stroke: #34384F; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <a href="{midifile}" target="_blank">Download MIDI</a> <br> | |
| <section id="proll"> | |
| <midi-player src="{midifile}" sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus" visualizer="#proll midi-visualizer"> | |
| </midi-player> | |
| <midi-visualizer src="{midifile}"> | |
| </midi-visualizer> | |
| </section> | |
| </div> | |
| </body> | |
| </html> | |
| """.format(midifile=midifile) | |
| html = f"""<iframe style="width: 100%; height: 400px; overflow:auto" srcdoc='{html_template}'></iframe>""" | |
| return html | |
| def create_html_youtube_player(youtube_url): | |
| youtube_url = to_youtube_embed_url(youtube_url) | |
| html = f"""<iframe width="560" height="315" src='{youtube_url}' title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>""" | |
| return html | |