diff --git a/comfyui-audio/comfyui_audiocraft/__init__.py b/comfyui-audio/comfyui_audiocraft/__init__.py index 39a8c6b..ba51731 100644 --- a/comfyui-audio/comfyui_audiocraft/__init__.py +++ b/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"] diff --git a/comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js b/comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js new file mode 100644 index 0000000..351f65c --- /dev/null +++ b/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); + } + }; + } + }, +});