使用Django發送音頻文件時出現DOMException

Question

我正在構建一個基於Django的Web應用程序，在該應用程序中，我想在單擊按鈕時從瀏覽器中的服務器播放音頻文件。 該文件隨應用程序的使用而變化，因此我通過audio元素的src屬性調用Django視圖，如下所示：

<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）中DOMException: Failed to load because no supported source was found 。

根據我的發現，這似乎是“自動播放”預防策略，但它在Firefox中也應處於活動狀態。 如果是這樣，我猜想它可能是由想要自動播放音頻的視圖接收HTTP響應觸發的。

我還嘗試過在此處初始化AudioContext，並在單擊按鈕后恢復它，但無濟於事。

我缺少什么，如何使它工作？

Answer 1

好的，所以終於有了它-畢竟不是自動播放策略。 Chrome瀏覽器不支持將音頻元素的src屬性用作Django視圖的url（它會通過HTTP響應音頻文件傳輸進行響應）。 Failed to load because no supported source was found因此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>