Add copy paste audio files onto LoadAudio nodes or canvas (#2716)

src/composables/usePaste.ts

@@ -6,7 +6,7 @@ import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { ComfyWorkflowJSON } from '@/types/comfyWorkflow'
-import { isImageNode, isVideoNode } from '@/utils/litegraphUtil'
+import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
 
 /**
  * Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
@@ -52,8 +52,10 @@ export const usePaste = () => {
 
     const isImageNodeSelected = isNodeSelected && isImageNode(currentNode)
     const isVideoNodeSelected = isNodeSelected && isVideoNode(currentNode)
+    const isAudioNodeSelected = isNodeSelected && isAudioNode(currentNode)
 
     let imageNode: LGraphNode | null = isImageNodeSelected ? currentNode : null
+    let audioNode: LGraphNode | null = isAudioNodeSelected ? currentNode : null
     const videoNode: LGraphNode | null = isVideoNodeSelected
       ? currentNode
       : null
@@ -79,6 +81,17 @@ export const usePaste = () => {
           pasteItemOnNode(items, videoNode)
           return
         }
+      } else if (item.type.startsWith('audio/')) {
+        if (!audioNode) {
+          // No audio node selected: add a new one
+          const newNode = LiteGraph.createNode('LoadAudio')
+          // @ts-expect-error array to Float32Array
+          newNode.pos = [...canvas.graph_mouse]
+          audioNode = graph?.add(newNode) ?? null
+          graph?.change()
+        }
+        pasteItemOnNode(items, audioNode)
+        return
       }
     }
 

src/extensions/core/uploadAudio.ts

@@ -4,6 +4,7 @@ import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
 import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
+import { useNodePaste } from '@/composables/node/useNodePaste'
 import type { DOMWidget } from '@/scripts/domWidget'
 import { useToastStore } from '@/stores/toastStore'
 import { ComfyNodeDef } from '@/types/apiTypes'
@@ -188,6 +189,8 @@ app.registerExtension({
           return files
         }
 
+        const isAudioFile = (file: File) => file.type.startsWith('audio/')
+
         const { openFileSelection } = useNodeFileInput(node, {
           accept: 'audio/*',
           onSelect: handleUpload
@@ -204,10 +207,15 @@ app.registerExtension({
         uploadWidget.label = 'choose file to upload'
 
         useNodeDragAndDrop(node, {
-          fileFilter: (file) => file.type.startsWith('audio/'),
+          fileFilter: isAudioFile,
           onDrop: handleUpload
         })
 
+        useNodePaste(node, {
+          fileFilter: isAudioFile,
+          onPaste: handleUpload
+        })
+
         node.previewMediaType = 'audio'
 
         return { widget: uploadWidget }

src/utils/litegraphUtil.ts

@@ -27,6 +27,10 @@ export function isVideoNode(node: LGraphNode | undefined): node is VideoNode {
   return node.previewMediaType === 'video' || !!node.videoContainer
 }
 
+export function isAudioNode(node: LGraphNode | undefined): boolean {
+  return !!node && node.previewMediaType === 'audio'
+}
+
 export function addToComboValues(widget: IComboWidget, value: string) {
   if (!widget.options) widget.options = { values: [] }
   if (!widget.options.values) widget.options.values = []