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><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",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
title
string
Required
A human-readable title that appears in the Canva editor.
url
string
Required
The URL of the audio file.
previewUrl
string
Required
The URL of the audio file to play when the user clicks the Play button.
durationMs
number
Required
The duration of the audio file, in milliseconds.
resolveAudioRef
function
Required
A function that returns the result of the upload
method.