[Feature] Add audio preview support to queue sidebar (#3954)

Co-authored-by: github-actions <github-actions@github.com>

src/components/sidebar/tabs/queue/ResultAudio.vue

@@ -0,0 +1,19 @@
+<template>
+  <audio controls width="100%" height="100%">
+    <source :src="url" :type="htmlAudioType" />
+    {{ $t('g.audioFailedToLoad') }}
+  </audio>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ResultItemImpl } from '@/stores/queueStore'
+
+const { result } = defineProps<{
+  result: ResultItemImpl
+}>()
+
+const url = computed(() => result.url)
+const htmlAudioType = computed(() => result.htmlAudioType)
+</script>

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -35,6 +35,7 @@
         class="galleria-image"
       />
       <ResultVideo v-else-if="item.isVideo" :result="item" />
+      <ResultAudio v-else-if="item.isAudio" :result="item" />
     </template>
   </Galleria>
 </template>
@@ -46,6 +47,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
 import ComfyImage from '@/components/common/ComfyImage.vue'
 import { ResultItemImpl } from '@/stores/queueStore'
 
+import ResultAudio from './ResultAudio.vue'
 import ResultVideo from './ResultVideo.vue'
 
 const galleryVisible = ref(false)

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -12,6 +12,7 @@
       :alt="result.filename"
     />
     <ResultVideo v-else-if="result.isVideo" :result="result" />
+    <ResultAudio v-else-if="result.isAudio" :result="result" />
     <div v-else class="task-result-preview">
       <i class="pi pi-file" />
       <span>{{ result.mediaType }}</span>
@@ -26,6 +27,7 @@ import ComfyImage from '@/components/common/ComfyImage.vue'
 import { ResultItemImpl } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 
+import ResultAudio from './ResultAudio.vue'
 import ResultVideo from './ResultVideo.vue'
 
 const props = defineProps<{