Firefox关于Audio事件的bug及解决方案

Posted 2022-12-07 zhu_free

• • 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。
最后的解决办法是将火狐和chrome的方法都写上以兼容不同的浏览器，，因为canplay不能绑定两个函数，所以后面用canplaythrough来代替。

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