Skip to content

Uploading content to MYO cards

1. Request Upload URL

First, get request a secure URL via the /uploadUrl endpoint. This is a temporary URL on our servers where you'll upload the audio file. This URL is secure and specific to this upload:

javascript
const response = await fetch(
  "https://api.yotoplay.com/media/transcode/audio/uploadUrl",
  {
    method: "GET",
    headers: {
      Authorization: "Bearer YOUR_ACCESS_TOKEN",
      Accept: "application/json",
    },
  }
);

const {
  upload: { uploadUrl, uploadId },
} = await response.json();

The response gives us an upload object with the following properties:

  • uploadUrl: The URL where we'll upload our audio file
  • uploadId: A unique identifier we'll use to check the transcoding status of the audio file.

2. Upload your audio file to the URL

Now you can upload you actual audio file to the URL we received with a PUT request:

javascript
await fetch(uploadUrl, {
  method: "PUT",
  body: new Blob([audioFile], {
    type: audioFile.type,
    ContentDisposition: audioFile.name,
  }),
  headers: {
    "Content-Type": audioFile.type,
  },
});

Make sure to set the Content-Type header to match the type of your audio file.

3. Wait for transcoding

After upload, Yoto needs to transcode the audio to make it compatible with our Yoto players. We need to keep polling the API until the process is complete:

javascript
let transcodedAudio = null;
while (true) {
  const response = await fetch(
    `https://api.yotoplay.com/media/upload/${uploadId}/transcoded?loudnorm=false`,
    {
      headers: {
        Authorization: "Bearer YOUR_ACCESS_TOKEN",
        Accept: "application/json",
      },
    }
  );

  const data = await response.json();

  if (data.transcode.transcodedSha256) {
    transcodedAudio = data.transcode;
    break;
  }

  // Wait 500ms before next check
  await new Promise((resolve) => setTimeout(resolve, 500));
}

We know that the transcoding is complete when we receive a transcodedSha256 in the response. This is a hash of the transcoded audio file. We'll use this value to put our audio file in a track.

4. Update Card Content

We add our audio file to a track, using our transcoded value, and insert that track into a chapter.

javascript
const chapters = [
  {
    key: "01",
    title: "Your Audio Title",
    tracks: [
      {
        key: "01",
        title: "Your Audio Title",
        trackUrl: `yoto:#${transcodedAudio.transcodedSha256}`,
        duration: transcodedAudio.transcodedInfo.duration,
        fileSize: transcodedAudio.transcodedInfo.fileSize,
        channels: transcodedAudio.transcodedInfo.channels,
        format: transcodedAudio.transcodedInfo.format,
        type: "audio",
      },
    ],
  },
];

const updateResponse = await fetch("https://api.yotoplay.com/content", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${accessToken}`,
    "Content-Type": "application/json",
  },
  // set the content of the card to the chapters array we created
  body: JSON.stringify({
    // specify the id of an existing card to update it
    cardId,
    content: {
      chapters,
    },
  }),
});

const result = await updateResponse.json();

The process is complete when this final request returns successfully. Your audio should now appear in your library. You can now link the playlist to a Make Your Own (MYO) card via your Yoto player or the Yoto app.