+  <div id="Chapter1_1" class="content-wrap">

+          <span class="title mr40">1. Hello WORLD</span>

+          <span class="subtitle">my name is dd</span>

+          <div class="pre-btn" @click="goToPage('Chapter2')">

+              <img src="../../../../resources/img/left.png" alt="" />

+          <div class="content title-box">

+              <p class="title mt25 title-bg">step2</p>

+              <div class="flex align-center mb30">

+                  <p class="subtitle2 mr20">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요</p>

+                  <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">

+        </button> -->

+              </div>

+              <div>

+                  <img src="http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png" data-num="1" />

+                  <p> {{ word }} </p>

+                  <p> {{ mean }} </p>

+                </div>

+              <div class="flex justify-center">

+                  <div class="readGroup">

+                      <section>

+                          <div class="imgGroup flex justify-center">

+                              <!-- 녹음 버튼 -->

+                              <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">

+                                  <img src="../../../../resources/img/btn11_s.png" alt="" />

+                              </div>

+                          </div>

+                          <article>

+                              <p class="speakText mb25">

+                                  <span v-if="transcription === null"

+                                      >위의 버튼을 누른 후 오늘 배운 단어를 말해보세요!</span

+                                  >

+                                  <span v-else-if="!transcription || transcription.trim() === ''"

+                                      >다시 말해보세요!</span

+                                  >

+                                  <span v-else>{{ transcription }}</span>

+                              </p>

+                              <p class="read-ai">

+                                  <img style="margin-top: -5px" src="../../../../resources/img/img43_s.png" alt="" />

+                              </p>

+                          </article>

+                      </section>

+                  </div>

+              </div>

+          </div>

+          <div class="next-btn" @click="goToPage('Chapter2_2')">

+              <img src="../../../../resources/img/right.png" alt="" />

+          </div>

+  </div>

+</template>

+

+<script>

+import axios from 'axios';

+import SvgIcon from '@jamescoyle/vue-icon';

+import { mdiStop } from '@mdi/js';

+export default {

+  data() {

+          isRecording: false, // 녹음 중 여부

+          mediaRecorder: null,

+          audioChunks: [], // 녹음된 오디오 데이터

+          audioBlob: null, // 오디오 Blob 객체

+          transcription: null, // 서버에서 받아온 텍스트 결과

+          stream: null, // MediaStream 객체

+

+          path: mdiStop,

+

+          /* audioURL : null // 오디오 URL 객체 */

+

+          word : "apple",

+          mean : "사과",

+          imageSrc : "http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png"

+      };

+  },

+  methods: {

+          this.$router.push({ name: page });

+      },

+      // 녹음 시작/중지 토글

+      async toggleRecording() {

+          if (this.isRecording) {

+              console.log('녹음 그만!');

+              this.stopRecording(); // 녹음 중이면 중지

+          } else {

+              console.log('녹음 시작!');

+              await this.startRecording(); // 녹음 중이 아니면 녹음 시작

+          }

+      },

+

+      // 녹음 시작

+      async startRecording() {

+          this.audioChunks = []; // 오디오 초기화

+          this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });

+          this.mediaRecorder = new MediaRecorder(this.stream);

+          this.mediaRecorder.ondataavailable = (event) => {

+              this.audioChunks.push(event.data); // 녹음 데이터 저장

+          };

+          this.mediaRecorder.onstop = () => {

+              this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });

+

+              /******************************/

+              // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성

+              // console.log('Audio URL:', this.audioURL);

+              /******************************/

+

+              console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인

+              this.sendAudioToServer(); // 서버로 오디오 전송

+          };

+          this.mediaRecorder.start(); // 녹음 시작

+          this.isRecording = true; // 녹음 상태 변경

+      },

+

+      // 녹음 중지

+      stopRecording() {

+          this.mediaRecorder.stop(); // 녹음 중단

+

+          if (this.stream) {

+              this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지

+          }

+

+          this.isRecording = false; // 녹음 상태 변경

+      },

+

+      // 오디오 전송

+      async sendAudioToServer() {

+          const formData = new FormData();

+          formData.append('file', this.audioBlob, 'recording.wav');

+          try {

+              const resposne = await axios.post('/api/speechToText.json', formData, {

+                  headers: {

+                      'Content-Type': 'multipart/form-data',

+                  },

+              });

+              this.transcription = resposne.data;

+              console.log(`받은 데이터 : ${this.transcription}`);

+          } catch (error) {

+              console.log('파일 전송 실패 : ', error);

+          }

+      },

+  },

+  watch: {},

+  computed: {},

+  components: {

+      SvgIcon,

+  },

+  mounted() {},

+};

+</script>

+<style scoped>

+.mic-btn {

+  cursor: pointer;

+}

+.mic-btn.notRecording {

+  background-image: none;

+  cursor: pointer;

+}

+.speakText {

+  background-color: #fff8e9;

+  border: 0;

+}

+.speakText span {

+  font-size: 28px;

+}

+</style>