TTS API play audio data returned is not playing

Hello,

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);
        audio.play().catch(error => {
          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 axios.post(openAITextToAudioUrl, payload, { headers }).then(res => {
  console.log('res: ', res)
  return res.data
})
  .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 axios.post(openAITextToAudioUrl, payload, { headers, responseType: ‘arraybuffer’ }).then(res => {

Hope this helps the next fellow.

Thx.

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({
		'model':'tts-1',
		'voice':'onyx',
		'input':text
	});
	try {
		const openaiTTSResponse = await $.ajax({
			url: 'https://api.openai.com/v1/audio/speech',
			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;
			audio.play();
		}
	} catch (error) {
		console.error('Error TTS:', error);
	}
}