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

时间:2017-07-04 03:42:44

标签: javascript jquery ajax audio html5-audio

我正在构建一个应用程序,用户可以单击按钮,然后将数据发送到服务器。然后,服务器根据请求中的数据(很可能是POST)计算音频,并将WAV文件返回给浏览器。

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

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

我也愿意接受改变服务器发送文件方式的建议:服务器是在flask中制作的

1 个答案:

答案 0 :(得分:3)

这样的事情会起作用吗?

<!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。我的互联网速度不够快,无法在一两秒内加载整个文件,但它会立即播放。