如何使用HTML5 Audio API播放從XMLHTTPRequest返回的音頻

Question

在向服務器端API發出“AJAX”請求時，我無法播放音頻。

我有后端Node.js代碼，它使用IBM的Watson Text-to-Speech服務來提供來自文本的音頻：

var render = function(request, response) {
    var options = {
        text: request.params.text,
        voice: 'VoiceEnUsMichael',
        accept: 'audio/ogg; codecs=opus'
    };

    synthesizeAndRender(options, request, response);
};

var synthesizeAndRender = function(options, request, response) {
    var synthesizedSpeech = textToSpeech.synthesize(options);

    synthesizedSpeech.on('response', function(eventResponse) {
        if(request.params.text.download) {
            var contentDisposition = 'attachment; filename=transcript.ogg';

            eventResponse.headers['content-disposition'] = contentDisposition;
        }
    });

    synthesizedSpeech.pipe(response);
};

我有客戶端代碼來處理：

var xhr = new XMLHttpRequest(),
    audioContext = new AudioContext(),
    source = audioContext.createBufferSource();

module.controllers.TextToSpeechController = {
    fetch: function() {
        xhr.onload = function() {
            var playAudio = function(buffer) {
                source.buffer = buffer;
                source.connect(audioContext.destination);

                source.start(0);
            };

            // TODO: Handle properly (exiquio)
            // NOTE: error is being received
            var handleError = function(error) {
                console.log('An audio decoding error occurred');
            }

            audioContext
                .decodeAudioData(xhr.response, playAudio, handleError);
        };
        xhr.onerror = function() { console.log('An error occurred'); };

        var urlBase = 'http://localhost:3001/api/v1/text_to_speech/';
        var url = [
            urlBase,
            'test',
        ].join('');

        xhr.open('GET', encodeURI(url), true);
        xhr.setRequestHeader('x-access-token', Application.token);
        xhr.responseType = 'arraybuffer';
        xhr.send();
    }
}

后端返回我期望的音頻，但我的成功方法playAudio永遠不會被調用。 相反，始終調用handleError，並且錯誤對象始終為null。

任何人都可以解釋我做錯了什么以及如何糾正這個問題？ 這將不勝感激。

謝謝。

注意：URL中的字符串“test”將成為后端的文本參數，並最終位於synthesizeAndRender的options變量中。

Answer 1

遺憾的是，與Chrome的HTML5音頻實施不同，Chrome的網絡音頻不支持audio / ogg; codecs = opus ，這是您的請求在此處使用的內容。 您需要將格式設置為audio/wav才能使其正常工作。 為了確保它傳遞給服務器請求，我建議將它放在查詢字符串中（ accept=audio/wav ，urlencoded）。

您只是想播放音頻，還是需要訪問Web Audio API進行音頻轉換？ 如果您只需要播放音頻，我可以向您展示如何使用HTML5音頻API（而非Web音頻API）輕松播放。 而隨着HTML5音頻，您可以使用下面的技術可以流它，你可以用最佳的audio/ogg;codecs=opus格式。

它就像動態設置音頻元素的源一樣簡單，通過以下方式從DOM查詢：

（用HTML格式）

<audio id="myAudioElement" />

（在你的JS中）

var audio = document.getElementById('myAudioElement') || new Audio();
audio.src = yourUrl;

您還可以通過XMLHttpRequest設置音頻元素的源，但是您不會獲得流式傳輸。 但由於您可以使用POST方法，因此您不限於GET請求的文本長度（對於此API，大約6KB）。 要在xhr中設置它，您可以從blob響應創建數據uri：

    xhr.open('POST', encodeURI(url), true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.responseType = 'blob';
    xhr.onload = function(evt) {
      var blob = new Blob([xhr.response], {type: 'audio/ogg'});
      var objectUrl = URL.createObjectURL(blob);
      audio.src = objectUrl;
      // Release resource when it's loaded
      audio.onload = function(evt) {
        URL.revokeObjectURL(objectUrl);
      };
      audio.play();
    };
    var data = JSON.stringify({text: yourTextToSynthesize});
    xhr.send(data);

如您所見，使用XMLHttpRequest，您必須等到數據完全加載才能播放。 可能有一種方法可以使用最新的Media Source Extensions API從XMLHttpRequest流式傳輸，該API目前僅在Chrome和IE（無Firefox或Safari）中可用。 這是我正在嘗試的方法。 如果我成功，我會在這里更新。