mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
7d9fa2bfc5
## Summary Add a waveform-based audio player component (`WaveAudioPlayer`) replacing the native `<audio>` element, with authenticated API fetch for cloud audio playback. ## Changes - **What**: - Add `useWaveAudioPlayer` composable with waveform visualization from audio data (Web Audio API `decodeAudioData`), playback controls, and seek support - Add `WaveAudioPlayer.vue` component with compact (inline waveform + time) and expanded (full transport controls) variants - Replace native `<audio>` in `MediaAudioTop.vue` and `ResultAudio.vue` with `WaveAudioPlayer` - Use `api.fetchApi()` instead of bare `fetch()` to include Firebase JWT auth headers, fixing 401 errors in cloud environments - Add Storybook stories and unit tests ## Review Focus - The audio URL is fetched via `api.fetchApi()` with auth headers, converted to a Blob URL, then passed to the native `<audio>` element. This avoids 401 Unauthorized in cloud environments where `/api/view` requires authentication. - URL-to-route extraction logic (`url.includes(apiBase)`) handles both full API URLs and relative paths. [screen-capture.webm](https://github.com/user-attachments/assets/44e61812-0391-4b47-a199-92927e75f8b4) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10158-feat-add-WaveAudioPlayer-with-waveform-visualization-and-authenticated-audio-fetch-3266d73d365081beab3fc6274c39fcd4) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
22 lines
465 B
Vue
22 lines
465 B
Vue
<template>
|
|
<div
|
|
class="m-auto w-[min(90vw,42rem)] rounded-2xl bg-base-background/80 p-8 backdrop-blur-sm"
|
|
>
|
|
<WaveAudioPlayer
|
|
:src="result.url"
|
|
variant="expanded"
|
|
:height="120"
|
|
:bar-count="80"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import WaveAudioPlayer from '@/components/common/WaveAudioPlayer.vue'
|
|
import type { ResultItemImpl } from '@/stores/queueStore'
|
|
|
|
defineProps<{
|
|
result: ResultItemImpl
|
|
}>()
|
|
</script>
|