TTS API play audio data returned is not playing


I’m having a problem playing the audio returned from the text to speech API. I’m calling OpenAI APIs from a React web application.

Part of my code is the following:

const audioData = await OpenAIService.textToAudio(text)
if (audioData) {
try {
const blob = new Blob([audioData]);
const audioUrl = URL.createObjectURL(blob);

        const audio = new Audio(audioUrl); => {
          console.error('Audio playback failed:', error.message);
      } catch (error: any) {
        console.error('Error creating audio:', error.message);

The OpenAIService.textToAudio is this:
textToAudio: async (text: string) => {
const headers = {
‘Content-Type’: ‘application/json’,
‘Authorization’: Bearer ${openAIAPIkey}

const payload = {
  model: "tts-1",
  input: text,
  voice: "onyx",
  stream: true
return await, payload, { headers }).then(res => {
  console.log('res: ', res)
  .catch(err => console.error(err))


I get ‘Audio playback failed: Failed to load because not supported source was found’

Does anyone see if I’m doing something wrong or have any suggestion to play the audio?

Any response is much appreciated. Thank you.

I resolved my issue :blush:. I’m afraid it was fault but I didn’t see my solution in the documentation.

The solution was to add responseType: ‘arrayBuffer’ to after the headers, like this:

return await, payload, { headers, responseType: ‘arraybuffer’ }).then(res => {

Hope this helps the next fellow.


1 Like

Thank you for the solution: responseType: 'arrayBuffer'.

Here is an implementation using jQuery. Hopefully this will help someone.

async function callOpenAI_TTS_API(text){
	console.log("callOpenAI_TTS_API =>"+text);
	var formData = JSON.stringify({
	try {
		const openaiTTSResponse = await $.ajax({
			url: '',
			method: 'POST',
			xhrFields: {
				responseType: "arraybuffer"
			headers: {
				'Authorization': `Bearer ${apiKey}`,
				'Content-Type': 'application/json'
			data: formData
		var blob = new Blob([openaiTTSResponse]);
		if (blob) {
			// Create a blob URL from the blob object
			blobURL = URL.createObjectURL(blob);
			audio = new Audio();
			audio.src = blobURL;;
	} catch (error) {
		console.error('Error TTS:', error);