HTML5 오디오 태그 구현을 위한 빠른 가이드

어니스트 델가도
어니스트 델가도
X

1단계: 오디오 태그로 플래시 객체 래핑하기

오디오 태그를 인식하지 못하는 브라우저에서는 대신 플래시 콘텐츠가 로드됩니다.

<audio>
</span><span class="old">
    <object class="playerpreview" type="application/x-shockwave-flash"
            data="player_mp3_mini.swf" width="200" height="20">
      <param name="movie" value="player_mp3_mini.swf" />
      <param name="bgcolor" value="#085c68" />
      <param name="FlashVars" value="mp3=test.mp3" />
      <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
             height="20" name="movie" align=""
             type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
      </embed>
    </object>
</span><span class="new">
</audio>

2단계: 소스 참조 추가하기

'소스' 행과 형식을 원하는 만큼 추가할 수 있습니다. 브라우저가 특정 형식 하나를 지원하지 않으면 다음 형식으로 대체합니다.

<span class="old"><audio></span>
  <span class="new"><source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" /></span><span class="old">

  <object class="playerpreview" type="application/x-shockwave-flash"
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
           height="20" name="movie" align=""
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio></span>

3단계: 플래시에 대체 광고 추가

안전을 위해 브라우저에서 지정된 형식을 지원하지 않는 경우 대체 파일을 Flash 오디오 플레이어에 추가해야 합니다. 예를 들어 Firefox 3.5는 Ogg 형식의 오디오 태그만 지원하지만 mp3 파일만 사용할 수 있습니다.

<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">

<object class="playerpreview" type="application/x-shockwave-flash"
        data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
        height="20" name="movie" align=""
        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>

</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
    swfobject.embedSWF(
    "player_mp3_mini.swf",
    "player_fallback",
    "200",
    "20",
    "9.0.0",
    "",
    {"mp3":"test.mp3"},
    {"bgcolor":"#085c68"});
}
}
</script></span>

보다 쉽게 할 수 있도록 SWFObject 라이브러리를 사용하여 JavaScript를 통해 Flash 플레이어를 삽입하고 있습니다. 라이브러리를 포함하려면 Google AJAX 라이브러리 API를 사용하여 헤더에 다음 두 줄을 삽입하면 됩니다.

<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>

4단계: 기본 컨트롤을 추가하여 플레이어 표시하기

이러한 컨트롤은 맞춤설정할 수 없습니다 (마지막 예시 참고). 이러한 기본 컨트롤은 지원되는 형식과 관계없이 표시되므로 이전에 만든 조건부로 공개 상태를 처리해야 합니다.

// TODO: DevSite - Code sample removed as it used inline event handlers

또는 JavaScript와 CSS를 사용하여 자체 플레이어를 만들 수도 있습니다.

// TODO: DevSite - Code sample removed as it used inline event handlers