Trang này được dịch bởi Cloud Translation API.

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

Ernest Delgado

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 sẽ tải nội dung 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>

Bước 2: Thêm tệp tham chiếu nguồn

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ẽ chuyển sang định dạng tiếp theo, v.v.

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

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

Để an toàn, chúng ta cần thêm phương thức 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 mà 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 ta có thể chỉ có tệp 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>

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

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

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

Bạn không thể tuỳ chỉnh các chế độ điều khiển này (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ợ là gì, nên chúng ta cần xử lý chế độ hiển thị của các chế độ điều khiển đó bằng điều kiện mà chúng ta đã tạo trước đó.

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

Ngoài ra, bạn có thể tạo trình phát của riêng mình bằng JavaScript và 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>