Udio Wrapper

A Framework-agnostic TypeScript wrapper for interacting with the Udio API to generate music. This library is inspired by UdioWrapper.

Installation

npm install udio-wrapper

Obtaining the Authorization Token

Basic Usage

import { createUdioWrapper } from 'udio-wrapper';

async function generateMusic() {
  // Create a client instance with your auth token
  const client = await createUdioWrapper('your-auth-token-here');
  
  // Create a song
  const song = await client.createSong({
    prompt: 'Relaxing jazz and soulful music',
    seed: 12345, // Optional field for reproducible results
    customLyrics: 'Custom lyrics for your song', // Optional field
  });
  
  console.log('Song created:', song);
  
  // Wait for the song to be ready
  const completedSong = await client.waitForCompletion(song.id);
  console.log('Song is ready:', completedSong);
}

generateMusic();

For Browser Environment

import { createUdioWrapper } from 'udio-wrapper/browser';

const client = createUdioWrapper('your-auth-token-here');

For Node.js Environment

import { createUdioWrapper } from 'udio-wrapper/node';

const client = await createUdioWrapper('your-auth-token-here');

React Sample

import React, { useEffect, useState } from 'react';
import { createUdioWrapper, useUdio, UdioWrapper } from 'udio-wrapper/browser';

function MusicGenerator() {
  const [client, setClient] = useState(null);
  
  useEffect(() => {
    // Initialize the client once when the component mounts
    const client = createUdioWrapper('your-auth-token-here');
    setClient(client);
  }, []);
  
  const { createSong, isLoading } = useUdio(client, { autoPolling: true });
  
  const handleCreateSong = async () => {
    const song = await createSong({
      prompt: 'Upbeat electronic music with synth melody',
    });
    
    console.log('Song created and ready:', song);
  };
  
  if (!client) return <div>Initializing...</div>;
  
  return (
    <div>
      <h1>Udio Music Generator</h1>
      
      <button 
        onClick={handleCreateSong} 
        disabled={isLoading}
      >
        {isLoading ? 'Generating...' : 'Create Song'}
      </button>
    </div>
  );
}

export default MusicGenerator;

Next.js Sample

// pages/api/create-song.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { createUdioWrapper } from 'udio-wrapper/node';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { prompt, customLyrics, seed } = req.body;
  const authToken = process.env.UDIO_AUTH_TOKEN;
  
  const client = await createUdioWrapper(authToken);
  const result = await client.createSong({ prompt, customLyrics, seed });
  
  return res.status(200).json(result);
}

// pages/index.tsx
import { useState } from 'react';
import type { NextPage } from 'next';
import { UdioResponse } from 'udio-wrapper';

const Home: NextPage = () => {
  const [prompt, setPrompt] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [song, setSong] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    
    const response = await fetch('/api/create-song', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ prompt }),
    });
    
    const data = await response.json();
    setSong(data);
    setIsLoading(false);
  };

  return (
    <div className="container">
      <h1>Udio Music Generator</h1>
      
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="prompt">Music Description:</label>
          <textarea
            id="prompt"
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="Describe the music you want to generate..."
            rows={4}
            required
          />
        </div>
        
        <button type="submit" disabled={isLoading || !prompt}>
          {isLoading ? 'Generating...' : 'Create Song'}
        </button>
      </form>
      
      {song && (
        <div className="result">
          <h2>Generated Song</h2>
          <p>Status: {song.status}</p>
          {song.status === 'completed' && (
            <>
              <audio controls src={song.url} />
              <p>
                <a href={song.url} target="_blank" rel="noopener noreferrer">
                  Download Song
                </a>
              </p>
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default Home;

Create a new song

const song = await client.createSong({
  prompt: 'Relaxing jazz with piano and saxophone',
  seed: 12345,
  customLyrics: 'The moonlight dances on the water...'
});

Extend an existing song

const extended = await client.extendSong({
  prompt: 'A more energetic variation with drums',
  audioConditioningPath: 'https://api.udio.com/songs/original.mp3',
  audioConditioningSongId: 'song_123456',
  customLyrics: 'The rhythm picks up as the night unfolds...'
});

Add an outro to an existing song

const outro = await client.addOutro({
  prompt: 'A gentle, fading conclusion',
  audioConditioningPath: 'https://api.udio.com/songs/extended.mp3',
  audioConditioningSongId: 'song_789012',
  customLyrics: 'As the melody fades into silence...'
});

Create a complete song sequence

const sequence = await client.createCompleteSequence({
  shortPrompt: 'A peaceful melody with acoustic guitar',
  extendPrompts: [
    'Add piano and soft percussion',
    'Introduce string instruments'
  ],
  outroPrompt: 'A gentle conclusion with fading instruments',
  numExtensions: 2,
  customLyricsShort: 'The journey begins...',
  customLyricsExtend: [
    'Moving forward with purpose...',
    'Reaching new heights of emotion...'
  ],
  customLyricsOutro: 'Until we meet again...'
});

Get song status

const status = await client.getSongStatus('song_123456');

Wait for song completion

const completedSong = await client.waitForCompletion('song_123456', {
  pollingInterval: 3000,
  maxAttempts: 30,
  onProgress: (status) => {
    console.log(`Current status: ${status.status}`);
  }
});

Contributing

Thanks to everyone who has contributed to this project so far.

Trademark Acknowledgment

"Udio" and the Udio logo are trademarks or registered trademarks of Uncharted Labs, Inc. This project, "udio-wrapper", is an independent and unofficial solution developed by the community and is not affiliated with, sponsored by, or endorsed by Uncharted Labs, Inc.

Fair Use Statement

The use of the Udio trademark and logo in this project is for referential purposes only, to indicate compatibility and interoperability with the Udio software. We acknowledge and respect the intellectual property rights of Uncharted Labs, Inc.

Non-Commercial Status

This project is an open-source, non-commercial initiative developed to enhance the user experience of Udio users. We do not claim any ownership rights to the Udio trademark or logo.

Disclaimer of Affiliation

This project:

• Is not officially associated with Uncharted Labs, Inc or any of its subsidiaries.
• Is not produced or maintained by Uncharted Labs, Inc or any of its subsidiaries.
• Does not imply any endorsement by Uncharted Labs, Inc or any of its subsidiaries.

Usage Guidelines

The Udio trademark and logo are used strictly within fair use guidelines and solely for:

1. Describing the project's compatibility with Udio
2. Referencing the official Udio software
3. Directing users to official Udio resources

Modifications and Removal

We respect the rights of trademark holders and will promptly address any concerns regarding the use of trademarks or logos. If you are a representative of Uncharted Labs, Inc. and have concerns about the use of the trademark or logo in this project, please contact us immediately.