Andre
2cf3c613fd
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>
55 lines
2.2 KiB
JavaScript
55 lines
2.2 KiB
JavaScript
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);
|
|
}
|
|
};
|
|
}
|
|
},
|
|
});
|