Panduan cepat untuk menerapkan tag audio HTML5

Ernest Delgado
Ernest Delgado
X

Langkah 1: Gabungkan objek Flash dengan tag audio

Browser yang tidak mengenali tag audio akan memuat konten 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>

Langkah 2: Tambahkan referensi sumber

Kita bisa menambahkan baris dan format "sumber" sebanyak yang kita inginkan. Jika browser tidak mendukung satu format tertentu, browser akan melakukan fallback ke format berikutnya dan seterusnya.

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

Langkah 3: Tambahkan penggantian ke Flash

Agar aman, kita perlu menambahkan penggantian ke pemutar audio Flash, jika browser tidak mendukung format yang ditentukan. Misalnya, Firefox 3.5 hanya mendukung tag audio dengan format Ogg, tetapi kami mungkin hanya memiliki file 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>

Untuk lebih mudah, kami menggunakan library SWFObject untuk menyisipkan pemutar Flash melalui JavaScript. Untuk menyertakan library, Anda cukup menggunakan Google AJAX Libraries API dengan menyisipkan dua baris ini di header Anda:

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

Langkah 4: Tambahkan kontrol default untuk menampilkan pemutar

Kontrol ini tidak dapat disesuaikan (lihat contoh di bagian akhir). Karena kontrol default ini akan muncul, terlepas dari format yang didukung, kita perlu menangani visibilitasnya dengan kondisional yang telah dibuat sebelumnya.

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

Atau, Anda dapat membuat pemutar sendiri menggunakan JavaScript dan CSS.

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