AkurAI-Framework / site/frontend/ai/components/media/audio.js

Latest change 36f53e8d189d0609aaabc65e705cf9db9d497d14 - Port Media components as vanilla ES modules by Ólafur Búi Ólafsson

// Audio component — renders a native <audio controls> card with title.

export const def = {
  name: "audio",
  category: "Media",
  title: "Audio",

  match(payload) {
    return typeof payload?.src === "string";
  },

  render(payload, ctx) {
    const { src, title = "" } = payload;

    const card = document.createElement("div");
    card.className = "card";

    if (title) {
      const titleEl = document.createElement("p");
      titleEl.style.margin = "0 0 12px 0";
      titleEl.style.fontSize = "14px";
      titleEl.style.fontWeight = "600";
      titleEl.style.color = "var(--fg)";
      titleEl.textContent = title;
      card.appendChild(titleEl);
    }

    // XSS safety: only set src from payload, never innerHTML
    const audio = document.createElement("audio");
    audio.src = src;
    audio.controls = true;
    audio.style.width = "100%";
    audio.style.display = "block";

    card.appendChild(audio);

    return card;
  },

  example: {
    src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
    title: "Sample audio track"
  }
};