testing midi player

app.py

@@ -4,55 +4,11 @@ def greet(name):
     return "Hello " + name + "!!"
 
 html_content = """
-<p>This is a demo for the <strong>html-midi-player</strong> package. For more information, see <a href="https://github.com/cifkao/html-midi-player" target="_blank">its GitHub repository</a>.</p>
-
-<section id="section3">
-<h2>Custom player and visualizer style</h2>
-<midi-player
-  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid"
-  sound-font visualizer="#section3 midi-visualizer">
-</midi-player>
-<midi-visualizer
-  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid">
-</midi-visualizer>
-</section>
-
-<section id="section1">
-<h2>1 player, 2 visualizers</h2>
-<midi-visualizer
-  type="piano-roll"
-  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
-</midi-visualizer>
-<midi-visualizer
-  type="staff"
-  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
-</midi-visualizer>
-<midi-player
-  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
-  sound-font visualizer="#section1 midi-visualizer">
-</midi-player>
-</section>
-
-<section id="section2">
-<h2>2 players, 1 visualizer</h2>
-<midi-player
-  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
-  sound-font visualizer="#section2 midi-visualizer">
-</midi-player>
-<midi-player
-  src="https://cdn.jsdelivr.net/gh/magenta/magenta-js@571b384/music/demos/melody.mid"
-  sound-font visualizer="#section2 midi-visualizer">
-</midi-player>
-<midi-visualizer
-  type="piano-roll">
-</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>
+<iframe src="index.html" width="100%" height="600px" frameborder="0"></iframe>
 """
 
 with gr.Blocks() as demo:
     gr.Interface(fn=greet, inputs="text", outputs="text")
     gr.HTML(html_content)
 
-demo.launch(share=True)
+demo.launch(share=True)

index.html

@@ -0,0 +1,45 @@
+<p>This is a demo for the <strong>html-midi-player</strong> package. For more information, see <a href="https://github.com/cifkao/html-midi-player" target="_blank">its GitHub repository</a>.</p>
+
+<section id="section3">
+<h2>Custom player and visualizer style</h2>
+<midi-player
+  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid"
+  sound-font visualizer="#section3 midi-visualizer">
+</midi-player>
+<midi-visualizer
+  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid">
+</midi-visualizer>
+</section>
+
+<section id="section1">
+<h2>1 player, 2 visualizers</h2>
+<midi-visualizer
+  type="piano-roll"
+  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
+</midi-visualizer>
+<midi-visualizer
+  type="staff"
+  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
+</midi-visualizer>
+<midi-player
+  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
+  sound-font visualizer="#section1 midi-visualizer">
+</midi-player>
+</section>
+
+<section id="section2">
+<h2>2 players, 1 visualizer</h2>
+<midi-player
+  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
+  sound-font visualizer="#section2 midi-visualizer">
+</midi-player>
+<midi-player
+  src="https://cdn.jsdelivr.net/gh/magenta/magenta-js@571b384/music/demos/melody.mid"
+  sound-font visualizer="#section2 midi-visualizer">
+</midi-player>
+<midi-visualizer
+  type="piano-roll">
+</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>