Merge branch 'feature/output_audio' into 'master'

Feature/output audio

add output audio

See merge request !2

+curl -v -X POST "https://kakaoi-newtone-openapi.kakao.com/v1/synthesize" \
+-H "Content-Type: application/xml" \
+-H "Authorization: KakaoAK b471fd473a02136533554c3c6c108c91" \
+-d '<speak><voice name="WOMAN_READ_CALM">정상</voice> </speak>' > 0.mp3
+
+curl -v -X POST "https://kakaoi-newtone-openapi.kakao.com/v1/synthesize" \
+-H "Content-Type: application/xml" \
+-H "Authorization: KakaoAK b471fd473a02136533554c3c6c108c91" \
+-d '<speak><voice name="WOMAN_READ_CALM">미착용</voice></speak>' > 1.mp3
+
+curl -v -X POST "https://kakaoi-newtone-openapi.kakao.com/v1/synthesize" \
+-H "Content-Type: application/xml" \
+-H "Authorization: KakaoAK b471fd473a02136533554c3c6c108c91" \
+-d '<speak><voice name="WOMAN_READ_CALM">턱스크</voice></speak>' > 2.mp3
+
+curl -v -X POST "https://kakaoi-newtone-openapi.kakao.com/v1/synthesize" \
+-H "Content-Type: application/xml" \
+-H "Authorization: KakaoAK b471fd473a02136533554c3c6c108c91" \
+-d '<speak><voice name="WOMAN_READ_CALM">입스크</voice></speak>' > 3.mp3
+
+curl -v -X POST "https://kakaoi-newtone-openapi.kakao.com/v1/synthesize" \
+-H "Content-Type: application/xml" \
+-H "Authorization: KakaoAK b471fd473a02136533554c3c6c108c91" \
+-d '<speak><voice name="WOMAN_READ_CALM">시작</voice> </speak>' > 4.mp3

@@ -13,7 +13,8 @@ router.get('/data', function(req, res, next){
   id = req.query.id;
 
   data = {
-    image : "/images/"+id+".jpg"
+    image : "/images/"+id+".jpg",
+    audio : "/audio/"+id+".mp3"
   }
   //데이터 확인
   console.log(data);

@@ -16,7 +16,11 @@
     <div id="check_image">
         <img src="/images/1.jpg">
     </div>
-
+    <div id = "check_audio">
+        <!--초기값으로 '시작'이라는 음성을 사용 -->
+        <!--auto play 기능을 위해 iframe 사용 -->
+        <iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@@ -127,12 +131,16 @@
     function process_json(json_data){
         var images = json_data.image;
         var strDOM = "";
-
+        var audio = json_data.audio;
+        var audioName = "";
         //이미지 태그 생성
         strDOM += '<img src="'+images+'">';
-
+        //오디오 태그 생성
+        audioName += '<iframe src="' + audio + '" allow="autoplay" id="audio" style="display:none"></iframe>';
         //#cehck_image div의 이미지 교체
         $('#check_image').html(strDOM);
+        //#check_audio div의 오디오 교체
+        $('#check_audio').html(audioName);
     }
 
     </script>