如何发送AJAX POST请求并在响应中播放音频？

我正在构建一个应用程序，用户可以点击一个按钮，并将数据发送到服务器。然后，服务器根据请求中的数据（很可能是POST）计算音频，并向浏览器返回一个WAV文件。如何发送AJAX POST请求并在响应中播放音频？

我已经构建了接受发布请求并使用wav文件进行响应的部分，但我无法弄清楚如何在JS中发送请求并向用户播放响应。

此外，音频的播放必须在第一个字节进入时（几乎）开始播放，因为音频文件非常大，用户不能等待请求完成。

我也愿意听取建议更改服务器如何发送文件：服务器在flask

来源

2017-07-04 Ginkoid

您是否看到此链接？ https://github.com/Jam3/audiobuffer-to-wav/blob/master/demo/index.js –

我不认为这是我需要的 - 它不会播放音频，也不会播放/以某种方式实时返回音频。 – Ginkoid

威尔这样的工作提出？

<!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.com/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>

虽然get.php只是打印音频文件链接。请注意，我没有得到任何WAV文件，所以无法测试。

<?php echo 'http://junaidahmed.io/w/audio.mp3'; ?>

我上面打印的音频是30分钟，大约13mb文件大小。我的网络速度不够快，无法在一两秒内加载整个文件，但它立即播放。

来源

2017-07-04 05:25:26 Junaid

谢谢！但有一个问题：对于速度来说，服务器直接返回音频，不返回音频的URL，并让浏览器发出另一个请求可能会更好。有没有办法做到这一点？ – Ginkoid

音频文件的内容可以很容易地返回，但你会得到**大文件**的问题，因为我认为HTTP请求需要在做任何事情之前完成，其次，我不知道如何处理它回来DOM。 – Junaid

如果它是异步的，那么http请求不应该阻止页面。不过，谢谢，表现并不重要。 – Ginkoid

如何发送AJAX POST请求并在响应中播放音频？

回答

相关问题