• • bug起因
  • 解決方法

bug起因

在專案需求中，需要在播放器的進度條部分新增標籤，標籤按照時間節點分佈，因此需要獲取整個音訊的時長audio.duration，在chrome中，可以給audio的canplay事件繫結函式獲取時長，然後呼叫渲染標籤的函式，但是在firefox中，以這種方式繫結的函式無法執行：

audio.addEventListener("canplay", function () {
    duration = audio.duration;
    showTags();
 }, false);

解決方法

在W3C的測試頁面，火狐是可以執行的，但使用斷點除錯時，無法執行到函式內部的程式碼，經過多次嘗試，在以下三種方法中，

<audio|video oncanplay="SomeJavaScriptCode">
audio|video.oncanplay=SomeJavaScriptCode;
audio|video.addEventListener("canplay", function()
  {
  //SomeJavaScriptCode
  }
);

第一種無法執行在document.ready之後定義的函式，第三種完全無法執行，只有第二種，將audio.oncanplay = showTags();可以執行。

但這種方法在chrome中，如果在函式內部獲取audio.duration，則會顯示NaN

  audio.oncanplay = showTags();
  // 其他
  audio.addEventListener("canplaythrough", function () {
    duration = audio.duration;
    // alert(duration);
    showTags();
  }, false);