매뉴얼

기타 음성안내 컨텐츠를 제작하는 방법

[설명하기 앞서]

지금 설명드릴 내용은 앞서 작성된 페이지별 음성안내 도움말과는 조금 다른 내용입니다.

페이지 음성안내는 해당 페이지에 대한 전체적인 설명이었다면, 음성안내 컨텐츠는 컨텐츠별로 음성안내를 할 수 있는 기능입니다.

한 페이지 안에 여러 개의 음성안내 컨텐츠가 제작될 수 있으며, 페이지 음성안내와는 조금 다르게 소스가 적용되니 페이지별로 음성안내를 하고 싶으신 분들은 아래의 링크를 따라가 주시면 됩니다.

☞ 페이지별 음성안내 설정방법

 


 

사이트를 제작하다 보면 페이지에 대한 설명을 글로 다 표현하지 못 하는 경우가 있습니다.

예를 들어 글자를 많이 넣을 수 없는 페이지 디자인이라던지 모바일 페이지처럼 공간이 협소하여 설명 글을 많이 넣을 수 없는 경우 등이 있는데

이럴 때에 음성안내 컨텐츠를 사용하면 사용자가 눈으로 디자인을 보고 귀로 페이지를 들을 수 있기 때문에 해결책이 될 수 있습니다.

이 기능을 활용하여 시각 장애인을 위한 사이트를 제작 할 수 있으며, 바쁜 생활 중에 사이트를 이용하는 고객들에게 빠른 안내가 가능합니다.

이러한 음성안내 컨텐츠를 제작하는 방법에 대해 설명해 드리겠습니다.

(해당 설명의 전체 소스는 게시글 하단에 게시되어 있으니 설명을 다 읽어보신 후 [디자인관리>고급디자인>추가페이지] 에서 소스를 붙여넣어 확인해 보시기 바랍니다^^)

 

[적용모습]

☞ 적용 페이지 확인

 

 

[음성안내 mp3 파일을 생성하는 방법]

음성 안내 할 내용을 mp3 파일로 자동 생성해 주는 명령어 : voice_load

이 명령어의 사용방법은 voice_load('음성 내용', '언어', '성별') 로 설정을 하실 수 있습니다.

설정 설명 : 언어 (kr:한국어 / en:영어 / jp:일어 / cn:중국어), 음성 성별 (M:남자 음성 / F:여자 음성)

 

컨텐츠에 사용하기 위해서는 이 voice_load 명령어를 사용해 mp3 파일을 불러올 수 있는 변수를 만들어야 합니다.

변수를 만드는 소스는 아래를 참고해 주세요.

 

{@
    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');
@}

 

이렇게 만든 변수를 페이지에 출력해 보면 mp3 파일 경로가 출력되는 것을 확인하실 수 있습니다.
 

<변수 사용>

<mp3 파일 주소><br>{$voice_info1_mp3}

 

<변수 출력 모습>

 

여기까지 하시면 mp3파일이 생성된 것을 확인하실 수 있습니다. 만들어진 mp3 파일은 <audio> 태그를 이용해 재생 할 수 있는데, 이제 이 mp3가 정상적으로 생성이 되었는지 확인을 해보도록 하겠습니다.

 

 

[음성안내 mp3 파일을 재생하는 방법]

아래의 소스를 추가 페이지에 입력해 주세요.

 

{@
    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');
@}

<audio autoplay>
    <source src="{$voice_info1_mp3}">
</audio>

 

<적용 화면>

 

mp3 파일이 정상적으로 잘 생성이 되었다면 페이지를 확인했을 때 mp3 파일이 자동 재생되고 있을 것입니다.

여기까지만 해도 음성안내 컨텐츠는 완성될테지만 음성이 자동재생 되기 때문에 사이트 이용자가 원할 때 재생 또는 정지를 할 수 있도록 버튼 기능을 제공하는 것이 더 좋은데, 이 기능을 지원해 주는 <audio> 의 오디오 플레이어 기능이 있습니다.

