Audio Show Creator

Forms 66

About

Audio Show Creator A comprehensive UI component for creating and configuring an audio show from a document. It features options for format, voice selection, engine, and quality, all wrapped in a clean, modal-like card. It uses framer-motion for a smooth entry animation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Audio Show Creator to your project and fits it to your theme.

Code

How Audio Show Creator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { AudioShowCreator } from "@/components/ui/audio-show-creator";
import {
  Mic,
  Languages,
  Sparkles,
  Award,
} from "lucide-react";

// Sample data for the component's props
const formatStyles = [{ value: "interview", label: "Interview Mode" }];

const hostVoices = [
  { value: "alex", label: "Alex", color: "bg-gradient-to-br from-purple-400 to-indigo-600" },
  { value: "sam", label: "Sam", color: "bg-gradient-to-br from-teal-400 to-cyan-600" },
  { value: "jordan", label: "Jordan", color: "bg-gradient-to-br from-amber-400 to-orange-600" },
];

const guestVoices = [
  { value: "morgan", label: "Morgan", color: "bg-gradient-to-br from-orange-400 to-rose-600" },
  { value: "casey", label: "Casey", color: "bg-gradient-to-br from-lime-400 to-green-600" },
  { value: "riley", label: "Riley", color: "bg-gradient-to-br from-sky-400 to-blue-600" },
];

const voiceEngines = [
    { value: 'eleven_v2', label: 'Eleven AI v2', icon: Sparkles },
    { value: 'deepgram_v1', label: 'Deepgram v1', icon: Mic },
];

const languages = [
    { value: 'auto', label: 'Auto-detect', icon: Languages },
    { value: 'en-us', label: 'English (US)' },
    { value: 'es-es', label: 'Spanish (Spain)' },
];

const audioQualities = [
    { value: 'studio', label: 'Studio', icon: Award },
    { value: 'high', label: 'High' },
    { value: 'standard', label: 'Standard' },
];

export default function AudioShowCreatorDemo() {
  const handleGenerate = () => {
    alert("Generate action triggered!");
  };

  const handleClose = () => {
    alert("Close action triggered!");
  };

  return (
    <div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4 md:p-10">
      <AudioShowCreator
        formatStyles={formatStyles}
        hostVoices={hostVoices}
        guestVoices={guestVoices}
        voiceEngines={voiceEngines}
        languages={languages}
        audioQualities={audioQualities}
        onGenerate={handleGenerate}
        onClose={handleClose}
      />
    </div>
  );
}