Commit @e7f383994cf00337b3fc642dc12f66518f6ffa83

정다정 09-11

240911 정다정 대화지문 듣기 기능 추가

@e7f383994cf00337b3fc642dc12f66518f6ffa83

e7f3839

client/resources/audio/passage/passage_explanation.mp3 (Binary) (added)

+++ client/resources/audio/passage/passage_explanation.mp3

Binary file is not shown

e7f3839

client/resources/audio/passage/passage_intoduce.mp3 (Binary) (added)

+++ client/resources/audio/passage/passage_intoduce.mp3

Binary file is not shown

e7f3839

client/resources/img/new_img/icon/play_icon.png (Binary) (added)

+++ client/resources/img/new_img/icon/play_icon.png

Binary file is not shown

d35d8f2

e7f3839

client/views/pages/main/Chapter/Chapter1_2.vue

--- client/views/pages/main/Chapter/Chapter1_2.vue

+++ client/views/pages/main/Chapter/Chapter1_2.vue


             </div>
             <div class="content title-box">
                 <p class="title mt25 title-bg">step1. Hello WORLD</p>
+                <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
+                    <h4>각 인물들의 대화를 듣고 읽어봅시다. 아래의 플레이버튼을 눌러 영어 발음을 들어보세요!</h4>
+                    <div class="listen-btn">
+                        <img src="../../../../resources/img/btn10_s.png" alt="" @click="playAudio" />
+                        <audio
+                            id="audio-player"
+                            src="client/resources/audio/passage/passage_intoduce.mp3"
+                            preload="auto"
+                        ></audio>
+                    </div>
+                </div>
                 <div class="flex justify-center">
                     <div class="readGroup">
-                        <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
                         <div>
                             <div class="textbox">
                                 <article
                                     v-for="(line, index) in combinedLines"
                                     :key="index"
-                                    :class="['flex', 'align-start', 'mb10', { 'justify-end': index % 2 !== 0 }]"
+                                    :class="['flex', 'align-center', 'mb10', { 'justify-end': index % 2 !== 0 }]"
                                 >
                                     <div v-if="index % 2 === 0" class="icon mr40">
                                         <img src="../../../../resources/img/img37_s.png" alt="" />
                                         <p class="name">{{ speakerA_name }}</p>
                                     </div>
                                     <p v-if="index % 2 === 0" class="read">{{ line }}</p>
+                                    <div class="listen-btn ml10" v-if="index % 2 === 0">
+                                        <img
+                                            src="../../../../resources/img/new_img/icon/play_icon.png"
+                                            alt=""
+                                            @click="generateTts('male', line)"
+                                        />
+                                        <audio id="tts-audio-player" preload="auto"></audio>
+                                    </div>
 
+                                    <div class="listen-btn mr10" v-if="index % 2 !== 0">
+                                        <img
+                                            src="../../../../resources/img/new_img/icon/play_icon.png"
+                                            alt=""
+                                            @click="generateTts('femail', line)"
+                                        />
+                                        <audio id="tts-audio-player" preload="auto"></audio>
+                                    </div>
                                     <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
                                     <div v-if="index % 2 !== 0" class="icon">
                                         <img src="../../../../resources/img/img37_s.png" alt="" />

             this.speakerA_name = speakers.speakerA_name;
             this.speakerB_name = speakers.speakerB_name;
         },
+
+        playAudio() {
+            const audio = document.getElementById('audio-player');
+            audio.play();
+            console.log('playing');
+        },
+
+        // 대화 지문 재생
+        generateTts(gender, line) {
+            console.log('line : ', line);
+            axios({
+                url: 'http://165.229.169.32:35716/generate_tts',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                responseType: 'blob',
+                data: {
+                    gender: gender,
+                    input_text: line,
+                },
+            })
+                .then((response) => {
+                    console.log('tts 응답 : ', response);
+                    const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
+                    const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
+                    const audioPlayer = document.getElementById('tts-audio-player');
+                    audioPlayer.src = audioUrl;
+                    audioPlayer.play();
+                })
+                .catch((err) => {
+                    console.log('tts 에러 : ', err);
+                });
+        },
     },
     watch: {},
     computed: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -23,22 +23,48 @@
