HTML5 Audio 정리

발생일: 2013.03.06

키워드: Audio, 오디오

문제:
예전에 오디오 라이브러리를 만들면서 HTML5 Audio에 대해 리서치했던 내용이다.

정리한 지 좀 된 내용이긴 하지만, 노트를 정리하다 발견해서 옮겨둔다. :)

해결책:

- 지원 범위

http://caniuse.com/#search=Audio

- 오디오 태그는 아래와 같이 사용한다.

<audio>

  <!-- 파이어폭스와 크롬을 위한 WebM 포맷 -->

  <source src="foo" type='video/webm; codecs="vp8, vorbis"'>

  <!-- IE와 사파리를 위한 H.264 포맷 -->

  <source src="bar" type='video/mp4; codecs="av1.42E01E, mp4a.40.2"'>

</audio>

- 음원을 불러와 재생한다.

new Audio("chime.wav").play();

- 재생할 수 있는가?

canPlayType(타입)

예) audio.canPlayType('audio/wav');

재생이 가능하면, "maybe" 또는 "probably"를 반환한다.

재생할 수 없으면 빈 문자열을 반환한다.

문자열을 리턴하는 것은, 근본적으로 오디오와 비디오 코덱이 복잡해서 플레이어가 직접 재생해보지 않고서는,

특정 미디어 타입이 '재생 가능할 것이다' 이상으로는 확실할 수 없기 때문이다.

- 로딩

오디오 객체에 src 프로퍼티를 설정하면, 미디어를 불러오는 과장이 시작된다.

몇 가지 다른 미디어가 로딩 또는 재생 중일 때 src를 설정하면, 이전 미디어의 로딩이나 재생을 중단시킬 것이다.(?)

미디어 문서에 <source> 요소를 추가하는 경우, 언제 요소를 삽입했는지 명확하지 않으므로,

명시적으로 load()를 호출해야 데이터를 로드한다.

- 재생 위치

currentTime 속성으로 미디어의 재생 위치를 설정할 수 있다. 초단위로 지정한다.

initialTime 과 duration 프로퍼티는 currentTime 을 위한 유효범위 값을 제공한다.

- 볼륨

0과 1 사이.

muted 를 true 로 설정하면, 음소거 할 수 있고 false 로 지정하면 기존 음량으로 다시 재생한다.

- 재생 속도

playbackRate로 미디어의 재생 속도를 지정할 수 있다.

1.0이 기본값이다.

음수를 준다고해서 거꾸로 재생되지는 않는다. (현재 버전, 확인 필요함)

- 컨트롤러

controls를 true/false로 지정함으로써 컨트롤러의 노출 여부를 설정할 수 있다.

- 반복

loop 속성을 주면 반복 재생한다.

- 미리 로드하기

preload 속성은 재생하기 전에 미리 불러올 것인지, 불러오려면 얼마나 많이 불러올 것인지 결정한다.

  none : 미리 불러오지 않는다.

  metadata : 재생 시간, 비트레이트, 프레임 크기 같은 메타데이터가 로드되어야 한다. (미디어 자체는 아니다)

  auto : 적절한 크기의 미디어를 미리 불러들인다.

  속성을 지정하지 않으면 대체로 메타 데이터를 로드한다.

  

- 자동 재생

autoplay 속성을 true로 설정하면, 미디어가 '충분히 다운로드 되었을 때' 자동으로 재생한다.

이 값이 true 이면, 미디어 데이터를 브라우저가 미리 불러와야 함을 암시한다.

- 상태

paused 속성: true|false 일시 정지 여부

seeking 속성: true|false 새로운 재생 위치로 건너뛰면 변경된다.

ended 속성: true|false 플레이어가 미디어의 마지막에 도달하여 재생이 중단되면 true로 설정됨

                   loop이 true이면, ended는 절대로 true가 되지 않는다.

duration 속성: 미디어의 재생 시간을 초 단위로 나타낸다.

                    미디어의 메타데이터가 로드되기 전이라면 NaN을 반환한다.

                    라디오와 같이 재생 시간이 일정하지 않은 스트리밍 미디어라면, Infinity 를 반환한다.

initialTime 속성: 미디어의 시작 시간을 초 단위로 나타낸다.

                    재생 시간이 정해진 미디어 클립인 경우 보통 0.

played, buffered, seekable 은 모두 TimeRanges 객체이다. 

해당 범위를 숫자로 나타내는 length,

시작과 종료 시간을 초 단위로 반환하는 start(), end() 메서드가 있다.

played : 재생된 범위

buffered : 버퍼링된 영역

seekable : 탐색 가능한 영역

- 저수준 상태

readyState, networkState, error 프로퍼티

미디어 요소에 대한 자세한 저수준 상태를 제공한다.

각 프로퍼티는 수치 값이 존재하며, 개별 수치 값에 대해 정의된 상수가 있다.

readyState : 미디어 데이터가 얼마나 로드되었는지를 나타냄,

  즉 문서 요소가 데이터를 재생할 준비가 되었는지를 알 수 있음. 

상수  |  값  |  설명

HAVE_NOTHING  0

  미디어 데이터 또는 메타 데이터가 전혀 로드되지 않음

HAVE_METADATA  1

  메타데이터는 로드되었지만, 현재 재생 위치에 대한 데이터는 로드되지 않음

  즉, 미디어의 재생 시간이나 영상의 해상도를 알아낼 수 있으며,    

  currentTime 프로퍼티를 설정해 탐색할 수 있지만,

  브라우저가 currentTime 위치에서 재생할 수는 없음

