Add preview to LoadAudio nodes

Resolves #541

Author: AustinMroz

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-videohelpersuite"
 description = "Nodes related to video workflows"
-version = "1.7.4"
+version = "1.7.5"
 license = { file = "LICENSE" }
 dependencies = ["opencv-python", "imageio-ffmpeg"]
 

videohelpersuite/server.py

@@ -131,6 +131,48 @@ async def view_video(request):
     except BrokenPipeError as e:
         pass
     return resp
+@server.PromptServer.instance.routes.get("/vhs/viewaudio")
+async def view_audio(request):
+    query = request.rel_url.query
+    path_res = await resolve_path(query)
+    if isinstance(path_res, web.Response):
+        return path_res
+    file, filename, output_dir = path_res
+    if ffmpeg_path is None:
+        #Don't just return file, that provides  arbitrary read access to any file
+        if is_safe_path(output_dir, strict=True):
+            return web.FileResponse(path=file)
+
+    in_args = ["-i", file]
+    start_time = 0
+    if 'start_time' in query:
+        start_time = float(query['start_time'])
+    args = [ffmpeg_path, "-v", "error", '-vn'] + in_args + ['-ss', str(start_time)]
+    if float(query.get('duration', 0)) > 0:
+        args += ['-t', str(query['duration'])]
+    if query.get('deadline', 'realtime') == 'good':
+        deadline = 'good'
+    else:
+        deadline = 'realtime'
+
+    args += ['-c:a', 'libopus','-deadline', deadline, '-cpu-used', '8', '-f', 'webm', '-']
+    try:
+        proc = await asyncio.create_subprocess_exec(*args, stdout=subprocess.PIPE,
+                                                    stdin=subprocess.DEVNULL)
+        try:
+            resp = web.StreamResponse()
+            resp.content_type = 'audio/webm'
+            resp.headers["Content-Disposition"] = f"filename=\"{filename}\""
+            await resp.prepare(request)
+            while len(bytes_read := await proc.stdout.read(2**20)) != 0:
+                await resp.write(bytes_read)
+            #Of dubious value given frequency of kill calls, but more correct
+            await proc.wait()
+        except (ConnectionResetError, ConnectionError) as e:
+            proc.kill()
+    except BrokenPipeError as e:
+        pass
+    return resp
 
 query_cache = {}
 @server.PromptServer.instance.routes.get("/vhs/queryvideo")
@@ -174,7 +216,7 @@ def fit():
     loaded = {}
     loaded['duration'] = source['duration']
     loaded['duration'] -= float(query.get('start_time',0))
-    loaded['fps'] = float(query.get('force_rate', 0)) or source['fps']
+    loaded['fps'] = float(query.get('force_rate', 0)) or source.get('fps',1)
     loaded['duration'] -= int(query.get('skip_first_frames', 0)) / loaded['fps']
     loaded['fps'] /= int(query.get('select_every_nth', 1)) or 1
     loaded['frames'] = round(loaded['duration'] * loaded['fps'])

web/js/VHS.core.js

@@ -821,6 +821,95 @@ function addUploadWidget(nodeType, nodeData, widgetName, type="video") {
 
     });
 }
+function addAudioPreview(nodeType, isInput=true) {
+    chainCallback(nodeType.prototype, "onNodeCreated", function() {
+        var element = document.createElement("audio");
+        element.controls = true
+        const previewNode = this;
+        var previewWidget = this.addDOMWidget("audiopreview", "preview", element, {
+            serialize: false,
+            hideOnZoom: true,
+            getValue() {
+                return element.value;
+            },
+            setValue(v) {
+                element.value = v;
+            },
+        });
+        previewWidget.computeSize = function(width) {
+            return [width, 50];
+        }
+        var timeout = null;
+        this.updateParameters = (params, force_update) => {
+            if (!previewWidget.value.params) {
+                if(typeof(previewWidget.value) != 'object') {
+                    previewWidget.value =  {}
+                }
+                previewWidget.value.params = {}
+            }
+            Object.assign(previewWidget.value.params, params)
+            if (!force_update &&
+                app.ui.settings.getSettingValue("VHS.AdvancedPreviews") == 'Never') {
+                return;
+            }
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            if (force_update) {
+                previewWidget.updateSource();
+            } else {
+                timeout = setTimeout(() => previewWidget.updateSource(),100);
+            }
+        };
+        previewWidget.updateSource = function () {
+            if (this.value.params == undefined) {
+                return;
+            }
+            let params =  {}
+            let advp = app.ui.settings.getSettingValue("VHS.AdvancedPreviews")
+            if (advp == 'Never') {
+                advp = false
+            } else if (advp == 'Input Only') {
+                advp = isInput
+            } else {
+                advp = true
+            }
+            Object.assign(params, this.value.params);//shallow copy
+            params.timestamp = Date.now()
+            if (!advp) {
+                element.src = api.apiURL('/view?' + new URLSearchParams(params));
+            } else {
+                params.deadline = app.ui.settings.getSettingValue("VHS.AdvancedPreviewsDeadline")
+                element.src = api.apiURL('/vhs/viewaudio?' + new URLSearchParams(params));
+            }
+        }
+        previewWidget.callback = previewWidget.updateSource
+
+
+        //setup widget tracking
+        function update(key) {
+            return function(value) {
+                let params = {}
+                params[key] = this.value
+                previewNode?.updateParameters(params)
+            }
+        }
+        let widgetMap = { 'seek_seconds': 'start_time', 'duration': 'duration',
+            'start_time': 'start_time' }
+        for (let widget of this.widgets) {
+            if (widget.name in widgetMap) {
+                if (typeof(widgetMap[widget.name]) == 'function') {
+                    chainCallback(widget, "callback", widgetMap[widget.name]);
+                } else {
+                    chainCallback(widget, "callback", update(widgetMap[widget.name]))
+                }
+            }
+            if (widget.type != "button") {
+                widget.callback?.(widget.value)
+            }
+        }
+    });
+}
 
 function addVideoPreview(nodeType, isInput=true) {
     chainCallback(nodeType.prototype, "onNodeCreated", function() {
@@ -1890,8 +1979,25 @@ app.registerExtension({
             addUploadWidget(nodeType, nodeData, "video");
             addLoadCommon(nodeType, nodeData);
             addVAEOutputToggle(nodeType, nodeData);
+        } else if (nodeData?.name == "VHS_LoadAudio") {
+            addAudioPreview(nodeType)
+            chainCallback(nodeType.prototype, "onNodeCreated", function() {
+                const pathWidget = this.widgets.find((w) => w.name === "audio_file");
+                chainCallback(pathWidget, "callback", (filename) => {
+                    this.updateParameters({filename, type: 'path'}, true);
+                });
+            });
         } else if (nodeData?.name == "VHS_LoadAudioUpload") {
             addUploadWidget(nodeType, nodeData, "audio", "audio");
+            addAudioPreview(nodeType)
+            chainCallback(nodeType.prototype, "onNodeCreated", function() {
+                const pathWidget = this.widgets.find((w) => w.name === "audio");
+                chainCallback(pathWidget, "callback", (filename) => {
+                    if (!filename) return
+                    let params = {filename, type : "input"};
+                    this.updateParameters(params, true);
+                });
+            });
         } else if (nodeData?.name == "VHS_LoadVideoPath" || nodeData?.name == "VHS_LoadVideoFFmpegPath") {
             chainCallback(nodeType.prototype, "onNodeCreated", function() {
                 const pathWidget = this.widgets.find((w) => w.name === "video");