|
import gradio as gr |
|
import os |
|
|
|
def display_audio_meter(audio_file): |
|
|
|
audio_url = f"/file={audio_file}" |
|
|
|
|
|
html_code = f""" |
|
<html> |
|
<body> |
|
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js"></script> |
|
<div id="audio-meter" style="width: 100%; height: 128px; background-color: #f0f0f0;"></div> |
|
<script> |
|
const audioFile = '{audio_url}'; // Use the audio file URL in the script |
|
const waveSurfer = WaveSurfer.create({{ |
|
container: '#audio-meter', |
|
waveColor: 'blue', |
|
progressColor: 'green', |
|
height: 128 |
|
}}); |
|
waveSurfer.load(audioFile); // Load the audio file in the waveform |
|
</script> |
|
</body> |
|
</html> |
|
""" |
|
return html_code |
|
|
|
|
|
with gr.Blocks() as interface: |
|
|
|
audio_input = gr.Audio(type="filepath") |
|
|
|
|
|
submit_button = gr.Button("Submit") |
|
|
|
|
|
output = gr.HTML() |
|
|
|
|
|
submit_button.click(fn=display_audio_meter, inputs=audio_input, outputs=output) |
|
|
|
|
|
interface.launch(share=True) |
|
|