위의 소스에서 <audio autoplay> 되어 있는 부분에 autoplay 대신 controls 를 넣으면 mp3를 제어 할 수 있는 오디오 플레이어가 출력이 됩니다. 아래의 화면을 참고해 주세요.

 

<적용 화면>

 

<익스플로러 11에서 본 페이지 화면>

 

오디오 플레이어 기능을 적용하고 나면 재생/정지, 구간 선택, 음량 조절이 가능하게 됩니다.

하지만 플레이어가 다소 크고 투박한 디자인이기 때문에 다른 컨텐츠들과 조화를 이루지 못 하고 혼자 너무 튀어보이는 단점이 있습니다. (참고 : 브라우저 마다 기본 오디오 플레이어 모습이 다름)

그래서 보기에 깔끔하도록 재생/정지 버튼만 나타도록 스크립트로 설정하는 방법이 있는데 이제 본격적으로 음성안내 컨텐츠 제작 방법에 대해 설명해 드리겠습니다.

 

 

[음성안내 컨텐츠 제작 방법]

1. 음성안내 컨텐츠를 넣은 페이지에 설명 내용과 음성 설정을 한 소스를 넣어주세요.

- 음성안내 기능은 모든 페이지에 사용이 가능합니다. (추가 페이지, 세부화면디자인 페이지, 맞춤게시판, 맞춤전송폼 등)

- 예시로 추가 페이지에 음성안내 기능을 넣어보겠습니다. 추가 페이지의 html 소스 페이지에 아래의 소스를 넣어주세요. ( [디자인관리] > 고급디자인관리 > 추가페이지관리] )

 

{@
    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');
@}

<div class="voice_guide_cont_wrap">
    <audio id="user_voice_cont_player1">
        <source src="{$voice_info1_mp3}">
    </audio>

    <span id="voice_guide_cont_on1" class="icon_voice_guide state_voice_on" style="display:none;">
        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'off')" title="음성안내 끄기"|lan="kr"><span data-lan="kr">음성안내 끄기</span></a>
    </span>

    <span id="voice_guide_cont_off1" class="icon_voice_guide state_voice_off">
        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'on')" title="음성안내 켜기"|lan="kr"><span data-lan="kr">음성안내 켜기</span></a>
    </span>
</div>

 

<소스 설명>

음성파일을 재생/정지 하려면 오디오 플레이어를 제어하기 위한 Javascript 가 추가됩니다.  그리고 이 스크립트는 재생/정지 버튼으로 사용 할 a 태그에서 호출해 실행시켜야 합니다.

※ 호출하는 Javascript의 값이 올바르게 입력 되어야 버튼이 정상적으로 작동하기 때문에 확실히 이해하고 넘어가야 하는 부분입니다. (중요)

이해하시기 다소 어려우실 수 있어 알기 쉽도록 이미지로 설명드리겠습니다. 아래의 이미지를 참고하시면 색깔별로 표시된 부분들이 있는데 이 색깔끼리의 값이 서로 일치해야 정상적으로 작동이 됩니다.

 

 

소스 입력을 하고 페이지를 확인해 보면 '음성안내 켜기' 라는 링크 버튼만 있고 버튼을 눌러도 아무런 반응이 없을 것입니다.

아직 재생/정지 관련 자바스크립트와 아이콘 관련 CSS가 추가되지 않았기 때문에 그런 것이니 당황하시지 마시고 다음 단계를 따라해 주시면 됩니다^^

 

2. 재생/정지 관련 스크립트를 추가해 주세요.

- 스크립트만 따로 모아놓은 JS 파일이 따로 관리되고 있다면 [디자인관리 > 고급디자인관리 > JS 파일관리]에서 추가해 주세요.

- 만약 JS 파일이 따로 없는 상태라면 음성안내 컨텐츠를 제작 할 페이지 안에 추가해 주세요.

