improved error audio handling

Author: thegamerhat

public/error_audio.mp3

@@ -1,4 +1,4 @@
-import {interpolate, z} from 'remotion';
+import {interpolate, staticFile, z} from 'remotion';
 import {useCallback, useEffect, useState} from 'react';
 import {
 	Audio,
@@ -10,6 +10,7 @@ import {
 } from 'remotion';
 import {getTTSFromServer} from '../lib/client-utils';
 import {RequestMetadata} from '../lib/interfaces';
+import {FALLBACK_AUDIO_URL} from '../server/TextToSpeech/constants';
 
 export const Text: React.FC<RequestMetadata> = (props) => {
 	const {titleText, titleColor, pitch, speakingRate, voice, subtitleText} =
@@ -58,7 +59,15 @@ export const Text: React.FC<RequestMetadata> = (props) => {
 	return (
 		<>
 			{audioUrl ? (
-				<Audio id="TTS Audio" about="TTS Audio" src={audioUrl} />
+				<Audio
+					id="TTS Audio"
+					about="TTS Audio"
+					src={
+						audioUrl === FALLBACK_AUDIO_URL
+							? staticFile(FALLBACK_AUDIO_URL)
+							: audioUrl
+					}
+				/>
 			) : (
 				<></>
 			)}

src/HelloWorld/Title.tsx

@@ -45,17 +45,17 @@ export const RemotionRoot: React.FC = () => {
 				fps={30}
 				width={1920}
 				height={1080}
-				defaultProps={{
-					titleText:
-						'Text to speech on Remotion using Google Text-to-Speech + Firebase' as const,
-					subtitleText:
-						'With these powerful tools, what will you build?' as const,
-					titleColor: '#2E8AEA' as const,
-					voice: 'Woman 1 (US)' as const,
-					pitch: 0,
-					speakingRate: 1,
-				}}
-				// As RequestMetadata
+				defaultProps={
+					{
+						titleText:
+							'Text to speech on Remotion using Google Text-to-Speech + Firebase',
+						subtitleText: 'With these powerful tools, what will you build?',
+						titleColor: '#2E8AEA',
+						voice: 'Woman 1 (US)',
+						pitch: 0,
+						speakingRate: 1,
+					} as const
+				}
 			/>
 		</>
 	);

src/Root.tsx

@@ -1,11 +1,9 @@
-import {staticFile} from 'remotion';
-
 export const FIREBASE_BUCKET_NAME = process.env.FIREBASE_BUCKET_NAME || '';
 
 export const SERVER_URL = `http://localhost:${process.env.SERVER_PORT || 5050}`;
 export const audioDirectoryInBucket = 'remotion-gtts';
 
-export const FALLBACK_AUDIO_URL = staticFile('error_audio.mp3');
+export const FALLBACK_AUDIO_URL = '/error_audio.mp3';
 
 export const voices = {
 	'Man 1 (US)': {name: 'en-US-Neural2-D', languageCode: 'en-US'},

src/server/TextToSpeech/constants.ts

@@ -27,7 +27,10 @@ app.post(`/getdata`, async (req, res) => {
 		return res.json({url: audioURL} as ServerResponse).end();
 	} catch (err) {
 		console.error(err);
-		return res.json({url: FALLBACK_AUDIO_URL} as ServerResponse).end();
+		return res
+			.status(200)
+			.json({url: FALLBACK_AUDIO_URL} as ServerResponse)
+			.end();
 	}
 });