[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.16 0.02 250); --foreground: oklch(0.95 0.01 200); --card: oklch(0.2 0.02 250); --card-foreground: oklch(0.95 0.01 200); --popover: oklch(0.2 0.02 250); --popover-foreground: oklch(0.95 0.01 200); --primary: oklch(0.7 0.15 180); --primary-foreground: oklch(0.15 0.02 250); --secondary: oklch(0.25 0.02 250); --secondary-foreground: oklch(0.85 0.01 200); --muted: oklch(0.25 0.02 250); --muted-foreground: oklch(0.6 0.02 200); --accent: oklch(0.7 0.15 180); --accent-foreground: oklch(0.15 0.02 250); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.3 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.7 0.15 180); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.18 0.02 250); --sidebar-foreground: oklch(0.95 0.01 200); --sidebar-primary: oklch(0.7 0.15 180); --sidebar-primary-foreground: oklch(0.15 0.02 250); --sidebar-accent: oklch(0.25 0.02 250); --sidebar-accent-foreground: oklch(0.95 0.01 200); --sidebar-border: oklch(0.3 0.02 250); --sidebar-ring: oklch(0.7 0.15 180); } .dark { --background: oklch(0.16 0.02 250); --foreground: oklch(0.95 0.01 200); --card: oklch(0.2 0.02 250); --card-foreground: oklch(0.95 0.01 200); --popover: oklch(0.2 0.02 250); --popover-foreground: oklch(0.95 0.01 200); --primary: oklch(0.7 0.15 180); --primary-foreground: oklch(0.15 0.02 250); --secondary: oklch(0.25 0.02 250); --secondary-foreground: oklch(0.85 0.01 200); --muted: oklch(0.25 0.02 250); --muted-foreground: oklch(0.6 0.02 200); --accent: oklch(0.7 0.15 180); --accent-foreground: oklch(0.15 0.02 250); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.3 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.7 0.15 180); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.18 0.02 250); --sidebar-foreground: oklch(0.95 0.01 200); --sidebar-primary: oklch(0.7 0.15 180); --sidebar-primary-foreground: oklch(0.15 0.02 250); --sidebar-accent: oklch(0.25 0.02 250); --sidebar-accent-foreground: oklch(0.95 0.01 200); --sidebar-border: oklch(0.3 0.02 250); --sidebar-ring: oklch(0.7 0.15 180); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="hooks/use-speech.ts" isMerged="true" "use client"; import { useState, useEffect, useCallback, useRef } from "react"; interface UseSpeechOptions { rate?: number; pitch?: number; volume?: number; voice?: SpeechSynthesisVoice | null; } interface UseSpeechReturn { speak: (text: string) => void; pause: () => void; resume: () => void; stop: () => void; isSpeaking: boolean; isPaused: boolean; voices: SpeechSynthesisVoice[]; currentWordIndex: number; progress: number; } export function useSpeech(options: UseSpeechOptions = {}): UseSpeechReturn { const { rate = 1, pitch = 1, volume = 1, voice = null } = options; const [isSpeaking, setIsSpeaking] = useState(false); const [isPaused, setIsPaused] = useState(false); const [voices, setVoices] = useState([]); const [currentWordIndex, setCurrentWordIndex] = useState(0); const [progress, setProgress] = useState(0); const utteranceRef = useRef(null); const textLengthRef = useRef(0); const charIndexRef = useRef(0); useEffect(() => { if (typeof window === "undefined" || !window.speechSynthesis) return; const loadVoices = () => { const availableVoices = window.speechSynthesis.getVoices(); const englishVoices = availableVoices.filter( (v) => v.lang.startsWith("en") ); setVoices(englishVoices.length > 0 ? englishVoices : availableVoices); }; loadVoices(); window.speechSynthesis.onvoiceschanged = loadVoices; return () => { window.speechSynthesis.onvoiceschanged = null; }; }, []); const speak = useCallback( (text: string) => { if (typeof window === "undefined" || !window.speechSynthesis) return; window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.rate = rate; utterance.pitch = pitch; utterance.volume = volume; if (voice) { utterance.voice = voice; } else if (voices.length > 0) { // Prefer a natural sounding voice const preferredVoice = voices.find( (v) => v.name.includes("Natural") || v.name.includes("Premium") || v.name.includes("Samantha") ) || voices[0]; utterance.voice = preferredVoice; } textLengthRef.current = text.length; charIndexRef.current = 0; utterance.onstart = () => { setIsSpeaking(true); setIsPaused(false); }; utterance.onend = () => { setIsSpeaking(false); setIsPaused(false); setProgress(100); setCurrentWordIndex(0); }; utterance.onpause = () => { setIsPaused(true); }; utterance.onresume = () => { setIsPaused(false); }; utterance.onboundary = (event) => { if (event.name === "word") { setCurrentWordIndex((prev) => prev + 1); charIndexRef.current = event.charIndex; const newProgress = (event.charIndex / textLengthRef.current) * 100; setProgress(Math.min(newProgress, 100)); } }; utteranceRef.current = utterance; window.speechSynthesis.speak(utterance); }, [rate, pitch, volume, voice, voices] ); const pause = useCallback(() => { if (typeof window !== "undefined" && window.speechSynthesis) { window.speechSynthesis.pause(); } }, []); const resume = useCallback(() => { if (typeof window !== "undefined" && window.speechSynthesis) { window.speechSynthesis.resume(); } }, []); const stop = useCallback(() => { if (typeof window !== "undefined" && window.speechSynthesis) { window.speechSynthesis.cancel(); setIsSpeaking(false); setIsPaused(false); setProgress(0); setCurrentWordIndex(0); } }, []); return { speak, pause, resume, stop, isSpeaking, isPaused, voices, currentWordIndex, progress, }; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'ReadAloud - Text to Speech Reader', description: 'Paste any text and have it read aloud in a natural voice', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/text-reader.tsx" isMerged="true" "use client"; import { useState } from "react"; import { useSpeech } from "@/hooks/use-speech"; import { Button } from "@/components/ui/button"; import { Slider } from "@/components/ui/slider"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Play, Pause, Square, Volume2, Gauge, Mic2, FileText, } from "lucide-react"; export function TextReader() { const [text, setText] = useState(""); const [selectedVoice, setSelectedVoice] = useState(null); const [rate, setRate] = useState(1); const [volume, setVolume] = useState(1); const { speak, pause, resume, stop, isSpeaking, isPaused, voices, progress } = useSpeech({ rate, volume, voice: selectedVoice, }); const handlePlay = () => { if (!text.trim()) return; if (isPaused) { resume(); } else if (!isSpeaking) { speak(text); } else { pause(); } }; const handleStop = () => { stop(); }; const handleVoiceChange = (voiceName: string) => { const voice = voices.find((v) => v.name === voiceName); setSelectedVoice(voice || null); }; const wordCount = text.trim() ? text.trim().split(/\s+/).length : 0; const estimatedMinutes = Math.ceil(wordCount / (150 * rate)); return (

{/* Header */}

ReadAloud

Text to Speech Reader

{wordCount > 0 && (

{wordCount.toLocaleString()} words {estimatedMinutes > 0 && ` · ~${estimatedMinutes} min`}

)}

{/* Main Content */}

{/* Text Input Area */}

setText(e.target.value)}
            placeholder="Paste your text here... transcripts, articles, PDFs, science journals — anything you want read aloud."
            className="w-full h-full min-h-[300px] lg:min-h-[400px] resize-none bg-card border border-border rounded-xl p-6 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent leading-relaxed text-base"
            disabled={isSpeaking}
          />

{text.length === 0 && (
            <div className="absolute bottom-6 left-6 right-6 flex items-center gap-2 text-muted-foreground pointer-events-none">
              <FileText className="w-4 h-4" />
              <span className="text-sm">Supports any text content</span>
            </div>
          )}
        </div>

{/* Progress Bar */}
        {isSpeaking && (
          <div className="w-full bg-muted rounded-full h-1.5 overflow-hidden">
            <div
              className="h-full bg-primary transition-all duration-300 ease-out"
              style={{ width: `${progress}%` }}
            />
          </div>
        )}

{/* Controls */}
        <div className="bg-card border border-border rounded-xl p-6 space-y-6">
          {/* Voice Selection */}
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <label className="text-sm font-medium text-muted-foreground mb-2 block">
                Voice
              </label>
              <Select
                value={selectedVoice?.name || ""}
                onValueChange={handleVoiceChange}
                disabled={isSpeaking}
              >
                <SelectTrigger className="w-full bg-input border-border">
                  <SelectValue placeholder="Select a voice" />
                </SelectTrigger>
                <SelectContent>
                  {voices.map((voice) => (
                    <SelectItem key={voice.name} value={voice.name}>
                      {voice.name.replace(/Microsoft |Google /, "")}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{/* Speed Control */}
            <div className="flex-1">
              <label className="text-sm font-medium text-muted-foreground mb-2 flex items-center gap-2">
                <Gauge className="w-4 h-4" />
                Speed: {rate.toFixed(1)}x
              </label>
              <Slider
                value={[rate]}
                onValueChange={([value]) => setRate(value)}
                min={0.5}
                max={2}
                step={0.1}
                disabled={isSpeaking}
                className="mt-3"
              />
            </div>

{/* Volume Control */}
            <div className="flex-1">
              <label className="text-sm font-medium text-muted-foreground mb-2 flex items-center gap-2">
                <Volume2 className="w-4 h-4" />
                Volume: {Math.round(volume * 100)}%
              </label>
              <Slider
                value={[volume]}
                onValueChange={([value]) => setVolume(value)}
                min={0}
                max={1}
                step={0.1}
                disabled={isSpeaking}
                className="mt-3"
              />
            </div>
          </div>

{/* Playback Controls */}
          <div className="flex items-center justify-center gap-4">
            <Button
              variant="outline"
              size="icon"
              onClick={handleStop}
              disabled={!isSpeaking}
              className="w-12 h-12 rounded-full bg-transparent"
            >
              <Square className="w-5 h-5" />
              <span className="sr-only">Stop</span>
            </Button>

<Button
              onClick={handlePlay}
              disabled={!text.trim()}
              size="lg"
              className="w-16 h-16 rounded-full"
            >
              {isSpeaking && !isPaused ? (
                <Pause className="w-6 h-6" />
              ) : (
                <Play className="w-6 h-6 ml-1" />
              )}
              <span className="sr-only">
                {isSpeaking && !isPaused ? "Pause" : "Play"}
              </span>
            </Button>

<div className="w-12 h-12" /> {/* Spacer for visual balance */}
          </div>

{/* Status */}
          {isSpeaking && (
            <p className="text-center text-sm text-muted-foreground">
              {isPaused ? "Paused" : "Reading..."}
              {!isPaused && ` · ${Math.round(progress)}% complete`}
            </p>
          )}
        </div>
      </main>

{/* Footer */}
      <footer className="border-t border-border px-6 py-4">
        <div className="max-w-4xl mx-auto text-center text-sm text-muted-foreground">
          Powered by Web Speech API · Works best in Chrome, Edge, or Safari
        </div>
      </footer>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import { TextReader } from "@/components/text-reader";

export default function Page() {
  return <TextReader />;
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This