- 소스 파일의 제일 하단 마지막에 추가해 주세요. 만약 페이지 내에 넣으신다면 <script type="text/javascript"></script> 사이에 넣어주세요. (아래에 있는 이미지 참고)

 

<스크립트 소스>

function user_voice_cont_on(player_id, btn_on_id, btn_off_id, onoff){
    if(onoff == 'off'){
        document.getElementById(btn_on_id).style.display = 'none';
        document.getElementById(btn_off_id).style.display = 'inline-block';
    }else{
        document.getElementById(btn_on_id).style.display = 'inline-block';
        document.getElementById(btn_off_id).style.display = 'none';
    }

    if(document.getElementById(player_id)){
        if(onoff == 'off'){
            // 현재 재생 중이면 stop() 처리
            document.getElementById(player_id).pause();
            document.getElementById(player_id).currentTime = 0;
       }else{
            // 다시 paly() 처리
            document.getElementById(player_id).volume = 0.3;
            document.getElementById(player_id).play();
        }
    }

    document.getElementById(player_id).onended = function() {
        document.getElementById(btn_on_id).style.display = 'none';
        document.getElementById(btn_off_id).style.display = 'inline-block';
    };
 }

 

<페이지 내에 넣을 때>

 

스크립트를 추가하고 나면 아까 만들었던 버튼 링크가 작동되는 것을 확인하실 수 있을 겁니다.

이제 아이콘 디자인을 입히는 방법을 알려드리도록 하겠습니다.

 

3. 버튼 아이콘 관련 CSS를 추가해 주세요.

- CSS만 따로 모아놓은 CSS 파일이 따로 관리되고 있다면 [디자인관리 > 고급디자인관리 > CSS 파일관리]에서 추가해 주세요.

- 만약 CSS 파일이 따로 없는 상태라면 음성안내 컨텐츠를 제작 할 페이지 안에 추가해 주세요.

페이지 내에 넣으신다면 페이지 상단에 <style type="text/css"></style> 사이에 넣어주세요. (아래에 있는 이미지 참고)

 

<CSS 소스>

