如何播放使用HTML5 Audio API从XMLHTTPRequest返回的音频
我无法在向我的服务器端API发出“AJAX”请求时播放音频。如何播放使用HTML5 Audio API从XMLHTTPRequest返回的音频
我已经后端目前正使用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中的选项变量中结束。
不幸的是,与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)中可用。这是我目前正在尝试的一种方法。如果我成功了,我会在这里更新。
你确定支持音频格式吗? – Musa
我相信它一定是。我最初通过一个url直接用相同的Chrome浏览器测试了相同的后端代码,并且它可以很好地运行。 – exiquio
实际上,测试是在Chromium和Gnu/Linux上完成的。我相信它应该与OSX中的Chrome相同,我现在正在编写此代码,但我不确定。 – exiquio