Commit @9b27f33026d1517204a422c793c06cfdc4313ffc

이은진 2024-08-14

240814 이은진 단어장 음성 추가

@9b27f33026d1517204a422c793c06cfdc4313ffc

9b27f33

client/resources/audio/family.wav (Binary) (added)

+++ client/resources/audio/family.wav

Binary file is not shown

9b27f33

client/resources/audio/love.wav (Binary) (added)

+++ client/resources/audio/love.wav

Binary file is not shown

9b27f33

client/resources/audio/police.wav (Binary) (added)

+++ client/resources/audio/police.wav

Binary file is not shown

fc7c56a

9b27f33

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20"></p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
+          <p class="subtitle2 mr20"></p> 
         </div>
 
         <div class="flex justify-center">
-          <div class="vocaGroup">
-            <div class="grid-container">
-              <div v-for="(item, index) in word" :key="index" class="grid-item">
-                <article class="flex align-center">
-                  <div class="imgGroup mr30">
-                    <img :src="item.pic" :alt="item.eng" />
-                  </div>
-                  <div class="flex align-start">
-                    <button class="listen-btn mr30" tabindex="0" aria-label="음성 재생">
-                      <img :src="item.sound" :alt="'Sound for ' + item.eng" />
-                    </button>
-                    <div>
-                      <h3>{{ item.eng }}</h3>
-                      <div class="flex align-center mt10">
-                        <p class="yellow-box">명</p>
-                        <span class="title1">{{ item.kor }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </article>
+              <div class="vocaGroup">
+                <div class="flex justify-between mb80">
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
+                                data-num="1" @click="playAudio"></button>
+                                <audio id="audio-player" src="client/resources/audio/family.wav" preload="auto"></audio>
+                           <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <p class="yellow-box">명</p>
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/31img40_s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
+                                data-num="1" @click="playAudio"></button>
+                                <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
+                           <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <p class="yellow-box">명</p>
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                </div>
+                <div class="flex justify-between">
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/img41_s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
+                                data-num="1" @click="playAudio"></button>
+                                <audio id="audio-player" src="client/resources/audio/love.wav" preload="auto"></audio>
+                           <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <p class="yellow-box">명</p>
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                    <article class="flex align-center">
+                        <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
+                        <div class="flex align-start">
+                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
+                                data-num="1" @click="playAudio"></button>
+                                <audio id="audio-player" src="client/resources/audio/police.wav" preload="auto"></audio>
+                           <div>
+                                <h3>sidewalk</h3>
+                                   <div class="flex align-center mt10">
+                                      <p class="yellow-box">명</p>
+                                      <span class="title1">보도</span>
+                                   </div>
+                           </div>
+                        </div>
+                    </article>
+                </div>
               </div>
-            </div>
           </div>
         </div>
-      </div>
       <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
   </div>

 <script>
 export default {
   data() {
-    return {
-      word: [
-        {
-          eng: "apple",
-          kor: "사과",
-          pic: require("../../../../resources/img/img40_s.png").default,
-          sound: require("../../../../resources/img/btn10_s.png").default
-        },
-        {
-          eng: "cloud",
-          kor: "구름",
-          pic: require("../../../../resources/img/img42_31s.png").default,
-          sound: require("../../../../resources/img/btn10_s.png").default
-        },
-        {
-          eng: "log",
-          kor: "통나무",
-          pic: require("../../../../resources/img/31img40_s.png").default,
-          sound: require("../../../../resources/img/btn10_s.png").default
-        },
-        {
-          eng: "guitar",
-          kor: "기타",
-          pic: require("../../../../resources/img/img41_s.png").default,
-          sound: require("../../../../resources/img/btn10_s.png").default
-        }
-      ]
+    return { 
     }
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
-    }
+    },playAudio() {
+         const audio = document.getElementById('audio-player');
+         audio.play();
+         console.log("playing")
+      }
   },
   watch: {
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -14,37 +14,78 @@
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
16	16	<div class="flex align-center mb30">
17		- <p class="subtitle2 mr20"></p>
18		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button> -->
	17	+ <p class="subtitle2 mr20"></p>
20	18	</div>
21	19
22	20	<div class="flex justify-center">
23		- <div class="vocaGroup">
24		- <div class="grid-container">
25		- <div v-for="(item, index) in word" :key="index" class="grid-item">
26		- <article class="flex align-center">
27		- <div class="imgGroup mr30">
28		- <img :src="item.pic" :alt="item.eng" />
29		- </div>
30		- <div class="flex align-start">
31		- <button class="listen-btn mr30" tabindex="0" aria-label="음성 재생">
32		- <img :src="item.sound" :alt="'Sound for ' + item.eng" />
33		- </button>
34		- <div>
35		- <h3>{{ item.eng }}</h3>
36		- <div class="flex align-center mt10">
37		- <p class="yellow-box">명</p>
38		- <span class="title1">{{ item.kor }}</span>
39		- </div>
40		- </div>
41		- </div>
42		- </article>
	21	+ <div class="vocaGroup">
	22	+ <div class="flex justify-between mb80">
	23	+ <article class="flex align-center">
	24	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
	25	+ <div class="flex align-start">
	26	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	27	+ data-num="1" @click="playAudio"></button>
	28	+ <audio id="audio-player" src="client/resources/audio/family.wav" preload="auto"></audio>
	29	+ <div>
	30	+ <h3>sidewalk</h3>
	31	+ <div class="flex align-center mt10">
	32	+ <p class="yellow-box">명</p>
	33	+ <span class="title1">보도</span>
	34	+ </div>
	35	+ </div>
	36	+ </div>
	37	+ </article>
	38	+ <article class="flex align-center">
	39	+ <div class="imgGroup mr30"><img src="../../../../resources/img/31img40_s.png" data-num="1"></div>
	40	+ <div class="flex align-start">
	41	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	42	+ data-num="1" @click="playAudio"></button>
	43	+ <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
	44	+ <div>
	45	+ <h3>sidewalk</h3>
	46	+ <div class="flex align-center mt10">
	47	+ <p class="yellow-box">명</p>
	48	+ <span class="title1">보도</span>
	49	+ </div>
	50	+ </div>
	51	+ </div>
	52	+ </article>
	53	+ </div>
	54	+ <div class="flex justify-between">
	55	+ <article class="flex align-center">
	56	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img41_s.png" data-num="1"></div>
	57	+ <div class="flex align-start">
	58	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	59	+ data-num="1" @click="playAudio"></button>
	60	+ <audio id="audio-player" src="client/resources/audio/love.wav" preload="auto"></audio>
	61	+ <div>
	62	+ <h3>sidewalk</h3>
	63	+ <div class="flex align-center mt10">
	64	+ <p class="yellow-box">명</p>
	65	+ <span class="title1">보도</span>
	66	+ </div>
	67	+ </div>
	68	+ </div>
	69	+ </article>
	70	+ <article class="flex align-center">
	71	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
	72	+ <div class="flex align-start">
	73	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	74	+ data-num="1" @click="playAudio"></button>
	75	+ <audio id="audio-player" src="client/resources/audio/police.wav" preload="auto"></audio>
	76	+ <div>
	77	+ <h3>sidewalk</h3>
	78	+ <div class="flex align-center mt10">
	79	+ <p class="yellow-box">명</p>
	80	+ <span class="title1">보도</span>
	81	+ </div>
	82	+ </div>
	83	+ </div>
	84	+ </article>
	85	+ </div>
43	86	</div>
44		- </div>
45	87	</div>
46	88	</div>
47		- </div>
48	89	<div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
49	90	</div>
50	91	</div>
...	...	@@ -53,39 +94,17 @@
53	94	<script>
54	95	export default {
55	96	data() {
56		- return {
57		- word: [
58		- {
59		- eng: "apple",
60		- kor: "사과",
61		- pic: require("../../../../resources/img/img40_s.png").default,
62		- sound: require("../../../../resources/img/btn10_s.png").default
63		- },
64		- {
65		- eng: "cloud",
66		- kor: "구름",
67		- pic: require("../../../../resources/img/img42_31s.png").default,
68		- sound: require("../../../../resources/img/btn10_s.png").default
69		- },
70		- {
71		- eng: "log",
72		- kor: "통나무",
73		- pic: require("../../../../resources/img/31img40_s.png").default,
74		- sound: require("../../../../resources/img/btn10_s.png").default
75		- },
76		- {
77		- eng: "guitar",
78		- kor: "기타",
79		- pic: require("../../../../resources/img/img41_s.png").default,
80		- sound: require("../../../../resources/img/btn10_s.png").default
81		- }
82		- ]
	97	+ return {
83	98	}
84	99	},
85	100	methods: {
86	101	goToPage(page) {
87	102	this.$router.push({ name: page });
88		- }
	103	+ },playAudio() {
	104	+ const audio = document.getElementById('audio-player');
	105	+ audio.play();
	106	+ console.log("playing")
	107	+ }
89	108	},
90	109	watch: {
91	110

Delete comment