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

# DraggableAudio

API reference for the DraggableAudio component.

**Warning:** The `DraggableAudio` component has been deprecated. Instead, use the [`AudioCard`](https://www.canva.dev/docs/apps/app-ui-kit/storybook/?path=/docs/canva-app-ui-kit-card-audiocard--docs) component.

## Usage

```tsx
import React from "react";
import { AudioContextProvider } from "components/audio_context";
import { DraggableAudio } from "components/draggable_audio";
import { upload } from "@canva/asset";

export function App() {
  return (
    <AudioContextProvider>
      <DraggableAudio
        title="Example audio"
        durationMs={86047}
        previewUrl="https://www.canva.dev/example-assets/audio-import/audio.mp3"
        resolveAudioRef={() => {
          return upload({
            type: "audio",
            title: "Example audio",
            mimeType: "audio/mp3",
            durationMs: 86047,
            url: "https://www.canva.dev/example-assets/audio-import/audio.mp3",
            aiDisclosure: "none",
          });
        }}
      />
    </AudioContextProvider>
  );
}
```

**Note:** The `AudioContextProvider` component ensures that only one audio file will play at a time.

## Props

<Prop.List>
  <Prop name="title" type="string" required>
    A human-readable title that appears in the Canva editor.
  </Prop>

  <Prop name="url" type="string" required>
    The URL of the audio file.
  </Prop>

  <Prop name="previewUrl" type="string" required>
    The URL of the audio file to play when the user clicks the **Play** button.
  </Prop>

  <Prop name="durationMs" type="number" required>
    The duration of the audio file, in milliseconds.
  </Prop>

  <Prop name="resolveAudioRef" type="function" required>
    A function that returns the result of the [`upload`](https://www.canva.dev/docs/apps/api/latest/asset-upload/) method.
  </Prop>
</Prop.List>