Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Audio Conversion</title> | |
<!-- Include jQuery for simplicity --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
</head> | |
<body> | |
<h2>Upload Audio for Conversion</h2> | |
<form id="uploadForm" enctype="multipart/form-data"> | |
<label for="spk_id">Speaker:</label> | |
<select name="spk_id" id="spk_id"> | |
<option value="trips">Trips</option> | |
<option value="modi">Modi</option> | |
<option value="khujli">Khujli</option> | |
<option value="kishorkumar">Kishor</option> | |
</select> | |
<br><br> | |
<label for="file">Audio File:</label> | |
<input type="file" id="file" name="file" required> | |
<br><br> | |
<input type="hidden" name="voice_transform" value="0"> | |
<input type="submit" value="Convert Voice"> | |
</form> | |
<!-- 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> | |
<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(); | |
} else if (data.error) { | |
// Display error message from the server | |
alert(data.error); | |
} | |
}, | |
error: function(xhr, status, error) { | |
// Handle different types of error status codes | |
if(xhr.status === 429) { | |
alert("Too many requests, please try again later."); | |
} else if(xhr.status === 400) { | |
alert("Bad request. Please check the input and try again."); | |
} else { | |
// Generic error message for other statuses | |
alert("An error occurred: " + xhr.status + " " + error); | |
} | |
}, | |
cache: false, | |
contentType: false, | |
processData: false | |
}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> | |