0

我正在构建一个基于 Django 的 Web 应用程序，我想通过单击按钮在浏览器中播放来自服务器的音频文件。该文件随着应用程序的使用而变化，因此我通过元素的src属性调用 Django 视图，如下所示：audio

<audio id="audio" src="{% url 'play' 'for-sure' %}" type="audio/wav"></audio>

这for-sure是要播放的默认文件名。这是映射视图函数：

def play(request, file_name):
    with open(f'audio/{file_name}.wav', 'rb') as f:
        response = HttpResponse(f.read(), status=206)
        response['content_type'] = 'audio/wav'
        return response

我还添加了一个按钮来播放声音：

<input type="button" value="Play audio" onclick="play()" id="play_btn">

以及随附的 Javascript：

function play(){
    var audioElement = document.getElementById("audio");
    var promise = audioElement.play();
    if (promise !== undefined) {
      promise.then(_ => {
        console.log('playing')
      }).catch(error => {
        console.log('playing error')
        console.log(error)
        console.log(error.message)
      });
    }
  };

这适用于 Firefox (v68)，但我一直DOMException: Failed to load because no supported source was found在使用 Chromium (v76)。

从我发现它似乎是自动播放预防策略，但它也应该在 Firefox 中有效。如果是，我猜它可能是通过接收想要自动播放音频的视图的 HTTP 响应来触发的。

我也尝试过在这里初始化 AudioContext ，并在单击按钮时恢复它，但无济于事。

我错过了什么，我怎样才能让它发挥作用？

4

1 回答 1

0

好的，所以我终于明白了——毕竟这不是自动播放策略。Chrome 不支持将 audio 元素的src属性设为 Django 视图的 url（它以 HTTP Response 音频文件传输响应）。因此Failed to load because no supported source was found。

作为一种解决方案，我切换到从我的static目录中提供音频文件，并将其设置src为静态文件的路径。例如，指向默认声音的音频元素 init 现在显示为：

<audio id="audio" src="{% static 'annotate/audio/for-sure.wav' %}" type="audio/wav">
</audio>
于 2019-09-05T09:41:02.660 回答