File size: 1,056 Bytes
c00f836
0bf9c89
46cbb18
 
 
 
5e58148
46cbb18
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5e58148
46cbb18
 
5e58148
 
 
c00f836
46cbb18
 
 
 
 
c00f836
 
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
import gradio as gr

def play_midi(midi_file):
    # You would use a library like mido to handle the MIDI file
    # For the purpose of this example, we'll just return the MIDI file path
    return midi_file.name

css = """
<style>
    .note.active {
        stroke: black;
        stroke-width: 0.75;
        stroke-opacity: 0.75;
    }
    midi-visualizer {
        display: block;
        overflow-x: scroll;
    }
</style>
"""

html = """
<div id="midi_visualizer_container"></div>
<audio id="midi_audio" controls>
    <source src="{{ midi_url }}" type="audio/midi">
    Your browser does not support the audio element.
</audio>
<script>
    // JavaScript code for handling MIDI visualization and playback
    // Paste the provided JavaScript code here
</script>
"""

with gr.Blocks() as demo:
    midi_file = gr.File(label="Upload MIDI File", file_count="single", file_types=[".mid"])
    gr.Markdown(css)
    midi_url = gr.Variable(value="")
    gr.Markdown(html)
    midi_file.change(fn=play_midi, inputs=midi_file, outputs=midi_url)

demo.launch()