ui.html

<!-- Include jQuery for simplicity -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $('#uploadForm').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            url: '/convert_voice',
            type: 'POST',
            data: formData,
            success: function(data) {
                if (data.audio_id) {
                    // Update the source of the processed audio element
                    $('#processedAudio source').attr('src', '/get_processed_audio/' + data.audio_id);
                    $('#processedAudio')[0].load();
                    $('#processedAudio')[0].play();
                }
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
});
</script>

<!-- Processed Audio Playback -->
<h3>Processed Audio:</h3>
<audio id="processedAudio" controls>
    <source src="" type="audio/wav">
    Your browser does not support the audio element.
</audio>