audio element - by. UXKM

audio element 설명

사운드 콘텐츠를 문서에 포함시키는 데 사용됩니다.
src 속성 또는 <source> 요소를 사용하여 표현한 하나 이상의 오디오 소스를 포함할 수 있습니다.
브라우저가 가장 적합한 것을 선택합니다. MediaStream을 사용하여 스트리밍 미디어의 대상이 될 수도 있습니다.
autoplay가 지정된 경우, preload는 무시됩니다.

CSS 기본값 :

6.6.1. audio 속성

[src] <audio src="URL">

삽입할 오디오의 URL입니다.
오디오 블록 내의 <source> 요소를 사용하여 포함할 오디오를 지정할 수 있습니다.

[autoplay] <audio autoplay>

이 속성이 지정된 경우 오디오는 전체 오디오 파일의 다운로드가 완료될 때까지 기다리지 않고 자동으로 재생을 시작합니다.
오디오(또는 오디오 트랙이 있는 비디오)를 자동으로 재생하는 사이트는 사용자에게 불편한 경험 일 수 있으므로 가능한 경우 피해야 합니다.
자동 재생 기능을 제공해야 하는 경우 자동 재생 기능을 사용하도록 설정해야 합니다(사용자가 특별히 사용하도록 설정해야 합니다).
그러나 나중에 사용자가 제어할 수 있도록 소스가 나중에 설정되는 미디어 요소를 만들 때 유용할 수 있습니다.

[controls] <audio controls>

이 속성이 있으면 브라우저는 볼륨, 탐색, 재생 일시 중지 / 다시 시작 등 오디오 재생을 제어할 수있는 컨트롤을 제공합니다.

[loop] <audio loop>

이 속성이 지정된 경우 오디오의 끝 부분에 도달하면 자동으로 시작 부분으로 되돌아갑니다.

[muted] <audio muted>

오디오가 처음에 소거 여부를 나타내는 Boolean 속성입니다. 기본값은 false 입니다.

[preload] <audio preload="none | metadata | auto">

음악을 재생하기 전에 사전 로드할 정보나 콘텐츠의 크기를 브라우저에 알려줍니다.
스펙에서는 기본값으로 metadata를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.

오디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 autoplay 속성보다 우선시 됩니다.
autoplay 속성과 preload 속성을 둘 다 설정하는 것은 스펙상 가능합니다만,
브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.

  1. none

    오디오가 사전 로드되지 않아야 함을 나타냅니다.

  2. metadata

    오디오 메타 데이터(예 : 길이)를 사전 로드합니다.

  3. auto

    사용자가 오디오 파일을 사용할 것으로 예상되지 않더라도 전체 오디오 파일을 다운로드 할 수 있음을 나타냅니다.

  4. 빈 문자열

    auto 와 동일합니다.

설정되지 않은 경우, 기본값은 브라우저 정의입니다. (즉, 각 브라우저마다 고유한 기본값이 있을 수 있습니다).
스펙에서는 metadata로 설정하도록 권고합니다.

audio element 예제

6.6.2. 오디오 코덱의 종류

  1. MP3(MPEG-1 AUDIO Layer3)

    MP3는 오디오 압축 형식으로 PCM 오디오 데이터 중에서 사람이 들을 수 없는 부분과 필요없는 부분을 버리고 인코딩하는 방식이며 1991년에 표준화되었고, 특허권이 등록되어 있습니다.

  2. AAC

    애플의 아이폰, 아이팟, 아이튠즈에서 사용되는 기본 오디오 형식으로 채널이 2개인 MP3에 비해 채널을 최대 48개까지 확장하였습니다. 1997년에 표준화 되었고 특허권이 등록되어 있습니다.

  3. Vorbis

    공개 오디오 코덱입니다. 확장자는 ogg나 oga를 사용합니다.
    Vorbis는 같은 비트 레이트의 MP3보다 음질이 좋고 AAC와는 비슷하거나 그 이상의 음질도 가능하지만 재생할 수 있는 플레이어가 적고 상대적으로 긴 인코딩 시간을 소비합니다.

6.6.3. 브라우저별 파일형식, 지원코덱

  1. 파이어폭스 : Vorbis(.ogg, .oga)
  2. 오페라 : Vorbis(.ogg, .oga)
  3. 사파리 : AAC
  4. 크롬 : Vorbis(.ogg, .oga), H.264, AAC
  5. 아이폰, 안드로이드 : AAC
  6. 익스플로러 9+ : AAC
  7. 익스플로러 8 : 지원안함

