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

Posted 2023-02-16

【中文标题】如何使用 HTML5 音频 API 播放从 XMLHTTPRequest 返回的音频

【英文标题】：How do I play audio returned from an XMLHTTPRequest using the HTML5 Audio API

【发布时间】：2015-07-31 14:09:33

【问题描述】：

向我的服务器端 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 变量中。

【问题讨论】：

您确定支持音频格式吗？

我相信它一定是。我最初通过 url 直接使用相同的 Chrome 浏览器测试了相同的后端代码，它可以正常运行。

其实测试是在 Chromium 和 Gnu/Linux 上完成的。我相信它应该与我现在正在编写此代码的 OSX 中的 Chrome 相同，但我不确定。

更新：我在用于开发此代码的同一浏览器中运行了以下查询：localhost:3001/api/v1/text_to_speech/this%20is%20a%20test

【参考方案1】：

不幸的是，与 Chrome 的 html5 音频实现不同，Chrome 的 Web 音频 doesn't support 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，您必须等到数据完全加载后才能播放。 可能有一种方法可以使用非常新的媒体源扩展 API 从 XMLHttpRequest 进行流式传输，该 API 目前仅在 Chrome 和 IE（没有 Firefox 或 Safari）中可用。这是我目前正在尝试的一种方法。如果我成功了，我会在这里更新。

【讨论】：

Eric 用关于兼容性的声明和指向 Chromium 问题的链接回答了我的问题，并详细说明了可能的解决方法，非常感谢。

过去 2 天我一直在苦苦挣扎。你能看看这个***.com/questions/32163749

AAC 格式适用于所有浏览器，顺便说一句。您不仅限于使用 WAV（这是巨大的）。