Whispers API / createTranscription openai library File errors

Hi All

I’ve been at this for a week now and can’t figure out how to properly place/post a file, I’m using openai version 3.2.1 on both react-native (running via expo) and in nest js backend. On the expo front-end I successfully record a .wav file base64 encoded (confirmed it’s a working file) but any attempt to create a legit file usings buffers/blobs/file object yields an empty file. I also noticed expo doesn’t play well with openai’s library. I switched to nestjs backend sending it the base64 but I’m not able to use the “File” object which is required by openai. Can anyone point out what I’m doing wrong?

react-native expo example:

const buffer = Buffer.from(recordingBase64, "base64");
      const blob = new Blob([buffer], {
        type: "audio/wav",
      });
      const file = new File([blob], "input.wav", { type: "audio/wav" });
1 Like

I am not sure if I can be helpful since I am using React on frontend and Expressjs on backend but what I do is here:

The frontend is very similar to yours:

const formData = new FormData()
const file = new File([blob], 'recording', { lastModified: Date.now(), type: 'audio/wav' })
formData.append('data', file, { filename: 'filename.ext' })

const response = await axios({
	...authorizationHeaders,
	method: 'POST',
	data: formData
	url
})

On the backend, I use multer to handle the uploaded file:

const storage = multer.diskStorage({
	destination: (req, file, cb) => cb(null, 'uploads/'),
	filename: (req, file, cb) => cb(null, req.clientId + '.wav')
})
const upload = multer({ storage })

async function getTranscription (path) {
	try {
		const response = await openai.createTranscription(
			fs.createReadStream(path),
			'whisper-1'
		)
		return response?.data?.text
	} catch (error) {
		console.log('ERROR IS:', error)
	}
}

app.use('/uploads', express.static('uploads'))
app.post('/api/upload-audio', upload.single('data'), async (req, res) => {
	const transcription = await getTranscription(req.file.path)
	// Stuff you do with the transcription
})

Hope it helps.

could you please provide the blob portion of the code, I feel like my issues around the buffer/blob portion, I just noticed my react-native buffer is empty using Buffer.from but on the node side Buffer.from isn’t

Also, when I try fs.createReadStream in the .createTranscription it gives me Argument of type ‘ReadStream’ is not assignable to parameter of type ‘File’.

it’s like on my react-naitve side its corrupt, and then on the node side I can’t feed it anything but “File”

I don’t think what I did applies to React Native since I am using browser functionalities to record the audio but here it is. I am setting up a MediaRecorder in an effect and using buttons to call mediaRecorder.start() and stop() functions.

useEffect(() => {
	navigator.mediaDevices
		.getUserMedia({ audio: true, video: false })
		.then(stream => {
			mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
			mediaRecorder.ondataavailable = event => {chunks.push(event.data)}
			mediaRecorder.onstop = () =>{
				const audioBlob = new Blob(chunks, { type: 'audio/webm' })
				onRecordingEnd({ blob: audioBlob })
				chunks = []
			}
		})
}, [onRecordingEnd])

I also noticed that here I set the mimeType to webm and on the formData I set it to wav but it doesn’t cause a problem. And probably Chrome is already setting the mimeType of the record to video/webm according to lots of forum posts.

Thanks for all the info, so my nest was complaining that it wasn’t a File object but I just casted it to any fs.createReadStream(path) as any and it worked

I am doing the same call but I get an ECONNRESET error. I have no idea what’s going on.

thanks
Wil

Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:220:20) {
errno: -4077,
code: ‘ECONNRESET’,
syscall: ‘read’,


},
response: undefined,
isAxiosError: true,
toJSON: [Function: toJSON]

Getting this same error. Both in Node API and Python API. Any luck?

can someone help? I have no idea what to do from here.