@font-face {
    font-family: 'voice_icomoon';
    src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot");
    src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot?#iefix") format("embedded-opentype"),
    url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.woff") format("woff"),
    url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.ttf") format("truetype"),
    url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.svg#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
 }

 .voice_guide_cont_wrap .icon_voice_guide {display:inline-block; vertical-align:top;}
 .voice_guide_cont_wrap .icon_voice_guide a {display:inline-block; width:50px;/* 아이콘 가로 크기 */ height:50px;/* 아이콘 세로 크기 */ border-radius:50%; text-align:center; text-decoration:none; vertical-align:top;}
 .voice_guide_cont_wrap .icon_voice_guide a:before {font-family:'voice_icomoon'; font-size:50px;/* 아이콘 폰트 크기 */ line-height:50px;/* 아이콘 폰트 크기 */ color:#444444;/* 정지 아이콘 폰트 색상 */}
 .voice_guide_cont_wrap .icon_voice_guide a span {position:absolute; top:-9999px; left:-9999px; font-size:0; text-indent:-9999px;}
 .voice_guide_cont_wrap .icon_voice_guide.state_voice_on a:before {content:'\e900';}
 .voice_guide_cont_wrap .icon_voice_guide.state_voice_off a:before {content:'\e901'; color:#d00000;/* 재생 아이콘 폰트 색상 */}

 

<페이지 내에 넣을 때>

 

css를 추가하면 이제 버튼 링크가 아이콘 버튼으로 변경되어 있는 것을 확인하실 수 있습니다.

여기까지 완료되었다면 음성안내 컨텐츠 제작 완성입니다^^

 

 

[주의사항]

만약 한 페이지 안에 음성안내 컨텐츠가 여러 개 들어간다면 음성안내의 html 소스 중 id 값이 중복되지 않도록 id 값을 변경해 주셔야 올바르게 작동이 됩니다.

위에서 설명한 내용 중 버튼 a 태그에 Javascript를 호출하는 부분에 대해 알려드렸는데 이 id 값을 잘 매칭시켜주셔야 오류가 발생하지 않습니다.

그래서 위에 설명드릴 때 확실하게 이해하고 넘어가야 하는 부분이라고 말씀드린 것입니다^^

예를 들어 첫번째 음성안내 컨텐츠의 버튼과 두번째 음성안내 컨텐츠의 버튼이 있다면 이 버튼들의 오디오 플레이어와 버튼 id 값이 겹치면 오류가 발생하게 됩니다.

올바른 사용 방법은 아래 소스 이미지를 참고하시면 이해에 도움이 되실 겁니다.

 

 

 

설명을 위해 css, js, html을 따로 나눠 알려드리게 되었는데 혹시나 한번에 소스를 전체 다 넣어 사용하고 싶으신 분들은 아래의 전체 소스를 복사하여 사용하시면 됩니다^^

 

[전체 소스]

<style type="text/css">
    @font-face {
        font-family: 'voice_icomoon';
        src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot");
        src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot?#iefix") format("embedded-opentype"),
        url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.woff") format("woff"),
        url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.ttf") format("truetype"),
        url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.svg#icomoon") format("svg");
        font-weight: normal;
        font-style: normal;
    }

    .voice_guide_cont_wrap .icon_voice_guide {display:inline-block; vertical-align:top;}
    .voice_guide_cont_wrap .icon_voice_guide a {display:inline-block; width:50px;/* 아이콘 가로 크기 */ height:50px;/* 아이콘 세로 크기 */ border-radius:50%; text-align:center; text-decoration:none; vertical-align:top;}
    .voice_guide_cont_wrap .icon_voice_guide a:before {font-family:'voice_icomoon'; font-size:50px;/* 아이콘 폰트 크기 */ line-height:50px;/* 아이콘 폰트 크기 */ color:#444444;/* 정지 아이콘 폰트 색상 */}
    .voice_guide_cont_wrap .icon_voice_guide a span {position:absolute; top:-9999px; left:-9999px; font-size:0; text-indent:-9999px;}
    .voice_guide_cont_wrap .icon_voice_guide.state_voice_on a:before {content:'\e900';}
    .voice_guide_cont_wrap .icon_voice_guide.state_voice_off a:before {content:'\e901'; color:#d00000;/* 재생 아이콘 폰트 색상 */}
</style>

{@
    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');
@}

<div class="voice_guide_cont_wrap">
    <audio id="user_voice_cont_player1">
        <source src="{$voice_info1_mp3}">
    </audio>

    <span id="voice_guide_cont_on1" class="icon_voice_guide state_voice_on" style="display:none;">
        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'off')" title="음성안내 끄기"|lan="kr"><span data-lan="kr">음성안내 끄기</span></a>
    </span>

    <span id="voice_guide_cont_off1" class="icon_voice_guide state_voice_off">
        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'on')" title="음성안내 켜기"|lan="kr"><span data-lan="kr">음성안내 켜기</span></a>
    </span>
</div>

<script type="text/javascript">
    function user_voice_cont_on(player_id, btn_on_id, btn_off_id, onoff){
        if(onoff == 'off'){
            document.getElementById(btn_on_id).style.display = 'none';
            document.getElementById(btn_off_id).style.display = 'inline-block';
        }else{
            document.getElementById(btn_on_id).style.display = 'inline-block';
            document.getElementById(btn_off_id).style.display = 'none';
        }

        if(document.getElementById(player_id)){
            if(onoff == 'off'){
                // 현재 재생 중이면 stop() 처리
                document.getElementById(player_id).pause();
                document.getElementById(player_id).currentTime = 0;
            }else{
                // 다시 paly() 처리
                document.getElementById(player_id).volume = 0.3;
                document.getElementById(player_id).play();
            }
        }

        document.getElementById(player_id).onended = function() {
            document.getElementById(btn_on_id).style.display = 'none';
            document.getElementById(btn_off_id).style.display = 'inline-block';
        };
    }
</script>

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top