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',
|
action: 'MICROPHONE_STOP',
|
||||||
nodeType: 'EDGE',
|
nodeType: 'EDGE',
|
||||||
nodeParams: [],
|
nodeParams: [],
|
||||||
outputType: 'json'
|
outputType: 'audio',
|
||||||
|
outputParams: [{ name: 'audioUrl', type: 'array<string>', children: [], desc: '录音播放地址数组', disabled: true }]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: audioSvg,
|
icon: audioSvg,
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
<template #output>
|
<template #output>
|
||||||
<div v-if="nodeOperatingStatus != 'FAILED'">
|
<div v-if="nodeOperatingStatus != 'FAILED'">
|
||||||
<JsonViewer
|
<JsonViewer
|
||||||
v-if="!['img', 'video'].includes(props.properties.outputType)"
|
v-if="!['img', 'video', 'audio'].includes(props.properties.outputType)"
|
||||||
:value="outputJsonData"
|
:value="outputJsonData"
|
||||||
copyable
|
copyable
|
||||||
boxed
|
boxed
|
||||||
@ -33,6 +33,14 @@
|
|||||||
v-for="item in outputJsonData.videoUrl"
|
v-for="item in outputJsonData.videoUrl"
|
||||||
:videoUrl="item"
|
:videoUrl="item"
|
||||||
/>
|
/>
|
||||||
|
<audio
|
||||||
|
v-for="item in audioUrls"
|
||||||
|
:key="item"
|
||||||
|
class="node-audio-player"
|
||||||
|
:src="item"
|
||||||
|
controls
|
||||||
|
preload="metadata"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>{{ errorInfoData }}</div>
|
<div v-else>{{ errorInfoData }}</div>
|
||||||
</template>
|
</template>
|
||||||
@ -51,7 +59,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { computed, ref, onMounted } from "vue";
|
||||||
import NodeTitle from "../../components/NodeTitle.vue";
|
import NodeTitle from "../../components/NodeTitle.vue";
|
||||||
import NodeState from "../../components/NodeState.vue";
|
import NodeState from "../../components/NodeState.vue";
|
||||||
import "vue3-json-viewer/dist/index.css";
|
import "vue3-json-viewer/dist/index.css";
|
||||||
@ -86,6 +94,13 @@ const inputJsonData = ref({});
|
|||||||
const outputJsonData = ref({});
|
const outputJsonData = ref({});
|
||||||
const errorInfoData = 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);
|
const nodeStateRef = ref(null);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -146,4 +161,9 @@ defineExpose({ closePopover })
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.node-audio-player {
|
||||||
|
width: min(320px, 100%);
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user