HAVE_CURRENT_DATA  2  

  currentTime에 대한 미디어 데이터가 로드되었지만, 미디어를 재생하기 위한 충분한 데이터는 아직 로드되지 않음.

  비디오라면, 현재 프레임이 로드되었지만, 다음 프레임은 로드되지 않은 상태.

  이 상태는 소리나 영상의 마지막에도 발생한다. (?)

HAVE_FUTURE_DATA  3

  재생을 시작하기에 미디어 데이터가 충분히 로드되었지만, 끝가지 재생하기에는 충분하지 않음.

  더 많은 데이터를 다운로드 하기 위해 일시 정지해야 하는 상태임

HAVE_ENOUGH_DATA  4

  일시 정지하지 않고도 브라우저가 미디어를 끝까지 재생할 수 있을 정도로 충분한 미디어 데이터가 로드됨

networkState : 미디어 문서 요소가 네트워크를 사용 중인지, 또는 왜 사용하지 않는지를 나타냄

NETWORK_EMPTY  0

  문서 요소는 아직 네트워크를 사용하지 않은 상태. 예를 들면, src 속성을 설정하기 전인 경우

NETWORK_IDLE  1

  문서 요소가 현재 네트워크 데이터를 로드하고 있지 않은 상태

  해당 자원을 다 불러왔거나 필요한 데이터가 모두 버퍼링된 상태.

  또는, preload 가 'none'으로 설정돼서 아직 미디어를 불러오거나 재생할 지 여부를 지시받지 않은 상태

NETWORK_LOADING  2

  문서 요소는 현재 네트워크를 사용해 미디어 데이터를 불러오고 있음

NETWORK_NO_SOURCE  3

  문서 요소가 재생 중임

error : 미디어를 불러오거나 재생 중에 오류가 발생하면, error 프로퍼티가 설정된다.

  발생한 오류가 없다면 error 프로퍼티는 null 이다.

MEDIA_ERR_ABORTED  1

  사용자가 미디어 로딩 중단을 요청함

MEDIA_ERR_NETWORK  2

  미디어는 올바른 형식이지만, 네트워크 오류가 발생하여 로드되지 않음.

MEDIA_ERR_DECODE  3

  미디어는 올바른 형식이지만, 인코딩 오류가 발생해 디코딩되거나 재생되지 않음

MEDIA_ERR_SRC_NOT_SUPPORTED  4

  src 속성으로 지정된 미디어는 브라우저에서 재생할 수 있는 형식이 아님

- 이벤트

이벤트 핸들러는 문서 요소의 addEventListener() 메서드를 사용해 등록할 수 있음

loadstart : 미디어 데이터 요청이 시작됨. networkState는 NETWORK_LOADING 임

progress : 네트워크로 미디어 데이터를 불러오는 중. networkState는 NETWORK_LOADING

                    일반적으로 초당 2번에서 8번 발생함

loadedmetadata : 미디어 메타 데이터가 로드되었음. 미디어의 재생 시간과 해상도 등의 정보가 준비됨

readyState : 프로퍼티가 처음으로 HAVE_METADATA 로 변경됨

loadeddata : 최초로 현재 재생 위치에 대한 데이터가 로드됨. readyState 는 HAVE_CURRENT_DATA 로 변경됨

canplay : 미디어 재생을 시작할 수 있는 충분한 데이터가 로드됨.

               추가적인 버퍼링 데이터가 요구될 수 있음.

               readyState는 HAVE_FUTURE_DATA 임

canplaythrough : 추가적인 데이터를 버퍼링하기 위해 재생을 일시정지 시키지 않고도 전체 미디어를 재생할 수 있을 만큼 충분한 데이터가 로드됨. readyState 는 HAVE_ENOUGH_DATA 임

suspend : 문서 요소에 충분한 데이터가 버퍼링되었고, 일시적으로 다운로드가 중단뒴. networkState 는 NETWORK_IDLE

stalled : 문서 요소가 데이터 로드를 시도하고 있지만, 로드된 데이터가 없음.

          networkState는 여전히 NETWORK_LOADING 으로 남음

play : play() 메서드가 호출되었거나, auto play 속성으로 같은 동작을 수행함.

          데이터가 충분히 로드되었다면, 이 이벤트 뒤에 playing 이벤트가 발생함.

          그렇지 않다면 waiting 이벤트가 발생함.

playing : 미디어 재생을 시작한 상태

timeupdate : currentTime 프로퍼티가 변경될 때마다 일어남.

          정상적으로는 재생되는 중에는 시스템 부하 또는 이벤트 핸들러 수행 완료 시점에 따라 초당 4~60번 정도 발생함.

pause : pause() 메서드가 호출되었고 재생이 일시 정지됨

seeking : 스크립트 또는 사용자가 미디어의 재생 위치를 버퍼링 되지 않은 부분으로 건너뛰었음.

          이에 따라 데이터를 로드하는 동안 재생이 중단되었음을 나타냄.

          seeking 프로퍼티는 true가 됨.

seeked : seeking 프로퍼티가 false 값으로 되돌아옴.

ended : 미디어의 마지막 위치에 도달해서 재생이 중단됨. loop 이 true인 경우 발생하지 않음.

durationchange : duration 프로퍼티가 변경되었음.

volumechange : volume 또는  muted 프로퍼티가 변경됨

ratechange : playbackRate 또는 defaultPlaybackRate가 변경됨

abort : 문서 요소의 데이터 로딩이 중단됨. 일반적으로 사용자 요청에 의해 일어남.

          error.code 는 MEDIA_ERR_ABORTED 임

error : 데이터 로딩이 네트워크가 그 밖의 오류로 인해 방해받음. error 코드는 MEDIA_ERR_ABORTED 이외의 값임

emptied : 오류가 발생하거나 abort 메서드에 의해 networkState가 NETWORK_EMPTY 상태로 돌아옴