javascript - 如何将加载的音频设置为 HTML 音频标签 Controller ？

Question

我正在使用 Azure 语音服务从 ajax 帖子加载 TTS。

function tts(data){

    var url = "https://speech.platform.bing.com/synthesize"
    var headers = {
            "X-Microsoft-OutputFormat":"audio-16khz-64kbitrate-mono-mp3",
            "Content-Type":"application/x-www-form-urlencoded",
            "Authorization":"Bearer " + JWT // My Jason Token
        }

        $.ajax({
            url: url,
            type: 'post',
            data: data, // The text for speech
            headers: headers,
            success: function (data) {
                audiodata = data;
            }
        });
}

audiodata包含加载的 mpeg 音频数据。我怎样才能把这些数据放入 <audio> HTML 标签？

Answer 1

您可以使用以下 Javascript 代码示例来执行此操作:

function tts(data) {

    var url = "https://speech.platform.bing.com/synthesize"

    var oReq = new XMLHttpRequest();
    oReq.open("POST", url, true);
    oReq.responseType = "blob";

    oReq.setRequestHeader("X-Microsoft-OutputFormat", "audio-16khz-64kbitrate-mono-mp3");
    oReq.setRequestHeader("Content-Type", "application/ssml+xml");
    oReq.setRequestHeader("Authorization", "Bearer " + JWT)

    oReq.onload = function (oEvent) {
        var blob = oReq.response; // Note: not oReq.responseText
        if (blob) {
            var audioObj = document.getElementById('audiotag');
            audioObj.src = window.URL.createObjectURL(blob);
            audioObj.play();
        }

    };

    oReq.send(data);    
}

HTML 页面应包含以下内容:

<audio id="audiotag"></audio>