คู่มือฉบับย่อเพื่อติดตั้งแท็กเสียง HTML5

Ernest Delgado
Ernest Delgado
X

ขั้นตอนที่ 1: ตัดออบเจ็กต์ Flash ด้วยแท็กเสียง

เบราว์เซอร์ที่ไม่รู้จักแท็กเสียงจะโหลดเนื้อหา Flash แทน

 <audio>
    <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>

ขั้นตอนที่ 2: เพิ่มข้อมูลอ้างอิงแหล่งที่มา

เราเพิ่มบรรทัด "แหล่งที่มา" และรูปแบบได้มากเท่าที่ต้องการ หากเบราว์เซอร์ไม่รองรับรูปแบบใดรูปแบบหนึ่ง ระบบจะใช้รูปแบบถัดไปและดำเนินการต่อ

 <audio>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" />

  <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>

ขั้นตอนที่ 3: เพิ่มทางเลือกสําหรับ Flash

เพื่อความแน่ใจ เราจำเป็นต้องเพิ่มทางเลือกเป็นโปรแกรมเล่นเสียง Flash ในกรณีที่เบราว์เซอร์ไม่รองรับรูปแบบใดก็ตามที่เราระบุ เช่น Firefox 3.5 รองรับเฉพาะแท็กเสียงที่มีรูปแบบ Ogg แต่เราอาจมีเฉพาะไฟล์ mp3 เท่านั้น

<audio>
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  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>

เราใช้ไลบรารี SWFObject เพื่อแทรกโปรแกรมเล่น Flash ผ่าน JavaScript เพื่อให้ง่ายขึ้น หากต้องการรวมไลบรารี คุณก็ใช้ Google AJAX Libraries API ได้โดยแทรก 2 บรรทัดนี้ในส่วนหัว

<script src="http://www.google.com/jsapi" type="application/javascript"></script>
<script type="application/javascript">google.load("swfobject", "2.2");</script>

ขั้นตอนที่ 4: เพิ่มตัวควบคุมเริ่มต้นเพื่อแสดงวิดีโอเพลเยอร์

การควบคุมเหล่านี้ไม่สามารถปรับแต่งได้ (ดูตัวอย่างที่ท้ายบท) เนื่องจากตัวควบคุมเริ่มต้นเหล่านี้จะปรากฏขึ้นไม่ว่าจะรองรับรูปแบบใดก็ตาม เราจึงต้องจัดการการแสดงผลด้วยเงื่อนไขที่เราสร้างขึ้นก่อนหน้านี้

<audio id="audio_with_controls" controls="controls">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script line here ...
      document.getElementsById('audio_with_controls').style.display = 'none';
    }
  }
</script>

หรือจะสร้างเพลเยอร์ของคุณเองโดยใช้ JavaScript และ CSS ก็ได้

<audio id="audio">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<div id="player" style="display: none">
  <button onClick="document.getElementById('audio').play()">Play</button>
  <button onClick="document.getElementById('audio').pause()">Pause</button>
</div>

<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script lines here ...
    } else { // HTML5 audio + mp3 support
      document.getElementById('player').style.display = 'block';
    }
  }
</script>