An audio player node for the Plate editor with a resizable container and editable caption support.
"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>
);
}