6.5.4. 자바스크립트를 통한 속성들 접근

  1. video와 같이 제어와 관련된 속성값으로

    currentTime - 현재 재생중인 시간

    defaultPlaybackRate - 기본 재생 속도 playbackRate 현재 재생 속도

    volume - 비디오의 볼륨

  2. video와 같이 위의 속성들을 바꿔줌으로써 audio의 상태들을 제어할 수 있게 됩니다.

    load() - 로드를 시작

    canPlayType(type) - ype이 재생 가능한지 여부

    play() - 비디오를 재생

    pause() - 비디오를 일시 정지

6.5.5. <video>와 <audio>의 이벤트

단순히 보여주기만 해서는 기존의 다양한 플러그인들을 대체할 수는 없을 것이라는 생각이 들기도 했을 것입니다. 따라서 위의 자바스크립트 제어 이외에도 자바스크립트로 video와 audio의 상태 변화에 대한 이벤트 또한 다양하게 UX를 증진시키는데 중요한 역할을 합니다.

  1. addEventListener의 첫 번째 인자로 들어가는 이벤트 명과 발생하는 상황에 대한 설명

    loadstart - 브라우져가 미디어를 찾기 시작할 때 발생

    progress - 브라우져가 미디어 데이터를 가져오는 중에 발생

    suspend - 브라우져가 현재 데이터를 전부 다운하지 않았는데 미디어 데이터를 가져오는 것이 멈췄을 때 발생

    abort - 브라우져가 에러가 아닌 상황에서 미디어 데이터를 가져오는 것을 멈췄을 때 발생

    error - 미디어 데이터를 가져오다가 에러가 발생했을 때 발생

    emptied - 미디어의 networkState가 NETWORK_EMPTY 상태로 들어가게 되었을 때 발생(치명적인 오류로 멈추거나, 이미 리소스 선택 알고리즘이 실행중이었는데 load() 함수가 호출되었을 때)

    play - 재생되었을 때, play() 함수가 리턴하고 나서, autoplay로 인해 재생이 시작되었을 때 호출

    pause - 미디어가 일시정지 되었을 때 발생(pause()함수가 리턴 되고나서 발생)

    loadedmetadata - 브라우져가 미디어의 길이와 넓이, 높이의 메타정보를 가져왔을 때 발생

    loadeddata - 브라우져가 현재 재생 위치에서 미디어 정보를 제공할 수 있는 상태로 준비되면 발생

    waiting - 다음 프레임이 로드되지 않아서 재생이 멈추었을 때 발생, 브라우져는 곧 프레임이 가능해질 것이라고 예상하고 있음

    playing - 재생이 시작되었을 때 발생

    canplay - 브라우져가 미디어 데이터의 재생이 가능해질 때 발생, 하지만 지금 재생을 시작하면 이후 버퍼링 속도가 느려서 다시 멈추지 않고 재생이 불가할 것이라고 측정함

    canplaythrough - 브라우저가 현재 재생을 시작하면 버퍼링 속도와 재생 속도를 고려했을 때 끝까지 멈추지 않고 재생 가능할 것이라고 측정함

    seeking seek - 동작이 길게 유지되어서 브라우져에서 이벤트가 발생할 정도가 되었을 때 발생

    seeked - seeking이 끝나면 발생

    timeupdate - 현재 재생 위치가 바뀌었을 때 발생

    ended - 미디어의 끝에 도달해서 재생이 멈추었을 때 발생

    ratechange - defaultPlaybackRate나 playbackRate의 속성이 변경되었을 때 발생

    durationchange - duration 속성이 바뀌었을 때 발생

    volumechange - volume 속성이 변하거나 muted 속성이 변했을 때 발생

  2. video와 같이 위의 속성들을 바꿔줌으로써 audio의 상태들을 제어할 수 있게 됩니다.

    load() - 로드를 시작

    canPlayType(type) - ype이 재생 가능 여부 확인

    play() - 비디오를 재생

    pause() - 비디오를 일시 정지

  3. <video> 태그 응용의 예

    html과 자바스크립트로만 구현한 예시

    <video>를 3d처럼 돌려가면서 보여주는 효과 예시
    플러그인 없이 오로지 브라우저로만 위와 같은 효과가 가능한 것입니다.
    플래시가 안 되는 모바일에서도 물론 똑같이 실행된다는 사실입니다.
    물론 이러한 것들은 오로지 <video> 요소만을 가지고 구현할 수는 없고 <canvas> 요소와 조합해서 이러한 효과들을 나타내는 것입니다.

    Getting Started with WebRTC