On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.
App UI Kit
Components
Accordion(opens in a new tab or window)Alert(opens in a new tab or window)Avatar(opens in a new tab or window)AvatarGroup(opens in a new tab or window)AudioCard(opens in a new tab or window)Badge(opens in a new tab or window)Box(opens in a new tab or window)Button(opens in a new tab or window)Carousel(opens in a new tab or window)Checkbox(opens in a new tab or window)CheckboxGroup(opens in a new tab or window)ColorSelector(opens in a new tab or window)Column(opens in a new tab or window)Columns(opens in a new tab or window)CustomizedSelect(opens in a new tab or window)DateInput(opens in a new tab or window)EmbedCard(opens in a new tab or window)FileInput(opens in a new tab or window)FileInputItem(opens in a new tab or window)Flyout(opens in a new tab or window)FlyoutMenu(opens in a new tab or window)FormField(opens in a new tab or window)Grid(opens in a new tab or window)HorizontalCard(opens in a new tab or window)Icons(opens in a new tab or window)ImageCard(opens in a new tab or window)InputPill(opens in a new tab or window)Link(opens in a new tab or window)LoadingIndicator(opens in a new tab or window)Masonry(opens in a new tab or window)MultilineInput(opens in a new tab or window)NumberInput(opens in a new tab or window)Pill(opens in a new tab or window)PillsInput(opens in a new tab or window)Placeholder(opens in a new tab or window)ProgressBar(opens in a new tab or window)RadioGroup(opens in a new tab or window)Rows(opens in a new tab or window)Scrollable(opens in a new tab or window)SearchInputMenu(opens in a new tab or window)SegmentedControl(opens in a new tab or window)Select(opens in a new tab or window)Slider(opens in a new tab or window)Swatch(opens in a new tab or window)Switch(opens in a new tab or window)Tabs(opens in a new tab or window)Text(opens in a new tab or window)TextInput(opens in a new tab or window)TextPlaceholder(opens in a new tab or window)TimeInput(opens in a new tab or window)Title(opens in a new tab or window)TitlePlaceholder(opens in a new tab or window)TruncatedText(opens in a new tab or window)TypographyCard(opens in a new tab or window)VideoCard(opens in a new tab or window)

DraggableAudio

API reference for the DraggableAudio component.

The DraggableAudio component has been deprecated. Instead, use the AudioCard(opens in a new tab or window) component.

Usage

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",
url: "https://www.canva.dev/example-assets/audio-import/audio.mp3",
aiDisclosure: "none",
});
}}
/>
</AudioContextProvider>
);
}
TSX

The AudioContextProvider component ensures that only one audio file will play at a time.

Props

titlestring
Required

A human-readable title that appears in the Canva editor.

urlstring
Required

The URL of the audio file.

previewUrlstring
Required

The URL of the audio file to play when the user clicks the Play button.

durationMsnumber
Required

The duration of the audio file, in milliseconds.

resolveAudioReffunction
Required

A function that returns the result of the upload method.