app.py

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()