Media Audio Element

Component

About

An audio player node for the Plate editor with a resizable container and editable caption support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Media Audio Element to your project and fits it to your theme.

Code

How Media Audio Element is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { AudioElement } from "@/components/ui/media-audio-node";

import * as React from "react";

import { AudioPlugin } from "@platejs/media/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

export default function MediaAudioNodeDemo() {
  const editor = usePlateEditor({
    plugins: [AudioPlugin.withComponent(AudioElement)],
    value: [
      {
        children: [{ text: "" }],
        type: "audio",
        url: "https://cdn.21st.dev/assets/mirror/02/0244590f2b4bcb62352b574e78bea940e8d89cfa69823b5208ef4c43e0abcb44.mp3",
      },
      { children: [{ text: "" }], type: "p" },
    ],
  });

  return (
    <div className="w-full max-w-xl p-6">
      <Plate editor={editor}>
        <PlateContent className="rounded-md border p-4" />
      </Plate>
    </div>
  );
}