keshavbhandari commited on
Commit
88cf799
1 Parent(s): a3689b1

testing midi web player

Browse files
Files changed (1) hide show
  1. app.py +53 -2
app.py CHANGED
@@ -3,5 +3,56 @@ import gradio as gr
3
  def greet(name):
4
  return "Hello " + name + "!!"
5
 
6
- demo = gr.Interface(fn=greet, inputs="text", outputs="text")
7
- demo.launch(share=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  def greet(name):
4
  return "Hello " + name + "!!"
5
 
6
+ html_content = """
7
+ <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>
8
+
9
+ <section id="section3">
10
+ <h2>Custom player and visualizer style</h2>
11
+ <midi-player
12
+ src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid"
13
+ sound-font visualizer="#section3 midi-visualizer">
14
+ </midi-player>
15
+ <midi-visualizer
16
+ src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid">
17
+ </midi-visualizer>
18
+ </section>
19
+
20
+ <section id="section1">
21
+ <h2>1 player, 2 visualizers</h2>
22
+ <midi-visualizer
23
+ type="piano-roll"
24
+ src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
25
+ </midi-visualizer>
26
+ <midi-visualizer
27
+ type="staff"
28
+ src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
29
+ </midi-visualizer>
30
+ <midi-player
31
+ src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
32
+ sound-font visualizer="#section1 midi-visualizer">
33
+ </midi-player>
34
+ </section>
35
+
36
+ <section id="section2">
37
+ <h2>2 players, 1 visualizer</h2>
38
+ <midi-player
39
+ src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
40
+ sound-font visualizer="#section2 midi-visualizer">
41
+ </midi-player>
42
+ <midi-player
43
+ src="https://cdn.jsdelivr.net/gh/magenta/magenta-js@571b384/music/demos/melody.mid"
44
+ sound-font visualizer="#section2 midi-visualizer">
45
+ </midi-player>
46
+ <midi-visualizer
47
+ type="piano-roll">
48
+ </midi-visualizer>
49
+ </section>
50
+
51
+ <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
52
+ """
53
+
54
+ with gr.Blocks() as demo:
55
+ gr.Interface(fn=greet, inputs="text", outputs="text")
56
+ gr.HTML(html_content)
57
+
58
+ demo.launch(share=True)