From 23b57c9384f0334fb3053fa31c76ce4ca9767139 Mon Sep 17 00:00:00 2001
From: Toly <toly.feng@gmail.com>
Date: Sun, 20 Oct 2024 19:55:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20pronounce=20to=20word.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development        |  2 ++
 .env.production         |  2 ++
 src/views/FlashCard.vue | 24 +++++++++++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/.env.development b/.env.development
index 44ad886..15f2138 100644
--- a/.env.development
+++ b/.env.development
@@ -8,3 +8,5 @@ VITE_ROUTER_HISTORY = 'hash'
 
 ## 开发环境地址前缀（一般 '/'，'./' 都可以）
 VITE_PUBLIC_PATH = '/'
+
+VITE_BACKEND_URL="http://localhost:3000"
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 44ad886..4f9be39 100644
--- a/.env.production
+++ b/.env.production
@@ -8,3 +8,5 @@ VITE_ROUTER_HISTORY = 'hash'
 
 ## 开发环境地址前缀（一般 '/'，'./' 都可以）
 VITE_PUBLIC_PATH = '/'
+
+VITE_BACKEND_URL="https://api.stylishreader.com"
\ No newline at end of file
diff --git a/src/views/FlashCard.vue b/src/views/FlashCard.vue
index 8428324..44c59c3 100644
--- a/src/views/FlashCard.vue
+++ b/src/views/FlashCard.vue
@@ -45,6 +45,7 @@
     <template v-else>
         <el-empty description="默认词组中没有收藏单词" />
     </template>
+    <audio autoplay ref="audioPlayer" :src="audioUrl">123</audio>
 </template>
 
 <script setup lang="ts">
@@ -52,11 +53,12 @@ import Header from '@/components/Header.vue';
 import type { ResponseData, Word } from '@/types';
 import { request } from '@/utils/service';
 import { Refresh } from '@element-plus/icons-vue';
+import axios from 'axios';
 import { ElNotification } from 'element-plus';
 import { computed, onMounted, ref, type Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-const buttonTexts = ['上一个', '文章链接', '下一个'];
+const buttonTexts = ['文章链接', '发音', '上一个', '下一个'];
 
 const route = useRoute();
 const router = useRouter();
@@ -66,6 +68,8 @@ const wordList: Ref<Word[]> = ref([]);
 const currentIndex = ref(0);
 const currentTranslation = ref();
 const originalPageUrl = ref('');
+const audioUrl = ref('');
+const audioPlayer: Ref<HTMLAudioElement | null> = ref(null);
 
 const currentWord = computed(() => wordList.value[currentIndex.value] ?? { en: '' });
 
@@ -78,6 +82,21 @@ onMounted(async () => {
     await getGroupDetail();
 });
 
+async function handleClick() {
+    console.log(currentWord.value.en);
+    const response: any = await axios({
+        url: `${import.meta.env.VITE_BACKEND_URL}/youdao/`, // 后端 API
+        method: 'POST',
+        data: { word: currentWord.value.en },
+        responseType: 'blob', // 获取音频为 Blob
+    });
+    console.log(response.data);
+    const audioBlob = response.data;
+    const u = URL.createObjectURL(audioBlob);
+    audioUrl.value = u;
+    audioPlayer.value?.play();
+}
+
 async function getWordList() {
     const t: ResponseData = await request({ url: '/word/bygroup', method: 'post', data: { groupId: groupId.value } });
 
@@ -120,6 +139,9 @@ function navigateWord(text: string) {
             window.open(`http://${originalPageUrl.value}`, '_blank');
         }
     }
+    if (text === '发音') {
+        handleClick();
+    }
     isTranslationVisible.value = false;
 }
 </script>