EPUB3에서 오디오(mp3) 컨트롤러 변경 + 특정 구간 재생

* 요청이 있어 mp3파일의 구간 재생 및 컨트롤러 디자인 변경하는 스크립트를 올립니다*

스크립트를 모르는 분이라면 아래 코드를 그대로 사용하셔도 됩니다. 아래 코드를 어떻게 사용해야 하는지 이해가 안가신다면 쪽지를 남겨주세요.

EPUB3로 책을 제작할 때 오디오나 동영상을 가장 많이 삽입하는 것 같습니다. 오디오 삽입은 아주 간단합니다. 아래 코드처럼 오디오 파일을 삽입하면 간단한 컨트롤러까지 자동으로 나타나게 됩니다. 

<audio controls="controls">

 <source src="../Audio/sample.mp3" type="audio/ogg"/>

Your viewer does not support the audio element.

</audio>

---------------------------------------------------------------------------

<audio src="../Audio/sample.mp3" type="audio/ogg"/ controls="controls">

Your viewer does not support the audio element.

</audio>

위의 예는 HTML5에서 기본으로 제공하는 코드로 어떤 것을 사용해도 동일합니다. 위 코드를 사용하면 자동으로 아래와 같은 컨트롤러가 나타납니다. 컨트롤러는 실행과 일시정지, 소리조절을 할 수 있으며 진행율이 표시됩니다. 화면이 작을 경우에는 자동으로 화면에 맞춰 소리 조절이나 진행율이 사라지기도 합니다. 

* 기본 오디오 컨트롤러*

** 샘플은 단순 이미지로 실제 플레이는 되지 않음**

하지만 책을 만들다 보면 보다 다양한 디자인이 필요할 수 있습니다. 그리고 기본 오디오 컨트롤러를 이용하면 처음부터 끝까지 실행이 되기 때문에 어학교재처럼 특정 구간을 들어야 할 때는 구간별로 오디오 파일을 만들어 수십개, 수백개의 오디오 파일을 각각 지정을 해야합니다. 

이럴 때 스크립트를 사용해 컨트롤러를 수정할 수 있습니다. 스크립트를 사용하면 아래처럼 플레이 버튼의 모양을 변경한다던가, 볼륨 조절 버튼을 추가할 수도 있고, mp3파일 하나만 넣고, 1/100초 단위로 조정을 해가며 원하는 위치만 플레이를 시킬 수 있습니다. 

* 스크립트로 컨트롤러 변경 & 원하는 위치 플레이 *

** 샘플은 단순 이미지로 실제 플레이는 되지 않음**

위 이미지를 보고 '기본 컨트롤러가 더 깔끔하잖아' 하고 얘기하실 분은 없으시리라 생각하겠습니다. 이정도 이해력은 있어야 아래 내용을 이해할 수 있을 테니까요. 위 코드를 만든 스크립트를 하나씩 설명해 드리겠습니다. 설명을 보시고 코드를 이해하신다면 어학교재 처럼 오디오 파일을 많이 삽입해야 할 때 큰 도움이 될거에요.

<audio id="sample1" src="../Audio/sample.mp3"> Your viewer does not support the audio element.</audio>

먼저 오디오를 삽입합니다. 기본 코드를 사용하지만 컨트롤러(controls="controls")를 추가하지 않았습니다. 이렇게 하면 화면에 컨트롤러가 나타나지 않기 때문에 오디오 파일이 들어간 위치에 아무것도 표시되지 않습니다. 대신 컨트롤러를 조작하기 위해 id="sample1"이라고 오디오의 ID를 지정했습니다. 한 페이지에서 여러개의 오디오가 들어갈 경우 각각의 컨트롤러는 이 ID를 참고해서 어떤 오디오 파일을 실행시켜야 하는지가 결정됩니다.

<p>

모두 듣기

<button onclick="playAll()">▶</button>

<button onclick="playStop()">■</button>

<button onclick="volUp()">+</button>

<button onclick="volDown()">-</button>

</p>

이 부분은 컨트롤러를 어떻게 변경하는지 보여주는 샘플입니다. 우선 스크립트에 해당하는 onclick="palyAll()" 부분은 나중에 설명을 하고, <button>태그부터 설명하겠습니다. <button>태그는 글자 그대로 버튼을 만들어 주는 태그입니다. 오디오나 비디오로만 쓸 수 있는게 아니라 다양한 스크립트의 실행 버튼으로 사용될 수 있습니다. 이 태그를 사용하면 자동으로 버튼이 그려지고 태그 사이에 들어있는 내용이 버튼 위에 표시됩니다. 

<button ...>버튼 이름</button>

'버튼 이름'이 들어갈 부분에 원하는 플레이 버튼을 넣거나 이미지를 삽입할 수 있습니다. 이미지는 버튼 태그 사이에 <img src="url"/>로 삽입을 하면 됩니다. 이미지를 이용하면 기본 플레이 버튼보다 다양한 표현이 가능하기 때문에 편집을 할 때 편집자의 의도에 따라 다양한 디자인을 적용할 수 있게 됩니다. 

이제 스크립트를 설명하겠습니다. 스크립트는 각각이 어떻게 작동하는지까지 설명을 하려면 많이 복잡하기 때문에 아래 스크립트를 어떻게 사용하는지를 중심으로 설명을 하겠습니다. 

<button onclick="playAll()">▶</button>

...

function playAll()

{ 

myAudio.currentTime=0;

myAudio.play();

}

