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

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.