mapl/DungeonCrawler
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
Andre 2026-03-21 17:29:00 +01:00
parent cf6afa5c3a
commit 2cf3c613fd
2 changed files with 58 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
comfyui-audio/comfyui_audiocraft/__init__.py
View file

@ -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"]

55
comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js Normal file
View file

@ -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);
}
};
}
},
});