If you haven't already, create a new app in the Developer Portal⁠(opens in a new tab or window). For more information, refer to our Quickstart guide.
In your app's configuration on the Developer Portal⁠(opens in a new tab or window), ensure the "Development URL" is set to http://localhost:8080.

Clone the starter kit:

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

SHELL

Install dependencies:
```
npm install
```
SHELL
Run the example:
```
npm run start drag_and_drop_audio
```
SHELL
Click the Preview URL link shown in the terminal to open the example in the Canva editor.

Example app source code

// 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 "utils/use_feature_support";

const AUDIO_DURATION_MS = 86_047;

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();
  addAudioTrack({
    ref: audio.ref,
  });
};

const onDragStart = (event: React.DragEvent<HTMLElement>) => {
  ui.startDragToPoint(event, {
    type: "audio",
    resolveAudioRef: uploadAudio,
    durationMs: AUDIO_DURATION_MS,
    title: "MP3 Audio Track",
  });
};

export const App = () => {
  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>
  );
};

TYPESCRIPT

import { AppUiProvider } from "@canva/app-ui-kit";
import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";

const root = createRoot(document.getElementById("root") as Element);
function render() {
  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>,
  );
}

render();

if (module.hot) {
  module.hot.accept("./app", render);
}

TYPESCRIPT

# Drag and drop audio

Demonstrates how to implement drag-and-drop functionality for audio files using AudioCard and startDragToPoint. 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, or asset_upload for direct audio import.

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

MARKDOWN

API Reference

Need Help?

Join our Community Forum⁠(opens in a new tab or window)
Report issues with this example on GitHub⁠(opens in a new tab or window)