Firefox关于Audio事件的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);