如何在用户的浏览器上播放生成的 mp3？答案

【问题标题】：How to play a generated mp3 on the user's browser?如何在用户的浏览器上播放生成的 mp3？
【发布时间】：2020-11-10 09:15:17
【问题描述】：

我的 django views.py 在用户交互后在./speech.mp3 的服务器上生成一个 mp3 文件。如何在用户的浏览器上播放？如果我只是使用views.py中的python代码播放mp3文件，它只会在服务器PC上播放，而不是用户的浏览器。

我正在考虑两种解决方案：

要么我必须通过 ajax 将 mp3 传递给用户的浏览器

或

将其上传到云服务。

不知道如何接近。

index.js：

$.ajax({
      url: "/text_speech/",
      type: "POST",
      data: {text: $("#id_text").val(),
        voice: $("#id_voice").val(),
        speed: speed.slider("option", "value")},
      dataType: "json",
      success: function (response){
      },
      error: function(xhr,errmsg,err) {
      }
    });

views.py：

class text_speech(base.TemplateView):
    .....

    @staticmethod
    def post(request, *args, **kwargs):
        form = forms.input_form(request.POST)

        if form.is_valid():
            # process the data
            .....
         
            # Generate the mp3 file at ./speech.mp3
            amazon_polly.amazon_polly(....)

            return http.JsonResponse({}, status=200)
        else:
            return http.JsonResponse({}, status=400)

【问题讨论】：

如果文件可通过 URL 访问，请使用 audio 元素并将 URL 设置为 src 属性
@RoryMcCrossan 但是音频文件是在用户加载并与页面交互后生成的。所以 mp3 存在于服务器上，而不存在于浏览器上。
在这种情况下，您需要一种方法让服务器在文件已准备好并准备好供浏览器下载时让浏览器知道。您是否使用 AJAX 请求来创建 MP3 文件？如果是这样，那将变得微不足道。在任何情况下，解决方案都是相同的（在audio 元素中播放文件），您遇到的问题是知道文件何时可用及其 URL
@RoryMcCrossan 是的，这就是我发布这个问题的原因，哈哈
那么请在问题中也发布您的 AJAX 代码。

标签： html jquery django web web-development-server

【解决方案1】：

要解决此问题，您可以将 URL 返回到您在 AJAX 请求的响应中创建的音频文件。然后你可以在 JS 逻辑中创建一个audio 元素，将该 URL 设置为src。像这样的：

return http.JsonResponse({ audio_url: 'your-mp3-file-path-here.mp3' }, status=200)

$.ajax({
  url: "/text_speech/",
  type: "POST",
  data: {
    text: $("#id_text").val(),
    voice: $("#id_voice").val(),
    speed: speed.slider("option", "value")
  },
  dataType: "json",
  success: function(response) {
    let $audio = $('<audio />', { src: response.audio_url });
    $audio[0].play();
  },
  error: function(xhr, errmsg, err) {}
});

需要注意的一点是，您需要为每个 mp3 文件使用单独的 URL，否则当您有多个用户同时请求音频文件时，您会遇到并发问题。

【讨论】：

看，这里的问题是页面加载后生成了mp3文件。这意味着当collectstatic 运行时浏览器没有mp3 文件。因此，仅将 url 传递给服务器上的本地路径是行不通的。
对，这就是为什么这段代码在 AJAX 调用完成并且文件已创建并可供下载之后运行的原因。
好的，我会尝试并报告。
let $audio = $('<audio />' { src: response.audio_url }); 是无效代码。