diff --git a/comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js b/comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js index 351f65c..c868c6c 100644 --- a/comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js +++ b/comfyui-audio/comfyui_audiocraft/web/js/audioPreview.js @@ -10,43 +10,45 @@ app.registerExtension({ 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;"; + // Reuse existing widget or create new one + if (this._audioWidget) { + // Update existing player + this._audioEl.src = src; + this._dlEl.href = src; + this._dlEl.download = audioInfo.filename; + this._dlEl.textContent = audioInfo.filename; + } else { + const container = document.createElement("div"); + container.style.cssText = "padding:4px;"; - const audio = document.createElement("audio"); - audio.controls = true; - audio.style.width = "100%"; - audio.src = src; - container.appendChild(audio); + 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); + const dl = document.createElement("a"); + dl.href = src; + dl.download = audioInfo.filename; + dl.textContent = audioInfo.filename; + dl.style.cssText = "display:block;margin-top:2px;color:#8cf;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"; + container.appendChild(dl); - this._audioElement = container; + this._audioEl = audio; + this._dlEl = dl; + this._audioWidget = this.addDOMWidget("audio_preview", "dom", container, { + serialize: false, + hideOnZoom: false, + }); + this._audioWidget.computeSize = () => [this.size[0], 70]; + this.setSize([this.size[0], 150]); + } - // 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); } };