예제 13-1. 오디오와 비디오를 가진 웹 페이지. 예제 13-2. 자바스크립트로 오디오 제어기 만들기. 예제 13-3. 비디오를 원본 크기로 재생. 예제 13-4. 오디오 재생이 끝나면 웹 페이지를 노란색으..
WEB/JAVASCRIPT-CONCEPT 2017. 11. 4. 17:29 |13. 오디오 비디어 제어 및 위치 정보 서비스, 웹 워커
1. 오디오/비디오 제어
* <audio>와 <video> 태그
예제 13-1. 오디오와 비디오를 가진 웹 페이지
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>오디오와 비디오 내장 페이지</title></head> <body> <h3>오디오와 비디오 내장하기</h3> <hr> <audio id="audio" src="media/EmbraceableYou.mp3" autoplay loop controls> 웹 브라우저가 audio 태그를 지원하지 않습니다. </audio> <hr> <video id="video" width="300" height="200" autoplay controls> <source src="media/bear.mp4" type="video/mp4"> 웹 브라우저가 video 태그를 지원하지 않습니다. </video> </body> </html> | cs |
* 자바스크립트로 오디오 제어
- 오디오 DOM 객체 알아내기
1 2 | <audio id="audio" src="media/EmbraceableYou.mp3" autoplay loop controls> </audio> | cs |
audio DOM 객체를 알아낸다
1 | var audio = document.getElementById("audio"); // id="audio"인 <audio> 알아내기 | cs |
- 오디오 제어
웹 페이지에서 컨트롤 버튼을 직접 클릭하여 오디오를 제어할 수 있지만, 다음과 같이 자바스크립트 코드로 오디오를 제어할 수 있다.
1 2 | audio.play(); // 재생 audio.pause(); // 일시 중지 | cs |
재생 중에 play() 메소드를 호출하면 현재 재생 위치에서 계속 재생한다.
만일 처음부터 재생하려면, 다음과 같이 load()를 호출한 후 play()를 호출해야 한다.
1 2 | audio.load(); // src에 지정된 오디오 데이터 로드 audio.play(); // 재생 | cs |
- 오디오 음량 제어와 음소거
음량은 0.0(들리지 않음) ~ 1.0(최대치) 사이의 실수 값으로서, volume 프로퍼티로 조절한다.
muted 프로퍼티로는 소리를 소거할 수 있다.
1 2 | audio.volume += 0.1; // 음량 0.1 증가 audio.muted = true; // 음소거. 음량(volume) | cs |
* audio/video DOM 객체의 공통 프로퍼티 일부
src // 미디어 소스 URL 문자열. 자바스크립트로 src를 변경하면 새로운 미디어 재생 가능
currenTime // 현재 재생 위치로서 초 단위의 실수. 재생 위치 변경 가능
duration // 미디어의 전체 길이로 초 단위의 실수
paused // 재생이 중단되었으면 true, 재생 중이면 false
ended // 재생이 완료되었으면 true, 아니면 false
autoplay // 자동 재생 상태를 나타내는 true/false
loop // 반복 재생 여부를 나타내는 true/false
controls // 컨트롤 출력 여부를 나타내는 true/false
volume // 현재 음량 값을 나타내는 0.0~1.0 사이의 실수
muted // 음소거 상태를 나타내는 true/false
* audio/video DOM 객체의 공통 메소드
load() // 재생을 중단하고 src에 지정된 미디어 다시 로드
play() // 미디어 재생. 현재 재생 위치에서 재생 시작
pause() // 미디어 일시 중지
예제 13-2. 자바스크립트로 오디오 제어기 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트로 오디오 제어</title></head> <body> <h3>자바스크립트로 오디오 제어</h3> <hr> <audio id="audio" src="media/EmbraceableYou.mp3"></audio> <div id="msg">오디오 제어 메시지 출력</div> <button id="play" onclick="control(event)">play</button> <button id="pause" onclick="control(event)">pause</button> <button id="replay" onclick="control(event)">replay</button> <button id="vol-" onclick="control(event)">vol-</button> <button id="vol+" onclick="control(event)">vol+</button> <button id="mute on/off" onclick="control(event)">mute on/off</button> <script> var div = document.getElementById("msg"); var audio = document.getElementById("audio"); function control(e) { var id = e.target.id; if(id == "play") { // play 버튼 audio.play(); // 재생 div.innerHTML = audio.src + "재생합니다."; } else if(id == "pause") { // pause 버튼 audio.pause(); // 일시 중지 div.innerHTML = "일시중지되었습니다."; } else if(id == "replay") { // replay 버튼 audio.load(); // src에 지정된 미디어 다시 로딩 audio.play(); // 처음부터 다시 재생 div.innerHTML = audio.src + "를 처음부터 재생합니다."; } else if(id == "vol-") { // vol- 버튼 audio.volume -= 0.1; // 음량 0.1 감소 if(audio.volume < 0.1) audio.volume = 0; div.innerHTML = "음량 0.1 감소." + "현재 " + audio.volume; } else if(id == "vol+") { // vol+ 버튼 audio.volume += 0.1; // 음량 0.1 증가 if(audio.volume > 0.9) audio.volume = 1.0; div.innerHTML = "음량 0.1 증가." + "현재 " + audio.volume; } else if(id == "mute on/off") { // mute on/off 버튼 audio.muted = !audio.muted; // 음소거 토글 if(audio.muted) div.innerHTML = "음소거"; else div.innerHTML = "음소거 해제"; } } </script></body></html> | cs |
* 비디오 제어
<video> 태그에 의해 생선된 video DOM 객체는 공통 메소드 외에 몇 개의 메소드를 더 가진다.
* video DOM 객체의 추가적인 프로퍼티
width // video 객체가 브라우저에서 차지하는 폭. 픽셀 값
height // video 객체가 브라우저에서 차지하는 높이. 픽셀 값
videoWidth // 비디오 미디어의 픽셀 폭
videoHeight // 비디오 미디어의 픽셀 높이
poster // 비디오 파일이 없을 때 대신 출력할 이미지 파일의 주소 문자열
- 비디오 DOM 객체 알아내기
1 2 3 | <video id="video" width="320" height="240" autoplay controls> ... </video> | cs |
video DOM 객체를 알아낸다
1 | var video = document.getElementById("video"); // id="video"인 <video> 알아내기 | cs |
- width, height와 videoWidth, videoHeight
videoWidth, videoHeight는 비디오의 화면 해상도를 나타낸다
- loadedmetadata 이벤트
실제 크기(해상도)는 얼마일까? 이 크기를 알 수 있다면 <video> 태그를 출력할 크기를 정확히 조절할 수 있다.
비디오 파일의 헤드 부분(메타 데이터)에 이 정보가 들어 있다.
<video> 태그의 src 속성에 지정된 비디오 파일이 읽혀지면, <video> 태그는 loadedmetadata 이벤트를 받는다.
그러므로 onloadedmetadata 이벤트 리스너를 다음과 같이 작성하여 현재 로드된 비디오의 해상도를 알아낼 수 있다.
1 2 3 4 | video.onloadedmetadata = function f(e) { alert(video.videoWidth + "," + video.videoHeight); } | cs |
예제 13-3. 비디오를 원본 크기로 재생
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>원본 크기로 비디오 재생</title></head> <body> <h3>원본 크기로 비디오 재생</h3> <hr> <video id="video" width="0" height="0" controls autoplay> <source src="media/bear.mp4" type="video/mp4"> 웹 브라우저가 video 태그를 지원하지 않습니다. </video> <script> var video = document.getElementById("video"); video.onloadedmetadata = function f(e) { alert(video.videoWidth + "x" + video.videoHeight); video.width = video.videoWidth; video.height = video.videoHeight; } </script> </body> </html> | cs |
- 오디오와 비디오의 onended 리스너
ended 이벤트는 오디오나 비디오의 재생이 완료되었을 때 발생하는 이벤트이며, audio나 video 객체에게 전달된다.
다음은 audio 객체에 onended 리스너를 등록하는 코드이다.
1 2 3 4 5 6 7 8 9 | <audio id="audio" src="media/EmbraceableYou.mp3" autoplay controls></audio> <script> var audio = document.getElementById("audio"); audio.onended = function (e) { ... // ended 이벤트 처리 코드 } </script> | cs |
1 | <audio src="..." loop></audio> // loop 속성이 있으면 ended 이벤트 발생하지 않음 | cs |
예제 13-4. 오디오 재생이 끝나면 웹 페이지를 노란색으로 변경
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>오디오 재생 종료 ended 이벤트 받기</title></head> <body> <h3>오디오 연주가 끝나면 배경이 노란색으로 바뀝니다.</h3> <hr> <audio id="audio" src="media/EmbraceableYou.mp3" autoplay controls></audio> <script> var audio = document.getElementById("audio"); audio.onended = function (e) { document.body.style.backgroundColor="yellow"; } </script> </body> </html> | cs |
* 미디오 소스 변경/미디어 로드
현재 재생 중인 미디어를 바꾸고자 하면 다음 코드가 순서대로 필요하다.
load()는 생략해도 된다. play()가 내부적으로 로딩을 수행하기 때문이다
1 2 3 | audio.src = "media/Aegukga.mp3"; // 새로운 미디어 지정 audio.load(); // src에 지정된 미디어 새로 로딩 (생략가능 -> play()가 내부적으로 로딩을 수행하기 때문이다) audio.play(); | cs |