Hướng dẫn nhanh về cách triển khai thẻ âm thanh HTML5

Tác giả của người nổi tiếng dưới đây
Hoàng thượng Delgado
X

Bước 1: Gói đối tượng Flash bằng thẻ âm thanh

Những trình duyệt không nhận dạng được thẻ âm thanh này sẽ tải nội dung 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>

Bước 2: Thêm nguồn tham khảo

Chúng ta có thể thêm bao nhiêu dòng và định dạng "nguồn" tuỳ thích. Nếu trình duyệt không hỗ trợ một định dạng cụ thể thì trình duyệt sẽ dự phòng sang định dạng tiếp theo, v.v.

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

Bước 3: Thêm dự phòng vào Flash

Để an toàn, chúng ta cần thêm bản dự phòng vào trình phát âm thanh Flash, trong trường hợp trình duyệt không hỗ trợ bất kỳ định dạng nào chúng ta đã chỉ định. Ví dụ: Firefox 3.5 chỉ hỗ trợ thẻ âm thanh có định dạng Ogg nhưng chúng tôi có thể chỉ cung cấp tệp 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>

Để việc này được dễ dàng hơn, chúng tôi đang sử dụng thư viện SWFObject để chèn trình phát Flash qua JavaScript. Để đưa thư viện này vào, bạn chỉ cần sử dụng Google AJAX Libraries API (API Thư viện AJAX của Google) chèn hai dòng này vào tiêu đề của bạn:

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

Bước 4: Thêm các chế độ điều khiển mặc định để hiển thị trình phát

Các chế độ điều khiển này không tuỳ chỉnh được (xem ví dụ ở cuối). Vì các chế độ điều khiển mặc định này sẽ xuất hiện bất kể định dạng được hỗ trợ, nên chúng ta sẽ cần xử lý chế độ hiển thị của chế độ đó bằng điều kiện đã tạo trước đó.

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

Ngoài ra, bạn có thể tạo trình phát của riêng mình bằng JavaScript và CSS.

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