时间戳

首页 > 解决方案 > 如何在用户的浏览器上播放生成的 mp3？

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

问题描述

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

我正在考虑2个解决方案：

要么我必须通过 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) {
      }
    });

视图.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)

标签： htmljquerydjangowebweb-development-server

解决方案

要解决此问题，您可以将 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，否则当您有多个用户同时请求音频文件时，您将遇到并发问题。

推荐阅读