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

เออร์เนสต์ เดลกาโด
Ernest Delgado
X

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

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

<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

เพื่อความปลอดภัย เราจำเป็นต้องเพิ่มรายการสำรองไปยังโปรแกรมเล่นเสียง 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 ในการแทรก Flash Player ผ่าน JavaScript เพื่อให้ง่ายขึ้น หากต้องการรวมไลบรารี คุณสามารถใช้ Google AJAX Libraries API เพื่อแทรก 2 บรรทัดนี้ในส่วนหัว

<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