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

Z时代
2024-01-10
分类：问答

向服务器端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）中。

您只是想播放音频，还是需要访问Web Audio API进行音频转换？如果您只需要播放音频，我可以向您展示如何使用HTML5 Audio

API（而不是Web Audio）轻松地播放音频。借助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);