音频播放器

du

2025-03-25 370bad5da8681058cb9c7bd3a782a3a9c1a1543f

 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
        // 如果返回结果有效且没有错误，初始化Audio
        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
    })
}
//取消试听