From 370bad5da8681058cb9c7bd3a782a3a9c1a1543f Mon Sep 17 00:00:00 2001
From: du <13220750630.163.com>
Date: 星期二, 25 三月 2025 10:12:07 +0800
Subject: [PATCH] 音频播放器
---
easegen-front/src/views/chooseTemplate/index.vue | 121 +++++++++++++++++++++++-----------------
1 files changed, 69 insertions(+), 52 deletions(-)
diff --git a/easegen-front/src/views/chooseTemplate/index.vue b/easegen-front/src/views/chooseTemplate/index.vue
index 5c2f5d0..6d13699 100644
--- a/easegen-front/src/views/chooseTemplate/index.vue
+++ b/easegen-front/src/views/chooseTemplate/index.vue
@@ -313,26 +313,26 @@
<el-text class="mx-1" type="primary" size="small">{{
t('courseCenter.oralBroadcastingContent')
}}</el-text>
- <div class="voice-item">
- <span
- :class="selectPPT.driverType == item.itemValue ? 'active-item' : ''"
- v-for="(item, index) in driveType"
- :key="index"
- @click="driveTypeChange(item)"
- >{{ item.name }}</span
- >
- </div>
- <div class="media-box">
- <el-button type="primary" :icon="Mic" size="small" @click="openSelect">{{
- selectPPT.selectAudio ? selectPPT.selectAudio.name : t('courseCenter.notSelect')
- }}</el-button>
- <el-button
- type="success"
- :icon="Headset"
- size="small"
- @click="voiceData.show = !voiceData.show"
- />
- </div>
+<!-- <div class="voice-item">-->
+<!-- <span-->
+<!-- :class="selectPPT.driverType == item.itemValue ? 'active-item' : ''"-->
+<!-- v-for="(item, index) in driveType"-->
+<!-- :key="index"-->
+<!-- @click="driveTypeChange(item)"-->
+<!-- >{{ item.name }}</span-->
+<!-- >-->
+<!-- </div>-->
+<!-- <div class="media-box">-->
+<!-- <el-button type="primary" :icon="Mic" size="small" @click="openSelect">{{-->
+<!-- selectPPT.selectAudio ? selectPPT.selectAudio.name : t('courseCenter.notSelect')-->
+<!-- }}</el-button>-->
+<!-- <el-button-->
+<!-- type="success"-->
+<!-- :icon="Headset"-->
+<!-- size="small"-->
+<!-- @click="voiceData.show = !voiceData.show"-->
+<!-- />-->
+<!-- </div>-->
</div>
<div v-if="selectPPT.driverType == 1" style="position: relative">
<div class="middle-textarea">
@@ -352,34 +352,34 @@
<div class="tool-box">
<div class="tool-btn">
<!-- 鏂板鏅鸿兘璁茬鎸夐挳 -->
- <el-button type="primary" size="small" @click="openScriptRewriter">{{
- t('courseCenter.intelligentSpeech')
- }}</el-button>
- <el-button type="primary" @click="openReplaceDialog" size="small">{{
- t('courseCenter.batchReplace')
- }}</el-button>
- <el-button type="primary" size="small" @click="handleWord">{{
- t('courseCenter.polyphonicCharacters')
- }}</el-button>
- <el-dropdown placement="bottom" @command="handleNumber" style="margin: 0 12px;">
- <el-button type="primary" size="small">{{ t('courseCenter.number') }}</el-button>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item command="璇绘暟瀛�">璇绘暟瀛�</el-dropdown-item>
- <el-dropdown-item command="璇绘暟鍊�">璇绘暟鍊�</el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- <el-dropdown placement="bottom" @command="handleBreak">
- <el-button type="primary" size="small">{{ t('courseCenter.pause') }}</el-button>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item command="0.5绉�">0.5绉�</el-dropdown-item>
- <el-dropdown-item command="1绉�">1绉�</el-dropdown-item>
- <el-dropdown-item command="2绉�">2绉�</el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
+<!-- <el-button type="primary" size="small" @click="openScriptRewriter">{{-->
+<!-- t('courseCenter.intelligentSpeech')-->
+<!-- }}</el-button>-->
+<!-- <el-button type="primary" @click="openReplaceDialog" size="small">{{-->
+<!-- t('courseCenter.batchReplace')-->
+<!-- }}</el-button>-->
+<!-- <el-button type="primary" size="small" @click="handleWord">{{-->
+<!-- t('courseCenter.polyphonicCharacters')-->
+<!-- }}</el-button>-->
+<!-- <el-dropdown placement="bottom" @command="handleNumber" style="margin: 0 12px;">-->
+<!-- <el-button type="primary" size="small">{{ t('courseCenter.number') }}</el-button>-->
+<!-- <template #dropdown>-->
+<!-- <el-dropdown-menu>-->
+<!-- <el-dropdown-item command="璇绘暟瀛�">璇绘暟瀛�</el-dropdown-item>-->
+<!-- <el-dropdown-item command="璇绘暟鍊�">璇绘暟鍊�</el-dropdown-item>-->
+<!-- </el-dropdown-menu>-->
+<!-- </template>-->
+<!-- </el-dropdown>-->
+<!-- <el-dropdown placement="bottom" @command="handleBreak">-->
+<!-- <el-button type="primary" size="small">{{ t('courseCenter.pause') }}</el-button>-->
+<!-- <template #dropdown>-->
+<!-- <el-dropdown-menu>-->
+<!-- <el-dropdown-item command="0.5绉�">0.5绉�</el-dropdown-item>-->
+<!-- <el-dropdown-item command="1绉�">1绉�</el-dropdown-item>-->
+<!-- <el-dropdown-item command="2绉�">2绉�</el-dropdown-item>-->
+<!-- </el-dropdown-menu>-->
+<!-- </template>-->
+<!-- </el-dropdown>-->
<div></div>
</div>
<el-button type="primary" :icon="VideoPlay" size="small" @click="createAudio">{{
@@ -387,8 +387,13 @@
}}</el-button>
</div>
<div class="audio-play" v-if="showAudioPlay">
- <div>{{ t('courseCenter.listeningTrial') }}...</div>
+ <div>
+ <vue-audio-better :src="audioUrl" :options="playerOptions" />
+ </div>
<el-button @click="pauseAudio">{{ t('courseCenter.cancelTrialListening') }}</el-button>
+ </div>
+ <div class="audio-play" v-if="showAudioPlay1">
+ <div>鐢熸垚涓�...</div>
</div>
</div>
<div v-else class="audio-upload" style="position: relative">
@@ -572,6 +577,7 @@
</div>
</template>
<script lang="ts" setup>
+import VueAudioBetter from 'vue-audio-better';
import { ref, reactive, onMounted } from 'vue'
import draggable from 'vuedraggable'
@@ -640,6 +646,12 @@
inputRef.value.focus()
})
}
+const playerOptions = {
+ autoplay: false, // 鏄惁鑷姩鎾斁
+ controls: true, // 鏄惁鏄剧ず鎺у埗鏉�
+ preload: 'auto', // 棰勫姞杞界瓥鐣�
+};
+let audioUrl = ''
// 淇濆瓨缂栬緫鍚庣殑鍚嶇О
const saveEdit = () => {
isEditing.value = false
@@ -1603,6 +1615,7 @@
// }
//鐢熸垚璇曞惉
const showAudioPlay = ref(false) //鏄剧ず璇曞惉
+const showAudioPlay1 = ref(false) //鏄剧ず璇曞惉
//鏄剧ず澹伴煶椹卞姩鐨勬枃浠舵挱鏀惧脊妗�
const startAudioPlay = ref(false)
const textareaRef = ref()
@@ -1709,11 +1722,15 @@
text: html,
humanId: humanId
}
- showAudioPlay.value = true
+ showAudioPlay1.value = true
pptTemplateApi
.createAudio(params)
.then((res) => {
if (res && !res.error) {
+ console.log(res)
+ audioUrl = res
+ showAudioPlay1.value = false
+ showAudioPlay.value = true
// 濡傛灉杩斿洖缁撴灉鏈夋晥涓旀病鏈夐敊璇紝鍒濆鍖朅udio
currentAudio.value = new Audio(res)
// 娣诲姞鎾斁缁撴潫浜嬩欢鐩戝惉
@@ -1725,13 +1742,13 @@
currentAudio.value.play()
} else {
// 濡傛灉杩斿洖缁撴灉涓虹┖鎴栨湁閿欒锛屽叧闂脊鍑烘
- showAudioPlay.value = false
+ showAudioPlay1.value = false
}
})
.catch((error) => {
// 鎹曡幏璇锋眰閿欒锛屽叧闂脊鍑烘
console.error('API 璇锋眰澶辫触锛�', error)
- showAudioPlay.value = false
+ showAudioPlay1.value = false
})
}
//鍙栨秷璇曞惉
--
Gitblit v1.9.3