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",
          });
        }}
      />
    </AudioContextProvider>
  );
}

tsx

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.