Adding background music to a web app is one of those features that sounds simple until you try to do it legally. Streaming APIs like Spotify prohibit use in third-party apps. Stock music libraries are expensive at scale. Building a music system from scratch is months of work.
A music generation API solves all three problems. This post walks through how the SOUNDRAW Music API works and how to structure a React or Next.js integration: from protecting your API key to handling the async generation pattern and playing the result.
The core concept: generation is async
The most important thing to understand before you start building is that the SOUNDRAW API is asynchronous. When you request a track, the API does not return a file URL immediately. Instead it returns a request_id, and you poll a results endpoint until the track is ready.
The flow looks like this:
POST https://soundraw.io/api/v3/ → { request_id: "abc123" }GET https://soundraw.io/api/v3 → { status: "processing" } // poll again
GET https://soundraw.io/api/v3 → { status: "done", result: { m4a_url: "...", bpm: 115, ... } }This pattern is common for generation tasks and important to handle correctly — if you treat it like a synchronous request, your UI will block or time out.
What you send
The main compose endpoint accepts a handful of parameters. length (in seconds) is the only required one. Everything else is optional — if you skip them, the API will pick automatically.
{ "length": 60, "moods": ["Happy"], "genres": ["Pop"], "themes": ["Vlogs"], "tempo": ["normal"], "file_format": ["m4a"]}The full list of supported moods, genres, and themes is extensive: covering everything from "Lofi Hip Hop" and "Tokyo night pop" to "Horror & Thriller" and "Workout & Wellness". This is covered in detail in the API documentation.
One practical note: use m4a as your file format. The docs recommend it as the default because it has the best quality, smallest file size, and fastest response time.
What you get back
Once status is done, the result includes a direct download URL, the BPM, length, and a share_link that opens the track in SOUNDRAW's editor where users can customise it further. Good to know: our AI is completely trained in-house, so the music is completely safe to use, even commercially.
{ "status": "done", "result": { "m4a_url": "https://...", "share_link": "https://soundraw.io/edit_music?m=...", "bpm": 115, "length": 60.4 }}
How to structure it in Next.js
The key architectural decision is keeping your API key server-side. In Next.js this means creating an API route that proxies requests to SOUNDRAW:, your frontend calls your own route, your route calls SOUNDRAW with the key in the header.
At the React level, the natural pattern is a custom hook that manages the generation lifecycle: starting the request, polling for the result, and exposing a loading state and the final track URL to your component.
// rough shape of the hookconst { status, track, generate } = useMusicGenerator();// status: 'idle' | 'processing' | 'done' | 'failed'// track.m4a_url — ready to play when status === 'done'The component itself can be as simple or complex as your product needs: a generate button with a loading indicator and an HTML <audio> element covers the basic case. The share_link in the response is also worth exposing if you want users to be able to open and customise their track in SOUNDRAW directly.
What users can do with the output
Every track generated through the SOUNDRAW API is royalty-free and owned by the user. They can upload it to YouTube, TikTok, or Instagram without copyright claims, use it in commercial projects or ads, and monetise any content that includes it. No per-use fees, no licensing forms.
The Starter Plan covers up to 100 songs per month at $29.99. The Pro Plan covers up to 1,000 songs per month at $300. Full API documentation is available when you sign up.
You can access the full documentation and directly get access by clicking the button below
Further reading
- Why music copyright hits app developers so hard
- How Canva, Captions, and Filmora use the SOUNDRAW API at scale
