FileZen + AI Audio Generation Integration

Learn how to integrate FileZen’s powerful file upload capabilities with AI audio generation services to automatically save generated audio files to your cloud storage. This recipe demonstrates how to create an AI audio generator that seamlessly uploads results to FileZen.

Overview

This integration combines AI audio generation services (like ElevenLabs) with FileZen’s file management to create a complete workflow: generate audio from text prompts and automatically store them in your cloud storage with CDN delivery.

Key Benefits

🔗 CDN Delivery: Get optimized CDN URLs for all generated audio files
📝 Metadata Support: Store generation prompts and other metadata with files
🎨 Rich Integration: Seamlessly combine AI generation with cloud storage

Prerequisites

Before starting, make sure you have:

Node.js 18+ installed
A FileZen account and API key
Basic knowledge of React and Next.js
FileZen set up in your project (follow the Next.js guide or other framework guides)

For this recipe, we’ll use Pollinations.ai as the AI audio generation service, which provides free text-to-speech via API.

Core Integration

Here’s how to integrate AI audio generation with FileZen upload:


import { useZenClient } from '@filezen/react';
 
const zenClient = useZenClient();
 
// Generate AI audio and upload to FileZen in one workflow
const generateAndUpload = async (text: string, voice: string): Promise<ZenFile> => {
  // Step 1: Generate audio using Pollinations.ai service
  const postData = {
    model: 'openai-audio',
    modalities: ['text', 'audio'],
    audio: { voice: voice, format: 'wav' },
    messages: [
      {
        role: 'developer',
        content: 'You are a versatile AI',
      },
      {
        role: 'user',
        content: 'Convert this longer text into speech using the selected voice.',
      },
      {
        role: 'user',
        content: text,
      },
    ],
  };
 
  const audioResponse = await fetch('https://text.pollinations.ai/openai', {
    method: 'POST',
    body: JSON.stringify(postData),
    headers: {
      'content-type': 'application/json',
    },
  });
 
  if (!audioResponse.ok) {
    throw new Error(`Failed to fetch audio: ${audioResponse.statusText}`);
  }
 
  const audioResponseJson = await audioResponse.json();
  const audioDataBase64 = audioResponseJson['choices']?.[0]?.['message']?.['audio']?.['data'];
  
  if (!audioDataBase64) {
    throw new Error('Invalid response: Expected audio file');
  }
  
  // Step 2: Upload generated audio to FileZen
  const uploadResult = await zenClient.upload('data:audio/wav;base64,' + audioDataBase64, {
    name: `ai-generated-audio-${Date.now()}.wav`,
    mimeType: 'audio/wav',
    metadata: {
      text: text,
      voice: voice,
      generatedAt: new Date().toISOString(),
      source: 'ai-audio-generation',
    },
  });
  
  if (uploadResult.error) {
    throw new Error(uploadResult.error.message);
  }
  
  return uploadResult.file;
};

Complete Component Implementation

For a complete working example with UI, state management, and progress tracking, see the AIAudioGeneration component on GitHub .

This integration provides a complete workflow for AI-powered audio generation with automatic cloud storage, making it easy to create, manage, and serve AI-generated audio content through FileZen’s robust infrastructure.