feat(flow): 添加音频输出支持和播放器组件

- 为MICROPHONE_STOP节点类型添加audio输出类型支持
- 新增audioUrl输出参数用于存储录音播放地址数组
- 在服务节点组件中添加音频播放器显示功能
- 扩展JsonViewer条件判断排除音频类型输出
- 实现音频URL计算逻辑支持数组和字符串格式
- 添加音频播放器样式配置
This commit is contained in:
lixiaolong 2026-08-12 13:49:11 +08:00
parent 8d2f3e37b4
commit 1f728b338d
2 changed files with 24 additions and 3 deletions

View File

@ -453,7 +453,8 @@ function handler(params) {
action: 'MICROPHONE_STOP',
nodeType: 'EDGE',
nodeParams: [],
outputType: 'json'
outputType: 'audio',
outputParams: [{ name: 'audioUrl', type: 'array<string>', children: [], desc: '录音播放地址数组', disabled: true }]
},
{
icon: audioSvg,

View File

@ -11,7 +11,7 @@
<template #output>
<div v-if="nodeOperatingStatus != 'FAILED'">
<JsonViewer
v-if="!['img', 'video'].includes(props.properties.outputType)"
v-if="!['img', 'video', 'audio'].includes(props.properties.outputType)"
:value="outputJsonData"
copyable
boxed
@ -33,6 +33,14 @@
v-for="item in outputJsonData.videoUrl"
:videoUrl="item"
/>
<audio
v-for="item in audioUrls"
:key="item"
class="node-audio-player"
:src="item"
controls
preload="metadata"
/>
</div>
<div v-else>{{ errorInfoData }}</div>
</template>
@ -51,7 +59,7 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { computed, ref, onMounted } from "vue";
import NodeTitle from "../../components/NodeTitle.vue";
import NodeState from "../../components/NodeState.vue";
import "vue3-json-viewer/dist/index.css";
@ -86,6 +94,13 @@ const inputJsonData = ref({});
const outputJsonData = ref({});
const errorInfoData = ref('');
const audioUrls = computed(() => {
const value = outputJsonData.value?.audioUrl;
if (Array.isArray(value)) return value.filter(Boolean);
if (typeof value === "string" && value) return [value];
return [];
});
const nodeStateRef = ref(null);
/**
@ -146,4 +161,9 @@ defineExpose({ closePopover })
width: 100%;
height: auto;
}
.node-audio-player {
width: min(320px, 100%);
height: 36px;
}
</style>