> ## 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.

# Drag and drop audio

Drag-and-drop functionality for audio elements.

## Running this example

To run this example locally:

1. If you haven't already, create a new app in the [Developer Portal](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

   ```shell
   git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
   cd canva-apps-sdk-starter-kit
   ```

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example drag_and_drop_audio
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import React from "react";
    import { Rows, Text, AudioCard, AudioContextProvider } from "@canva/app-ui-kit";
    import { upload } from "@canva/asset";
    import { addAudioTrack, ui } from "@canva/design";
    import * as styles from "styles/components.css";
    import { useFeatureSupport } from "@canva/app-hooks";

    const AUDIO_DURATION_MS = 86_047;

    // Uploads audio asset to Canva's asset library for use in designs
    const uploadAudio = () => {
      return upload({
        title: "MP3 audio track",
        durationMs: AUDIO_DURATION_MS,
        mimeType: "audio/mp3",
        type: "audio",
        url: "https://www.canva.dev/example-assets/audio-import/audio.mp3",
        aiDisclosure: "none",
      });
    };

    const insertAudio = async () => {
      const audio = await uploadAudio();
      // Add the uploaded audio as an audio track to the current design
      addAudioTrack({
        ref: audio.ref,
      });
    };

    // Handles drag start event to initiate Canva's drag-and-drop functionality
    const onDragStart = (event: React.DragEvent<HTMLElement>) => {
      // Start Canva's drag-to-point interaction for audio elements
      ui.startDragToPoint(event, {
        type: "audio",
        resolveAudioRef: uploadAudio, // Function to resolve audio reference when dropped
        durationMs: AUDIO_DURATION_MS,
        title: "MP3 audio track",
      });
    };

    export const App = () => {
      // Check if the required Canva APIs are supported in the current context
      const isSupported = useFeatureSupport();
      return (
        <AudioContextProvider>
          <div className={styles.scrollContainer}>
            <Rows spacing="1u">
              <Text>
                This example demonstrates how apps can support drag-and-drop of
                audio.
              </Text>
              <AudioCard
                audioPreviewUrl="https://www.canva.dev/example-assets/audio-import/audio.mp3"
                durationInSeconds={AUDIO_DURATION_MS / 1000}
                ariaLabel="Add audio to design"
                title="MP3 audio track"
                onDragStart={onDragStart}
                onClick={insertAudio}
                disabled={
                  !isSupported(addAudioTrack) || !isSupported(ui.startDragToPoint)
                }
              />
            </Rows>
          </div>
        </AudioContextProvider>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { AppUiProvider } from "@canva/app-ui-kit";
    import { createRoot } from "react-dom/client";
    import { App } from "./app";
    import "@canva/app-ui-kit/styles.css";
    import type { DesignEditorIntent } from "@canva/intents/design";
    import { prepareDesignEditor } from "@canva/intents/design";

    async function render() {
      const root = createRoot(document.getElementById("root") as Element);

      root.render(
        <AppUiProvider>
          <App />
        </AppUiProvider>,
      );
    }

    const designEditor: DesignEditorIntent = { render };
    prepareDesignEditor(designEditor);

    // Hot Module Replacement for development (automatically reloads the app when changes are made)
    if (module.hot) {
      module.hot.accept("./app", render);
    }
    ```
  </Tab>

  <Tab name="README.md">
    ```markdown
    # Drag and drop audio

    This example demonstrates how to implement drag-and-drop functionality for audio files using AudioCard and startDragToPoint. It shows audio upload, playback preview, and design integration patterns.

    For API reference docs and instructions on running this example, see: https://www.canva.dev/docs/apps/examples/drag-and-drop-audio/.

    Related examples: See drag_and_drop/drag_and_drop_video for video drag-and-drop patterns, or asset_upload for direct audio import without drag-and-drop.

    NOTE: This example differs from what is expected for public apps to pass a Canva review:

    - Static assets are used for demonstration purposes only. Production apps should host assets on a CDN/hosting service and use the `upload` function from the `@canva/asset` package
    - Audio format validation is not implemented. Production apps should validate audio formats and handle unsupported audio types gracefully
    - Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
    - Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements
    - The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`addAudioTrack`](https://www.canva.dev/docs/apps/api/latest/design-add-audio-track/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)
* [`ui.startDragToPoint`](https://www.canva.dev/docs/apps/api/latest/design-ui-start-drag-to-point/)
* [`upload`](https://www.canva.dev/docs/apps/api/latest/asset-upload/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)