新手问题 [已解决] HTML5 中 audio 的 duration 无法正常使用怎么办？

chairy11 · 2014年08月22日 · 最后由 lghqwer 回复于 2018年08月02日 · 17720 次阅读

问题：

在原生 html5 的 audio 上设计 control 页面元素，别的都搞定了，缓冲进度条啊，播放进度条啊，当前播放时间啊，音量静音及恢复啊，调节音量大小啊…… 就差一个！duration 一直出不来！如图右下方的 NaN：NaN，但其实 alert 是可以出正确结果的，实在想不明白……

我想是不是没有加载完，所以无法计算 duration，但用$audio.onloadedmetadata 貌似依然得不到正确结果……

代码

HTML 相关代码 CSS 相关代码 JS 相关代码

$audio = $('#fm_audio').get(0)
$duration = $('#duration')

#把秒数转换为时间格式，如3:15
secondToTime = (second) ->
  MM = Math.floor(second / 60)
  SS = Math.floor(second % 60)
  "#{MM}:#{if SS<10 then '0'+SS else SS }"

$duration.text(secondToTime($audio.duration))

$duration.click ->
  alert(secondToTime($audio.duration))

解决方案

莫名其妙的解决了……如果有什么变化，可能是我把它放在 onloadedmetadata 里了……


#所有初始设置
$audio.onloadstart = ->
  buffer_interval = setInterval (-> setBufferProgress()),200
  clearInterval(buffer_interval) if $audio.readyState > 0


$audio.onloadedmetadata = ->
  #设置当前音量,默认0.8
  $audio.volume = 0.8
  default_volume_percentage = 100 * $audio.volume
  $current_volume.css height: default_volume_percentage + '%'
  $volume_point.css bottom: default_volume_percentage + '%'
  $duration.text(secondToTime($audio.duration))