Wah saya baru inget punya janji untuk bahas tentang HTML 5 maaf ya , sekarang saya coba mulai dasar – dasar penggunaan tag HTML 5 itu sendiri.  Kali kita mulai bahas tentang tag
<audio></audio> Seperti yang di bahas pada artikel saya yang sebelumnya tentang apa saja yang perlu di ketahui pada HTML 5 saya sudah menjelaskan prinsip dasar dari HTML 5 dan bagaimana penggunaannya, kali ini kita akan bahas langsung sambil praktek jadi bisa lebih jelas .
Bagi kebanyakan coder masih agak ragu dalam penggunaan HTML 5 terutama untuk fungsi – fungsi baru, yang dikhawatirkan adalah tag – tag ini tidak dapat berjalan sebagaimana mestinya pada browser – browser tertentu terutama browser kawakan , kali ini saya akan berikan semacam sebuah fallback yang akan di panggil ketika tag <audio> tidak dapat di jalankan oleh browser.

Langkah 1: Masukan Flash Object Anda Ke Dalam Tag Audio

<audio>

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

Pada contoh tag itu bisa anda lihat ada tag <object> yang biasa di gunakan untuk menampilkan player audio atau flash di website, bungkus tag tersebut kedalam tag <audio> terlebih dahulu.

Langkah 2: Tambahkan Tag <source> Pada Tag <audio>

Anda dapat memasukan berpuluh-puluh baris tag <source> di dalam tag <audio> anda, karena secara prinsip dasarnya browser akan mengeksekusi tag selanjutnya jika format file pada tag <source> sebelumnya tidak di dukung oleh browser tersebut.

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

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

Langkah 3: Tambahkan Fallback Ke Flash

Agar lebih aman, kita harus menambahkan fallback ke Flash audio player, ini untuk jaga – jaga kalau browser tidak mendukung format manapun yang anda berikan. Sebagai contoh, Firefox 3.5 hanya mendukung <audio> dengan format “Ogg”, tapi mungkin anda hanya memiliki format “mp3″.
Catatan: Ada banyak tools dan converter online yang dapat anda gunakan untuk merubah format mp3 ke ogg atau sebaliknya, anda bisa mencarinya melalui google.

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

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

Agar lebih mudah saya menggunakan librari SWFObject untuk memasukan Flash Player melalui Javascript. Untuk mengambil librarinya anda bisa menggunakan Google AJAX Libraries API dengan cara memasukan baris ini di header website anda.

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

Langkah 4: Tambahkan Kontrol Default Untuk Menampilkan Flash Player

<audio id="audio_with_controls" controls>
  <source src="test.mp3" type="audio/mpeg" />

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

Atau anda bisa membuat player anda sendiri dengan menggunakan CSS dan Javascript seperti ini :

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

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