向服务器端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变量中。
不幸的是,与Chrome的HTML5 Audio实现不同,Chrome的Web Audio 不支持audio / ogg; codecs = opus,这是您的请求在此处使用的。您需要将格式设置audio/wav为此起作用。为确保将其传递到服务器请求,建议将其放入查询字符串(accept=audio/wav,urlencoded)中。
audio/wav
accept=audio/wav
您只是想播放音频,还是需要访问Web Audio API进行音频转换?如果您只需要播放音频,我可以向您展示如何使用HTML5 Audio API(而不是Web Audio)轻松地播放音频。借助HTML5音频,您可以使用以下技术进行流式传输, 并且 可以使用最佳audio/ogg;codecs=opus格式。
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,您必须等到数据完全加载才能播放。有 可能 是一种方式,从XMLHttpRequest来流使用非常新媒体来源扩展API,这是目前仅适用于Chrome和IE(无火狐或Safari)可用。这是我目前正在尝试的一种方法。如果成功,我会在这里更新。