23	23	</div>
24	24	<div class="content title-box">
25	25	<p class="title mt25 title-bg">step1. Hello WORLD</p>
	26	+ <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
	27	+ <h4>각 인물들의 대화를 듣고 읽어봅시다. 아래의 플레이버튼을 눌러 영어 발음을 들어보세요!</h4>
	28	+ <div class="listen-btn">
	29	+ <img src="../../../../resources/img/btn10_s.png" alt="" @click="playAudio" />
	30	+ <audio
	31	+ id="audio-player"
	32	+ src="client/resources/audio/passage/passage_intoduce.mp3"
	33	+ preload="auto"
	34	+ ></audio>
	35	+ </div>
	36	+ </div>
26	37	<div class="flex justify-center">
27	38	<div class="readGroup">
28		- <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
29	39	<div>
30	40	<div class="textbox">
31	41	<article
32	42	v-for="(line, index) in combinedLines"
33	43	:key="index"
34		- :class="['flex', 'align-start', 'mb10', { 'justify-end': index % 2 !== 0 }]"
	44	+ :class="['flex', 'align-center', 'mb10', { 'justify-end': index % 2 !== 0 }]"
35	45	>
36	46	<div v-if="index % 2 === 0" class="icon mr40">
37	47	<img src="../../../../resources/img/img37_s.png" alt="" />
38	48	<p class="name">{{ speakerA_name }}</p>
39	49	</div>
40	50	<p v-if="index % 2 === 0" class="read">{{ line }}</p>
	51	+ <div class="listen-btn ml10" v-if="index % 2 === 0">
	52	+ <img
	53	+ src="../../../../resources/img/new_img/icon/play_icon.png"
	54	+ alt=""
	55	+ @click="generateTts('male', line)"
	56	+ />
	57	+ <audio id="tts-audio-player" preload="auto"></audio>
	58	+ </div>
41	59
	60	+ <div class="listen-btn mr10" v-if="index % 2 !== 0">
	61	+ <img
	62	+ src="../../../../resources/img/new_img/icon/play_icon.png"
	63	+ alt=""
	64	+ @click="generateTts('femail', line)"
	65	+ />
	66	+ <audio id="tts-audio-player" preload="auto"></audio>
	67	+ </div>
42	68	<p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
43	69	<div v-if="index % 2 !== 0" class="icon">
44	70	<img src="../../../../resources/img/img37_s.png" alt="" />
...	...	@@ -139,6 +165,40 @@
139	165	this.speakerA_name = speakers.speakerA_name;
140	166	this.speakerB_name = speakers.speakerB_name;
141	167	},
	168	+
	169	+ playAudio() {
	170	+ const audio = document.getElementById('audio-player');
	171	+ audio.play();
	172	+ console.log('playing');
	173	+ },
	174	+
	175	+ // 대화 지문 재생
	176	+ generateTts(gender, line) {
	177	+ console.log('line : ', line);
	178	+ axios({
	179	+ url: 'http://165.229.169.32:35716/generate_tts',
	180	+ method: 'post',
	181	+ headers: {
	182	+ 'Content-Type': 'application/json; charset=UTF-8',
	183	+ },
	184	+ responseType: 'blob',
	185	+ data: {
	186	+ gender: gender,
	187	+ input_text: line,
	188	+ },
	189	+ })
	190	+ .then((response) => {
	191	+ console.log('tts 응답 : ', response);
	192	+ const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
	193	+ const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
	194	+ const audioPlayer = document.getElementById('tts-audio-player');
	195	+ audioPlayer.src = audioUrl;
	196	+ audioPlayer.play();
	197	+ })
	198	+ .catch((err) => {
	199	+ console.log('tts 에러 : ', err);
	200	+ });
	201	+ },
142	202	},
143	203	watch: {},
144	204	computed: {

Delete comment