Javascript 如何将加载的音频设置为HTML音频标记控制器?

Javascript 如何将加载的音频设置为HTML音频标记控制器?,javascript,html,azure,audio,text-to-speech,Javascript,Html,Azure,Audio,Text To Speech,我正在使用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-fo

我正在使用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音频数据。如何将此数据放入
HTML标记中

您可以使用以下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>