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",
            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

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.