<button onclick="function">버튼이름</button>에서 onclick은 클릭 버튼을 의미합니다. function은 버튼을 눌렀을 때 실행할 기능이 들어갑니다. 위 코드에서는 오디오의 시작 시간을 0으로(myAudio.currentTime=0;) 해서 실행(myAudio.play();)하라는 기능이 playAll()이라는 function에 담겨있다는 의미(function playAll())입니다. 

따라서 버튼을 클릭하면 playAll()에 담겨져 있는 기능, 처음부터 오디오 파일을 실행하게 되겠지요.

다른 기능도 동일합니다. playStop()은 실행 시간을 0으로 다시 돌려 놓고, 파일을 정지하게 됩니다. 만약 실행 시간을 0으로 돌리지 않으면 일시정지가 됩니다. 일시정지가 필요한 분들은 아래처럼 pause 버튼을 만들 수 있습니다. 

function playStop()

{ 

myAudio.pause();

}

볼륨 버튼은 0.2단계씩 볼륨을 올리거나 내릴 수 있습니다. 여기서 볼륨은 기기의 하드웨어 볼륨이 아닙니다. 기기의 하드웨어 볼륨 범위 내에서 조절되기 때문에 최대 크기는 기기의 볼륨 버튼으로 설정한 크기를 넘어설 수는 없습니다. 볼륨은 0부터 1 사이에서 조정이 가능한데, 아래 스크립트에서는 0.2씩 5단계로 볼륨을 조절할 수 있습니다. 더 세밀한 볼륨 조절이 필요하다면 0.1 등으로 변경을 하면 됩니다. 

function volUp()

   {

    myAudio.volume+=0.2

   }

끝으로 가장 복잡한 부분인 재생 구간 설정입니다. 위에서 설명한 것 처럼 아래 버튼을 누르면 playSegment(3,8)이라는 기능이 실행됩니다. 이 기능은 3초 ~ 8초 사이를 실행시키라는 기능이 들어가 있습니다. 스크립트에 대한 설명은 넘어가겠습니다. 스크립트를 아는 분이라면 설명 안해도 이해할테고, 스크립트를 모르는 분이라면 설명을 해도 이해가 어려우실테니...

<p>

3초 ~ 8초 사이

<button onclick="playSegment(3,8)">▶</button>

</p>

------------------------------------------------------------------

myAudio.addEventListener("timeupdate", function (){

if (myAudio.currentTime >= segEnd) {

myAudio.pause();

}   

console.log(myAudio.currentTime);

}, false);

function playSegment(startTime, endTime){

segEnd = endTime;

myAudio.currentTime = startTime;

myAudio.play();

}

구간 플레이가 필요한 mp3등 오디오 파일을 아무 플레이어에서든 실행시키면 원하는 구간이 몇초에 있는지 확인할 수 있습니다. 어학용 플레이어라면 1/100초 단위로도 확인이 가능하겠지요. 이런 플레이어로 원하는 구간의 시작 시간과 끝나는 시간을 확인합니다. 만약 시작 시간이 3.5초~ 8.5초라면 playSegment(3.5,8.5)처럼 소수점으로 표시할 수 있습니다. 

만약 문장 암기 방식의 어학교재를 만들고 있고, mp3 하나에 암기 문장이 모두 들어가 있다면 mp3를 하나씩 자를 필요 없이 문장의 시작과 끝 위치만 확인해서 문장별 음성을 들을 수 있게 책을 만들 수 있게 됩니다. 

<p>play가 되야 하는 문장<button onclick="playSegment(3,8)">▶</button></p>

스크립트를 모르는 분이라면 아래 코드를 그대로 사용하셔도 됩니다. 아래 코드를 어떻게 사용해야 하는지 이해가 안가신다면 쪽지를 남겨주세요.

# 스크립트 샘플

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ko">

<head>

  <title>오디오 컨트롤러 변경 + 특정 구간 재생</title>

</head>

<body id="sec1">

    <section id="sectionstart" epub:type="chapter">

<h2>오디오 특정 위치 플레이</h2>

<p><br /></p>

<div>

<audio id="sample1" src="../sample.mp3"> Your viewer does not support the audio element.</audio>

<p>모두 듣기<button onclick="playAll()">▶</button><button onclick="playStop()">■</button><button onclick="volUp()">+</button><button onclick="volDown()">-</button></p>

<p>3초 ~ 8초 사이<button onclick="playSegment(3,8)">▶</button></p>

<p>10초 ~ 15초 사이<button onclick="playSegment(10,15)">▶</button></p>

<p>17초 ~ 22초 사이<button onclick="playSegment(17,22)">▶</button></p>

<p>25초 ~ 30초 사이<button onclick="playSegment(25,30)">▶</button></p>

<p><button onclick="playStop()">stop</button></p>

</div>

</section>

<script>

<!-- 본 스크립트는 www.epubguide.net에서 제작하였으며, 누구나 자유롭게 사용 및 수정이 가능합니다. 단, 배포를 할 경우 내용을 일부 수정했다 하더라도 원본의 출처를 반드시 밝혀주시기 바랍니다.-->

var myAudio=document.getElementById("sample1");

var segEnd;

myAudio.addEventListener("timeupdate", function (){

if (myAudio.currentTime >= segEnd) {

myAudio.pause();

}   

console.log(myAudio.currentTime);

}, false);

function playSegment(startTime, endTime){

segEnd = endTime;

myAudio.currentTime = startTime;

myAudio.play();

}

function playAll()

{ 

myAudio.currentTime=0;

myAudio.play();

}

function playStop()

{ 

myAudio.currentTime=0;

myAudio.pause();

    } 

function volUp()

   {

    myAudio.volume+=0.2

   }

function volDown()

   {

    myAudio.volume-=0.2

   }

</script> 

</body>

</html>