A way to play Azure output format "audio-16khz-128kbitrate-mono-mp3" in Javascript

Question

I'm calling the Azure TTS rest API, using the header X-Microsoft-OutputFormat with the value audio-24khz-160kbitrate-mono-mp3, and I don't know how to convert and play the audio from response. Does any know how to play the audio response when call Azure Cognitive services rest API?

Tks.

I tried to convert using blob

`

 let wavFile = new Blob(res.data, { 
                                'type': 'audio/mp3' 
                              });

` but without success.

Answer 1

Please use fetch and ensure at least include following headers and payload:

const audio = document.createElement("audio");

fetch("{YourEndpointUrl}", {
  "headers": {
    "content-type": "application/ssml+xml",
    "ocp-apim-subscription-key": "{YourSpeechKey}",
    "x-microsoft-outputformat": "audio-24khz-160kbitrate-mono-mp3"
  },
  "body": "<speak version=\"1.0\" xmlns=\"http://www.w3.org/2001/10/synthesis\" xmlns:mstts=\"http://www.w3.org/2001/mstts\" xml:lang=\"en-US\"><voice name=\"AdaptVoice\">My SSML</voice></speak>",
  "method": "POST"
})
.then(resp => resp.blob())
.then(URL.createObjectURL)
.then(url => {
  audio.src = url;
  audio.play();
});

Or, use async/await is more concise:

const audio = document.createElement("audio");

const resp = await fetch("{YourEndpointUrl}", {
  "headers": {
    "content-type": "application/ssml+xml",
    "ocp-apim-subscription-key": "{YourSpeechKey}",
    "x-microsoft-outputformat": "audio-24khz-160kbitrate-mono-mp3"
  },
  "body": "<speak version=\"1.0\" xmlns=\"http://www.w3.org/2001/10/synthesis\" xmlns:mstts=\"http://www.w3.org/2001/mstts\" xml:lang=\"en-US\"><voice name=\"AdaptVoice\">My SSML</voice></speak>",
  "method": "POST"
});
const blob = await resp.blob();
const url = await URL.createObjectURL(blob);
audio.src = url;
audio.play();