I am building an app where the user can click a button, and it sends data to the server. The server then putes audio based on the data in the request (most likely a POST), and returns a WAV file to the browser.
I have already built the part with accepting a post request and responding with the wav file, but I can't figure out how to send the request in JS and to play the response to the user.
Also, the playing of the audio must start (almost) as the first byte es in, as the audio files are quite large, and the user can't just wait for the request to be pleted.
I am also open to suggestions changing how the server sends the file: the server is made in flask
I am building an app where the user can click a button, and it sends data to the server. The server then putes audio based on the data in the request (most likely a POST), and returns a WAV file to the browser.
I have already built the part with accepting a post request and responding with the wav file, but I can't figure out how to send the request in JS and to play the response to the user.
Also, the playing of the audio must start (almost) as the first byte es in, as the audio files are quite large, and the user can't just wait for the request to be pleted.
I am also open to suggestions changing how the server sends the file: the server is made in flask
Share Improve this question asked Jul 4, 2017 at 3:42 ginkoidginkoid 3041 gold badge4 silver badges13 bronze badges 2- did you see this link? github./Jam3/audiobuffer-to-wav/blob/master/demo/index.js – Hamed Javaheri Commented Jul 4, 2017 at 4:08
- I don't think that is what I need - it doesn't play the audio, nor does it play/somehow return the audio in real-time. – ginkoid Commented Jul 4, 2017 at 4:19
1 Answer
Reset to default 3Will something like this work?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<audio controls>
<source id="source" src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script src="https://code.jquery./jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'get.php',
data: { attr1: 'value1' },
success: function( data ) {
console.log(data);
$('audio #source').attr('src', data);
$('audio').get(0).load();
$('audio').get(0).play();
}
});
</script>
</body>
</html>
While the get.php just prints the audio file link. Note that I didn't get any WAV file so can't test on that.
<?php echo 'http://junaidahmed.io/w/audio.mp3'; ?>
That audio I'm printing above is a 30 minute and about 13mb file size. My internet is not fast enough to load the whole file in a second or two and yet it plays right away.