如何播放使用HTML5 Audio API从XMLHTTPRequest返回的音频

Question

我无法在向我的服务器端API发出“AJAX”请求时播放音频。

我已经后端目前正使用IBM的沃森文本到语音的服务，服务从文本音频的Node.js代码：

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总是被调用，并且错误对象始终为空。

任何人都可以解释我做错了什么，以及如何纠正？这将不胜感激。

谢谢。

注意：URL中的字符串“test”在后端变成了一个文本参数，并且在synthesizeAndRender中的选项变量中结束。

Answer 1

不幸的是，与Chrome的HTML5音频实现不同，Chrome的Web Audio doesn't support audio/ogg;codecs=opus，这是您的请求在此处使用的内容。您需要将格式设置为audio/wav才能生效。为了确保它传递给服务器请求，我建议将它放在查询字符串（accept=audio/wav，urlencoded）中。

您只是想播放音频，还是需要访问Web Audio API进行音频转换？如果您只需要播放音频，我可以向您演示如何使用HTML5 Audio API（不是Web Audio音频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，你必须等待，直到数据被满载玩。有可能是一种使用非常新的媒体源扩展API从XMLHttpRequest进行流式处理，目前仅在Chrome和IE（不包括Firefox或Safari）中可用。这是我目前正在尝试的一种方法。如果我成功了，我会在这里更新。