[스크립트]audio_control.js : 초 단위로 MP3 파일을 실행시켜주는 스크립트

초 단위로 MP3 파일을 컨트롤 할 수 있는 스크립트입니다.

EPUB 3.0에서 사용할 수 있고, 나모 펍트리, 깃든뷰어에서 테스트 하였으며, 교보eBook 뷰어에서도 정상적으로 작동합니다.

단, 교보eBook 뷰어(V 2.4.7 기준)에서는 플레이버튼을 누를 때 메뉴나 페이지 넘김 액션이 함께 일어나는 문제가 있네요.

이 스크립트는 다음과 같은 기능을 지원합니다.

1. 오디오 실행, 정지, 볼륨조절 버튼을 기본 컨트롤러가 아닌 사용자가 디자인한 이미지나 텍스트로 편집 가능

2. MP3 전체 실행/정지 가능

3. 초 단위로 특정 구간을 지정해서 실행 가능

4. 볼륨을 10단계로 조절 가능(볼륨 조절 버튼을 페이지 넘김으로 사용할 때 필요함)

    *단, 기기의 H/W 볼륨이 아닙니다. 예를 들어 스마트폰 볼륨이 5로 되어 있다면 이 볼륨 범위 내에서 조절이 됩니다.

사용 방법과 예제 파일을 첨부합니다. 

예제 파일은 토마토 출판사의 '꼭 필요한 영어회화 베스트 표현 1200 <상황회화 편>'에 있는 내용 일부와 토마토 출판사 홈페이지에서 다운받은 MP3 파일을 사용했습니다.

출판사의 허락을 받지 못하고 사용했는데 저작권 문제가 있다면 바로 삭제를 하겠습니다. 

* 스크립트 설명 : EPUB3 오디오 컨트롤러

* 적용 sample

<div>

<audio id="sample" 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><button onclick="playStop()">stop</button></p>

</div>

* 본 스크립트는 www.epubguide.net에서 제작하였으며, 누구나 자유롭게 사용 및 수정이 가능합니다. 

* 단, 배포를 할 경우 내용을 일부 수정했다 하더라도 원본의 출처를 반드시 밝혀주시기 바랍니다.

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

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 playPause()

{ 

myAudio.pause();

    }

function volUp()

{

    myAudio.volume+=0.1

   }

function volDown()

{

    myAudio.volume-=0.1

   }

예제 파일

audio_control.js

오디오 삽입 샘플_20160108.epub