Spaces:
Running
Running
File size: 4,275 Bytes
7888f4e acbafd7 7888f4e acbafd7 7888f4e b02ed14 7888f4e b02ed14 7888f4e acbafd7 7888f4e acbafd7 7888f4e b02ed14 acbafd7 7888f4e b02ed14 acbafd7 b02ed14 7888f4e acbafd7 7888f4e b02ed14 |
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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
# @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;
transform-origin: top;
transform: scaleY(0.8); /* Added scaleY */
}}
#proll midi-player::part(control-panel) {{
background: #d8dae880;
border-radius: 8px 8px 0 0;
border: 1px solid #A0A0A0;
}}
/* Custom visualizer style */
#proll midi-visualizer .piano-roll-visualizer {{
background: #45507328;
border-radius: 0 0 8px 8px;
border: 1px solid #A0A0A0;
margin: 4px;
margin-top: 2;
overflow: auto;
transform: scaleY(0.8); /* Added scaleY */
}}
#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;
}}
/* Media queries for responsive scaling */
@media (max-width: 700px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.75);}} }}
@media (max-width: 500px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.7);}} }}
@media (max-width: 400px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.6);}} }}
@media (max-width: 300px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.5);}} }}
</style>
</head>
<body>
<div>
<a href="{midifile}" target="_blank" style="font-size: 14px;">Download MIDI</a> <br>
</div>
<div>
<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"""<div style="display: flex; justify-content: center; align-items: center;">
<iframe style="width: 100%; height: 500px; overflow:auto" srcdoc='{html_template}'></iframe>
</div>"""
return html
def create_html_youtube_player(youtube_url):
youtube_url = to_youtube_embed_url(youtube_url)
html = f"""
<div style="display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%;">
<style>
.responsive-iframe {{ width: 560px; height: 315px; transform-origin: top left; transition: width 0.3s ease, height 0.3s ease; }}
@media (max-width: 560px) {{ .responsive-iframe {{ width: 100%; height: 100%; }} }}
</style>
<iframe class="responsive-iframe" src="{youtube_url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
"""
return html
|