Vuenodes/audio widgets

src/extensions/core/uploadAudio.ts

@@ -11,7 +11,10 @@ import type {
   IStringWidget
 } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import type { ResultItemType } from '@/schemas/apiSchema'
+import {
+  getResourceURL,
+  splitFilePath
+} from '@/renderer/extensions/vueNodes/widgets/utils/audioUtils'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { DOMWidget } from '@/scripts/domWidget'
 import { useAudioService } from '@/services/audioService'
@@ -21,32 +24,6 @@ import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 
-function splitFilePath(path: string): [string, string] {
-  const folder_separator = path.lastIndexOf('/')
-  if (folder_separator === -1) {
-    return ['', path]
-  }
-  return [
-    path.substring(0, folder_separator),
-    path.substring(folder_separator + 1)
-  ]
-}
-
-function getResourceURL(
-  subfolder: string,
-  filename: string,
-  type: ResultItemType = 'input'
-): string {
-  const params = [
-    'filename=' + encodeURIComponent(filename),
-    'type=' + type,
-    'subfolder=' + subfolder,
-    app.getRandParam().substring(1)
-  ].join('&')
-
-  return `/view?${params}`
-}
-
 async function uploadFile(
   audioWidget: IStringWidget,
   audioUIWidget: DOMWidget<HTMLAudioElement, string>,
@@ -123,7 +100,6 @@ app.registerExtension({
         const audioUIWidget: DOMWidget<HTMLAudioElement, string> =
           node.addDOMWidget(inputName, /* name=*/ 'audioUI', audio)
         audioUIWidget.serialize = false
-
         const { nodeData } = node.constructor
         if (nodeData == null) throw new TypeError('nodeData is null')
 
@@ -199,6 +175,7 @@ app.registerExtension({
         const audioUIWidget = node.widgets.find(
           (w) => w.name === 'audioUI'
         ) as unknown as DOMWidget<HTMLAudioElement, string>
+        audioUIWidget.options.canvasOnly = true
 
         const onAudioWidgetUpdate = () => {
           audioUIWidget.element.src = api.apiURL(
@@ -273,9 +250,9 @@ app.registerExtension({
         audio.controls = true
         audio.classList.add('comfy-audio')
         audio.setAttribute('name', 'media')
-
         const audioUIWidget: DOMWidget<HTMLAudioElement, string> =
           node.addDOMWidget(inputName, /* name=*/ 'audioUI', audio)
+        audioUIWidget.options.canvasOnly = true
 
         let mediaRecorder: MediaRecorder | null = null
         let isRecording = false

src/lib/litegraph/src/types/widgets.ts

@@ -79,6 +79,7 @@ export type IWidget =
   | ISelectButtonWidget
   | ITextareaWidget
   | IAssetWidget
+  | IAudioRecordWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -227,6 +228,11 @@ export interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
   value: string
 }
 
+export interface IAudioRecordWidget extends IBaseWidget<string, 'audiorecord'> {
+  type: 'audiorecord'
+  value: string
+}
+
 export interface IAssetWidget
   extends IBaseWidget<string, 'asset', IWidgetOptions<string[]>> {
   type: 'asset'

src/locales/en/main.json

@@ -182,7 +182,17 @@
     "nodeHeaderError": "Node Header Error",
     "nodeSlotsError": "Node Slots Error",
     "nodeWidgetsError": "Node Widgets Error",
-    "frameNodes": "Frame Nodes"
+    "frameNodes": "Frame Nodes",
+    "listening": "Listening...",
+    "ready": "Ready",
+    "playRecording": "Play Recording",
+    "playing": "Playing",
+    "stopPlayback": "Stop Playback",
+    "playbackSpeed": "Playback Speed",
+    "volume": "Volume",
+    "halfSpeed": "0.5x",
+    "1x": "1x",
+    "2x": "2x"
   },
   "manager": {
     "title": "Custom Nodes Manager",

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -120,12 +120,14 @@ const processedWidgets = computed((): ProcessedWidget[] => {
   const result: ProcessedWidget[] = []
 
   for (const widget of widgets) {
+    // Skip if widget is in the hidden list for this node type
     if (widget.options?.hidden) continue
     if (widget.options?.canvasOnly) continue
     if (!widget.type) continue
     if (!shouldRenderAsVue(widget)) continue
 
-    const vueComponent = getComponent(widget.type) || WidgetInputText
+    const vueComponent =
+      getComponent(widget.type, widget.name) || WidgetInputText
 
     const slotMetadata = widget.slotMetadata
 
@@ -150,6 +152,9 @@ const processedWidgets = computed((): ProcessedWidget[] => {
     }
 
     const updateHandler = (value: unknown) => {
+      // Update the widget value directly
+      widget.value = value as WidgetValue
+
       if (widget.callback) {
         widget.callback(value)
       }

src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="w-full">
+    <WidgetSelect v-model="modelValue" :widget />
+    <div class="my-4">
+      <AudioPreviewPlayer
+        :audio-url="audioUrlFromWidget"
+        :readonly="readonly"
+        :hide-when-empty="isOutputNodeRef"
+        :show-options-button="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { isOutputNode } from '@/utils/nodeFilterUtil'
+
+import { getAudioUrlFromPath } from '../utils/audioUtils'
+import WidgetSelect from './WidgetSelect.vue'
+import AudioPreviewPlayer from './audio/AudioPreviewPlayer.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | undefined>
+  readonly?: boolean
+  nodeId: string
+}>()
+
+const modelValue = defineModel<string>('modelValue')
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Get litegraph node
+const litegraphNode = computed(() => {
+  if (!props.nodeId || !app.rootGraph) return null
+  return app.rootGraph.getNodeById(props.nodeId) as LGraphNode | null
+})
+
+// Check if this is an output node (PreviewAudio, SaveAudio, etc)
+const isOutputNodeRef = computed(() => {
+  const node = litegraphNode.value
+  if (!node) return false
+  return isOutputNode(node)
+})
+
+const audioFilePath = computed(() => props.widget.value as string)
+
+// Computed audio URL from widget value (for input files)
+const audioUrlFromWidget = computed(() => {
+  const path = audioFilePath.value
+  if (!path) return ''
+  return getAudioUrlFromPath(path, 'input')
+})
+</script>