Update app.py
Browse files
app.py
CHANGED
|
@@ -1,6 +1,10 @@
|
|
| 1 |
import gradio as gr
|
|
|
|
| 2 |
|
| 3 |
def display_audio_meter(audio_file):
|
|
|
|
|
|
|
|
|
|
| 4 |
# Embed the HTML for the audio meter visualization using wavesurfer.js
|
| 5 |
html_code = f"""
|
| 6 |
<html>
|
|
@@ -8,14 +12,14 @@ def display_audio_meter(audio_file):
|
|
| 8 |
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js"></script>
|
| 9 |
<div id="audio-meter" style="width: 100%; height: 128px; background-color: #f0f0f0;"></div>
|
| 10 |
<script>
|
| 11 |
-
const audioFile =
|
| 12 |
const waveSurfer = WaveSurfer.create({{
|
| 13 |
container: '#audio-meter',
|
| 14 |
waveColor: 'blue',
|
| 15 |
progressColor: 'green',
|
| 16 |
height: 128
|
| 17 |
}});
|
| 18 |
-
waveSurfer.load(audioFile);
|
| 19 |
</script>
|
| 20 |
</body>
|
| 21 |
</html>
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import os
|
| 3 |
|
| 4 |
def display_audio_meter(audio_file):
|
| 5 |
+
# Convert file path to a URL that can be used in the HTML and JavaScript
|
| 6 |
+
audio_url = f"/file={audio_file}"
|
| 7 |
+
|
| 8 |
# Embed the HTML for the audio meter visualization using wavesurfer.js
|
| 9 |
html_code = f"""
|
| 10 |
<html>
|
|
|
|
| 12 |
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js"></script>
|
| 13 |
<div id="audio-meter" style="width: 100%; height: 128px; background-color: #f0f0f0;"></div>
|
| 14 |
<script>
|
| 15 |
+
const audioFile = '{audio_url}'; // Use the audio file URL in the script
|
| 16 |
const waveSurfer = WaveSurfer.create({{
|
| 17 |
container: '#audio-meter',
|
| 18 |
waveColor: 'blue',
|
| 19 |
progressColor: 'green',
|
| 20 |
height: 128
|
| 21 |
}});
|
| 22 |
+
waveSurfer.load(audioFile); // Load the audio file in the waveform
|
| 23 |
</script>
|
| 24 |
</body>
|
| 25 |
</html>
|