> ## Documentation Index
> Fetch the complete documentation index at: https://anam.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Voice Gallery

> Browse and select from available voice options for your personas

export const VoiceGrid = ({voices}) => {
  const [copiedId, setCopiedId] = useState(null);
  const [playingId, setPlayingId] = useState(null);
  const audioRefs = useRef({});
  const copyToClipboard = async (id, name) => {
    try {
      await navigator.clipboard.writeText(id);
      setCopiedId(id);
      setTimeout(() => {
        setCopiedId(null);
      }, 2000);
    } catch (err) {
      console.error("Failed to copy ID: ", err);
    }
  };
  const togglePlayback = id => {
    const audioElement = audioRefs.current[id];
    if (!audioElement) return;
    if (playingId === id) {
      audioElement.pause();
      setPlayingId(null);
    } else {
      if (playingId && audioRefs.current[playingId]) {
        audioRefs.current[playingId].pause();
      }
      audioElement.play();
      setPlayingId(id);
      audioElement.onended = () => {
        setPlayingId(null);
      };
    }
  };
  if (!voices || voices.length === 0) {
    return <p className="text-center text-gray-500">No voices to display.</p>;
  }
  return <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
      {voices.map(voice => <div key={voice.id} className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full">
          <div className="p-4 not-prose">
            <div className="flex justify-between items-center mb-3">
              <h3 className="font-medium text-gray-900">{voice.name}</h3>
              <button onClick={e => copyToClipboard(voice.id, e)} className="rounded-full transition-colors" aria-label={`Copy ${voice.name} voice ID`}>
                {copiedId === voice.id ? <Icon icon="check" size={16} /> : <Icon icon="copy" size={16} />}
              </button>
            </div>
            <div className="flex items-center justify-between mt-4">
              <button onClick={() => togglePlayback(voice.id)} className="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" aria-label={playingId === voice.id ? "Pause voice sample" : "Play voice sample"}>
                {playingId === voice.id ? <Icon icon="pause" size={16} /> : <Icon icon="play" size={16} />}
              </button>
              <div className="text-xs text-gray-500">
                {playingId === voice.id ? "Playing..." : "Click to preview"}
              </div>
            </div>
            <audio ref={el => audioRefs.current[voice.id] = el} src={voice.sampleUrl} preload="none" className="hidden" />
          </div>
        </div>)}
    </div>;
};

<Note>
  To use a voice in your application, copy its ID from the table below and
  include it when creating your session token. See the [Usage in
  Production](/production) guide for more information.
</Note>

## Available Voices

Click on a voice to copy the voice ID.

<VoiceGrid
  voices={[
{
  id: "b7274f87-8b72-4c5b-bf52-954768b28c75",
  name: "Leo",
  sampleUrl: "https://lab.anam.ai/voice_samples/leo.wav",
},
{
  id: "4bdb224b-0342-4986-9831-69a1f059103d",
  name: "Liv",
  sampleUrl: "https://lab.anam.ai/voice_samples/liv.wav",
},
{
  id: "6bfbe25a-979d-40f3-a92b-5394170af54b",
  name: "Cara",
  sampleUrl: "https://lab.anam.ai/voice_samples/cara.wav",
},
{
  id: "04965b9e-ff4c-4b54-a4dc-fba6e458c760",
  name: "Astrid",
  sampleUrl: "https://lab.anam.ai/voice_samples/astrid.wav",
},
{
  id: "c94090ba-7b30-4fe9-9a6d-e4911cef4400",
  name: "Alister",
  sampleUrl: "https://lab.anam.ai/voice_samples/alister.wav",
},
{
  id: "95c6316e-85ac-41ae-a0c1-aa5bf3a91f5a",
  name: "Pablo",
  sampleUrl: "https://lab.anam.ai/voice_samples/pablo.wav",
},
{
  id: "c0954b69-9a2a-4fe2-8134-4e43be70f066",
  name: "William",
  sampleUrl: "https://lab.anam.ai/voice_samples/william.wav",
},
{
  id: "1c6fa8a7-9aa4-4a17-a75e-3e5eb863fccf",
  name: "Sophie",
  sampleUrl: "https://lab.anam.ai/voice_samples/sophie.wav",
},
{
  id: "e9104cf7-d163-4f89-b01a-311f2e8943d0",
  name: "Richard",
  sampleUrl: "https://lab.anam.ai/voice_samples/richard.wav",
},
{
  id: "df2aec93-4b4e-41f2-8d02-b2d615ce184a",
  name: "Mia",
  sampleUrl: "https://lab.anam.ai/voice_samples/mia.wav",
},
{
  id: "f01404e8-d9ab-4aa1-bcba-265776c9ebbc",
  name: "Layla",
  sampleUrl: "https://lab.anam.ai/voice_samples/layla.wav",
},
{
  id: "13ba97ac-88e3-454f-8a49-6f9479dd4586",
  name: "Kevin",
  sampleUrl: "https://lab.anam.ai/voice_samples/kevin.wav",
},
{
  id: "109ecf2e-93c4-40df-9555-328c4a5f0c97",
  name: "Julia",
  sampleUrl: "https://lab.anam.ai/voice_samples/julia.wav",
},
{
  id: "e4531dd3-6e63-4103-ab4a-9bd5b8c8aeed",
  name: "Hunter",
  sampleUrl: "https://lab.anam.ai/voice_samples/hunter.wav",
},
{
  id: "8246d9f7-827e-4a5c-8697-644ce860ca02",
  name: "Gabriel",
  sampleUrl: "https://lab.anam.ai/voice_samples/gabriel.wav",
},
{
  id: "615ad2e8-c34a-4993-8aa3-36fd4dc3a876",
  name: "Finn",
  sampleUrl: "https://lab.anam.ai/voice_samples/finn.wav",
},
{
  id: "7c917e50-c60f-47a2-85a7-78367a8ddc46",
  name: "Bella",
  sampleUrl: "https://lab.anam.ai/voice_samples/bella.wav",
},
{
  id: "912ab254-9f18-4a83-bd9e-e9b1176be287",
  name: "Anne",
  sampleUrl: "https://lab.anam.ai/voice_samples/anne.wav",
},
]}
/>

<Note>
  Localized voices in other languages are available in the [Anam
  Lab](https://lab.anam.ai/).
</Note>