AudioPreview: Frontend JS für Audio-Player im Node

Rendert einen HTML5 Audio-Player direkt im AudioPreview-Node
nach der Generierung. Inkl. Download-Link.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

comfyui-audio/comfyui_audiocraft/__init__.py

@@ -1,3 +1,5 @@
 from .nodes import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPINGS
 
-__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS"]
+WEB_DIRECTORY = "./web"
+
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]

comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js

@@ -0,0 +1,55 @@
+import { app } from "../../../scripts/app.js";
+import { api } from "../../../scripts/api.js";
+
+app.registerExtension({
+    name: "AudioCraft.AudioPreview",
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {
+        if (nodeData.name === "AudioPreview") {
+            const onExecuted = nodeType.prototype.onExecuted;
+            nodeType.prototype.onExecuted = function (message) {
+                onExecuted?.apply(this, arguments);
+
+                if (message?.audio) {
+                    // Remove old players
+                    const oldEl = this._audioElement;
+                    if (oldEl) {
+                        oldEl.remove();
+                    }
+
+                    const audioInfo = message.audio[0];
+                    const src = api.apiURL(
+                        `/view?filename=${encodeURIComponent(audioInfo.filename)}&subfolder=${encodeURIComponent(audioInfo.subfolder || "")}&type=${audioInfo.type}`
+                    );
+
+                    const container = document.createElement("div");
+                    container.style.cssText = "padding:8px;";
+
+                    const audio = document.createElement("audio");
+                    audio.controls = true;
+                    audio.style.width = "100%";
+                    audio.src = src;
+                    container.appendChild(audio);
+
+                    const dl = document.createElement("a");
+                    dl.href = src;
+                    dl.download = audioInfo.filename;
+                    dl.textContent = "Download: " + audioInfo.filename;
+                    dl.style.cssText = "display:block;margin-top:4px;color:#8cf;font-size:11px;";
+                    container.appendChild(dl);
+
+                    this._audioElement = container;
+
+                    // Add to node widget area
+                    const widget = this.addDOMWidget("audio_preview", "dom", container, {
+                        serialize: false,
+                        hideOnZoom: false,
+                    });
+                    widget.computeSize = () => [this.size[0], 80];
+
+                    this.setSize([this.size[0], Math.max(this.size[1], 160)]);
+                    app.graph.setDirtyCanvas(true);
+                }
+            };
+        }
+    },
+});