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

标签 javascript jquery ajax audio html5-audio

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

我已经构建了接受发布请求并使用 wav 文件进行响应的部分,但我不知道如何在 JS 中发送请求并向用户播放响应。

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

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

最佳答案

这样的东西行得通吗?

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

关于javascript - 如何发送 AJAX POST 请求并在响应中播放音频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44896667/

相关文章:

javascript - Lytebox 画廊无法在画廊中使用 AngularJS 分页

javascript - jqGrid 自定义过滤,内置过滤工具栏

jquery - 如何拥有 jQuery 效果的多个实例

javascript - 为什么我通过 AJAX 传递到 MVC Controller 的 XML 无法到达那里?

javascript - 在给定用户电子邮件或其他任意字段的 Firebase 实时数据库中查找表

javascript - 无 JavaScript 浏览器的 Noscript 表单后备

javascript - 仅 Css 垂直时间轴

javascript - 获取 JSON 数据 : Syntax error

java - 属性更改时 JSF ajax 重新渲染组件

javascript - ajax结果成功 null