File size: 2,993 Bytes
7888f4e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
# @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
|