Q & A

질답게시판

홈 > 회원포럼 > 질답/버그/제안
질답/버그/제안

[문의 및 팁] 아미나빌더에 AWS polly 서비스 적용방법 및 php 문의

4 나눗자료 4 102

텍스트를 음성 또는 MP3로 변환하여 읽어주는 AI서비스인 AWS polly 를 아미나 빌더에 적용하였습니다만,

그누보드에 적용 사례는 아예 검색이 안되는 부분과 코딩을 몰라서 문의로 등록합니다. 


고수님들께서 아미나빌더 플러그인으로 제작하여 배포해주시면 더 없이 고맙겠습니다.

또한 문의드린 내용에 해결할 수 있는 직접적인 소스 또는 방향성 또는 팁을 주셨으면 하는 바램입니다.


1. 모범샘플 URL: https://www.onepang.com/notice/37041

-. 분석사항: 제로보드XE로 보이며 유료애드온( https://catenater.com/ai_voice ) 적용 함

-. 적용사항: AWS polly api 적용, 오디오 파일 파형 ( https://nachwon.github.io/waveform/ ) 적용



2. 아미나빌더 AWS polly 적용 테스트 URL: https://www.zrbox.com/bbs/board.php?bo_table=notice

적용 polly.php 확인URL : https://w3lessons.info/2018/02/07/php-text-to-speech-amazon-polly/

적용 polly.php 다운로드URL: : https://app.box.com/s/d220ikzmo30rppita4kc5rdsupdicuc7


-. 문제점: 텍스트를 오디오로 변환과정에서 ( polly.php?text=일이삼사오 식으로 전달 ) url전달식이다 보니 url길이 제한으로

        오류발생하여 기능작동 안함, 즉 긴 문장을 변환하지 못함.


-. 해결요청: polly.php?text=텍스트 전달 방식을 url전달방식이 아닌 긴 문장도 변환할수 있도록 수정 방법


-. 아미나 빌더에 적용 ts.html 소스참고: 이하 소스를 기준으로 아미나빌더 게시판 viw스킨에 적용함.(내용 중 ai.php 가 polly.php 파일명만 변경함)

https://www.zrbox.com/ts.html

ts.html 시작----------------------------------

<HTML>

<HEAD> 

<meta charset="utf-8">

<link rel="stylesheet" href="https://www.zrbox.com/css/bootstrap.min.css">

<link rel="stylesheet" href="https://www.zrbox.com/css/font-awesome/css/font-awesome.min.css">

<STYLE type="text/css">

        .playAudio { margin-right: 10px; }

        .pauseAudio { margin-right: 10px; display: none; }

        .sound { margin:10 0 0 10; width:600px;}

</STYLE>

</HEAD> 

<BODY>

<div class="sound">

<div class="form-group">

<div id="polly-text" >안녕하세요. 아미나에 AWS polly를 적용하고자 합니다.</div>

</div>


<div class="form-group">

 <div class="col-md-12">

<p class="pull-left">

    <label>읽기속도:</label>

<select class="form-group" name="rate" id="rate">

    <option value="x-slow">아주느림</option>

    <option value="slow">느림</option>

    <option value="medium" selected="selected">보통</option>

    <option value="fast">빠름</option>

    <option value="x-fast">아주빠름</option>

</select>

<label>언어:</label>

<select class="form-group" name="voice" id="voice">

    <option value="Seoyeon">한국어</option>

    <option value="Zhiyu">중국어</option>

    <option value="Mizuki">일본어</option>

    <option value="Ivy">영어</option>

</select>

</p>

<p class="pull-right">

    <audio id="player"></audio>

<button type="submit" class="btn btn-primary pull-right downloadMP3"><i class="fa fa-download"></i> MP3 다운로드</button>

<button type="submit" class="btn btn-success pull-right playAudio"><i class="fa fa-play"></i> 읽어주세요</button>

<button type="submit" class="btn btn-success pull-right pauseAudio"><i class="fa fa-pause"></i> 정지</button>

</p>

</div>

</div>

<iframe id="downMP3" src="about:blank" height="0" width="0"></iframe>

</div>

<SCRIPT src="https://www.zrbox.com/js/jquery-1.11.3.min.js"></SCRIPT>

<script>

     $(document).ready(function(){


var player = document.getElementById('player');


player.onplay = function() {

    if(player.src==''){

        var PollyText = $('#polly-text').text();

            if(PollyText == '')

            {

                alert("입력된 내용이 없습니다.");

                return false;

            }

    }

}


player.onplaying = function(e) {

    $(".pauseAudio").show();

    $(".playAudio").hide();

}


player.onpause = function() {

    player.pause();

};


player.onended = function(){

    $("a.pauseAudio").hide();

    $("a.playAudio").show();

    $(".playAudio").html('<i class="fa fa-play"></i> 읽어 주세요');

}


        $(".playAudio").on( "click", function() {

            var PollyText = $('#polly-text').text();

            if(PollyText == '')

            {

                alert("입력된 내용이 없습니다.");

                return false;

            }

            //$(this).prop('disabled', true); 

            //$(this).html('<i class="fa fa-stop-circle"></i> Listening'); 

            listen(PollyText);

        });


    $(".pauseAudio").click(function(){

        

        $(this).hide();

        $(".playAudio").show();


        player.pause();

    });


     $(".downloadMP3").on( "click", function() {

            var PollyText = $('#polly-text').text();

            var voice= jQuery('#voice').val();

            var speed_rate = jQuery('#rate').val();

            if(PollyText == '')

            {

                alert("입력된 내용이 없습니다.");

                return false;

            }

            $(this).prop('disabled', true); 

            $(this).html('<i class="fa fa-spinner"></i> Processing..'); 

            //listen(PollyText);

            var download_url = 'https://www.zrbox.com/plugin/ai.php?text='+

        encodeURIComponent(PollyText)+'&voice='+encodeURIComponent(voice)+'&rate='+speed_rate+'&download=1';

            $("#downMP3").attr("src",download_url);

            $(this).prop('disabled', false); 

            $(this).html('<i class="fa fa-download"></i> MP3 다운로드'); 

    });

});


function listen(PollyText) {

    var voice= jQuery('#voice').val();

    var speed_rate = jQuery('#rate').val();

    player.src ='https://www.zrbox.com/plugin/ai.php?text='+

        encodeURIComponent(PollyText)+'&voice='+encodeURIComponent(voice)+'&rate='+speed_rate;

    player.play();

}

</script>

 </BODY>

 </HTML>

ts.html 종료----------------------------------


4 Comments
15 블루엔젤 11.09 19:38  
GET방식으로 길이 문제가 된다면
POST방식으로 바꿔서 해보세요
aws polly 문자길이는 이정도네요
https://aws.amazon.com/ko/about-aws/whats-new/2018/03/amazon-polly-increases-character-limits/
4 나눗자료 11.09 19:59  
바쁘실텐데 긴 글 읽어주시고 답변 주셔서 고맙습니다.
M 한별아빠 11.10 01:25  
1. 음... 이건 제가 봐서는 polly.php 파일에서 손봐야 할 듯 합니다.ㅠㅠ

2. 예를들면 게시판처럼 polly.php에는 polly.php?bo_table=게시판아이디&wr_id=글번호&voice=&rate= 형태로 넘기고, polly.php 파일에서 이 정보로 다시 게시물 정보 가져와서 음성파일로 만드는 것이죠.

3. 즉, text를 직접 넘기는 것이 아니라, 텍스트를 가져올 수 있는 정보만 넘기고, polly.php 파일에서 이 정보로 텍스트를 추출해서 처리해 주면 될 것 같습니다.

4. 적는 김에 구체적으로 적으면.... 우선 스크립트에서 아래처럼 변경하는데, 스크립트에서 text 관련 부분은 다 필요없으니 삭제하는게 나을 것입니다.  var PollyText = $('#polly-text').text(); 관련부분들...

var download_url = 'https://www.zrbox.com/plugin/ai.php?bo_table=<?php echo $bo_table;?>&wr_id=<?php echo $wr_id;?>&voice='+encodeURIComponent(voice)+'&rate='+speed_rate+'&download=1';

player.src ='https://www.zrbox.com/plugin/ai.php?bo_table=<?php echo $bo_table;?>&wr_id=<?php echo $wr_id;?>&voice='+encodeURIComponent(voice)+'&rate='+speed_rate;

/plugin/ai.php 파일 제일 상단에 아래처럼 추가해 주면 될 것 같네요.

include_once('./../common.php');
$text = apms_get_text($write['wr_content']);

참고로 ai.php 위치가 변경되면 common.php 파일 경로도 변경되어야 합니다.

5. 그런데, 음성파일이라 계정용량 무지막지하게 잡아 먹을꺼 같은데... /bbs/db_table.optimize.php 파일 제일 하단에 있는 음성캡챠 참고해서, 1일 전 생성된 것은 자동삭제 되도록하는 로직도 추가해 주셔야 할 듯...ㅠㅠ
4 나눗자료 11.12 09:25  
한별아빠님께서 직접 답변을 주셨네요. 영광입니다.^^
말씀주신 내용대로 해보도록 하겠습니다.
답변 감사합니다.
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand