Using Audio

Importing audio into the page

Similarly to Images and Video, you can add Audio to the page using the addAudio() method of the addOnUISdk.app.document object, which expects a Blob object as the first argument, and a MediaAttribute object with the audio's title (mandatory) and author (optional) as the second.

Example

// sandbox/code.js
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";

addOnUISdk.ready.then(async () => {
  try {
    const audioUrl =
      "https://www.nasa.gov/wp-content/uploads/static/history/alsj/a11/a11a1021133-3114.mp3";

    const audio = await fetch(audioUrl);
    const audioBlob = await audio.blob();

    await addOnUISdk.app.document.addAudio(
      audioBlob, // 👈 Blob object
      {
        title: "Apollo 11 - Lunar Landing",
        author: "NASA",
      }
    );
  } catch (e) {
    console.error("Failed to add the audio", e);
  }
});
Copied to your clipboard
// sandbox/code.js
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";

addOnUISdk.ready.then(async () => {
  try {
    const audioUrl =
      "https://www.nasa.gov/wp-content/uploads/static/history/alsj/a11/a11a1021133-3114.mp3";

    const audio = await fetch(audioUrl);
    const audioBlob = await audio.blob();

    await addOnUISdk.app.document.addAudio(
      audioBlob, // 👈 Blob object
      {
        title: "Apollo 11 - Lunar Landing",
        author: "NASA",
      }
    );
  } catch (e) {
    console.error("Failed to add the audio", e);
  }
});

Please note that you can use fetch() also to get videos that are local to the add-on; in this case, you can use paths relative to the add-on's root.

import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";

addOnUISdk.ready.then(async () => {
  try {
    // 👇 Local audio
     const audioUrl =
      "https://www.nasa.gov/wp-content/uploads/static/history/alsj/a11/a11a1021133-3114.mp3";
    const audio = await fetch(audioUrl);
    // ... same as before
Copied to your clipboard
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";

addOnUISdk.ready.then(async () => {
  try {
    // 👇 Local audio
     const audioUrl =
      "https://www.nasa.gov/wp-content/uploads/static/history/alsj/a11/a11a1021133-3114.mp3";
    const audio = await fetch(audioUrl);
    // ... same as before