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)CustomizableSelect(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><DraggableAudiotitle="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>);}
TSX
The AudioContextProvider component ensures that only one audio file will play at a time.
Props
titlestringRequired
A human-readable title that appears in the Canva editor.
urlstringRequired
The URL of the audio file.
previewUrlstringRequired
The URL of the audio file to play when the user clicks the Play button.
durationMsnumberRequired
The duration of the audio file, in milliseconds.
resolveAudioReffunctionRequired
A function that returns the result of the upload method.