feat(flow): 添加音频输出支持和播放器组件
- 为MICROPHONE_STOP节点类型添加audio输出类型支持 - 新增audioUrl输出参数用于存储录音播放地址数组 - 在服务节点组件中添加音频播放器显示功能 - 扩展JsonViewer条件判断排除音频类型输出 - 实现音频URL计算逻辑支持数组和字符串格式 - 添加音频播放器样式配置
This commit is contained in:
parent
8d2f3e37b4
commit
1f728b338d
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user