use-cloudinary-docs

useAudio

The useAudio hook gives you the ability to call an MP3 from Cloudinary and apply transformations. The result is a URL generated by the SDK.

Cloudinary treats audio files the same as video files, meaning you can also call the audio from a video inside your account.

import { useAudio } from 'use-cloudinary';
function Audio({ publicId, transformations }) {
const { generateUrl, url, isLoading, isError, error } = useImage({ cloudName: 'testing-hooks-upload' });
React.useEffect(() => {
// the `generateUrl` function will hook internally to the SDK and do a lot of the heavy lifting for generating your image url
generateUrl({
publicId,
transformations
});
});
if (isLoading) return <p>Loading...</p>;
if (isError) return <p>{error.message}</p>;
return (
<audio controls>
<source src={url} type="audio/mp3" />
</audio>
)
}

Args

KeyTypeRequired?Description
cloudNameStringYesYour Cloudinary cloud name, used to identify where we're getting our media from

Return values

KeyTypeDescription
generateUrlFuncAn async function that accepts options and returns the URL of your Cloudinary asset
urlundefined || StringWhen `generateUrl` is successful, `url` will return a URL string. More about React Query's return values here
isLoadingBoolean isLoading state returns a boolean if the query is in a "hard" loading state. This means no cached data and the query is currently fetching.here
isErrroBooleanisError returns a boolean (true) if the query attempt resulted in an error (otherwise false). More about React Query return vairables here
isSuccessBooleanisSuccess returns a boolean (true) if the query attempt resulted in an error (otherwise false).More about React Query return vairables here
isIdleBooleanisIdle returns a boolean (true) if the query is initialized with enabled: false and no initial data is available (otherwise false). More about React Query return vairables here
errorObjectWhen a server error is returned, the error is surfaced to the error object. More about React Query's return values here

generateUrl()

The generateUrl function is just a setState, used to fire off our internal query and pass our options into our SDK to generate our URL.

KeyTypeRequiredDescription
publicIdStringYesThe public id is the name used as a title for the media you want to call
transformationsObjectNoVideo transformations apply for audio as well (e.g., trimming), but dimensional or visual related transformations are ignored. You can even generate waveforms from your audio
Edit this page on GitHub