解决 Audio 元素 currentTime 属性不准确的问题

之前的 KK Player 有一个问题,就是在 Internet Explorer / Microsoft Edge 下如果拖动进度条播放时间会很诡异。
日前又发现 Firefox 下也有问题,点击跳转到 2 分钟,虽然显示是到了,但是实际上只有 1 分 50 秒多的样子

这个问题其实很早就知道了,只是当时以为是微软的 bug,然后加上 IE 用户不算多,就暂时放置了。

这个问题怎么看怎么像浏览器的问题,于是准备到 stackoverflow 提问的,偶然看到系统推荐的一条类似问题

大致解释下,MP3 是有损压缩格式,浏览器没办法根据时间找到对应的文件流位置(然而并不知道 Chrome 是怎么做到的),所以会出现如此鬼畜的时间。
解决办法只有换用 OGG 格式的无损音频

然而这下问题更大了,IE / Edge 压根不支持这格式… 可以点击这里查看 OGG 的浏览器兼容情况

根据浏览器兼容性报告,似乎只有 MP3 格式兼容性最好…
直到后来找到了 AAC 格式,兼容性报告在这里
而且 ACC 格式的 currentTime 也没有问题

于是目前就先用 ACC 格式存放歌曲,待浏览器兼容性改善再考虑用 OGG

标签: HTML5


已有 7 条评论
  1. 噫来看下又重写过的播放器。。。bug 还是在。。。b = ee() ? n : r.body, 改成 b = ee() ? n : r.documentElement,。。。不然菜单有可能超到屏幕外

    1. 还有一个问题啊。。你这样改了以后歌词原有时间戳不会都失效了嘛

      1. 因为是 PHP 解析的,所以直接清除缓存就完事了

    2. 然而还在改写中,目前没遇到超出屏幕的情况

  2. 测试播放器 , 发现某 mp3 的 duration 居然有 700 秒 , 折合 11 分钟 , 当时就 woc 了 . 而且 Firefox 提示文件损坏 w

    1. 我也是有人反馈 Edge 的 bug 才发现这个坑的

  3. 居然还有这问题.

添加新评论