使用 html5 音频对象

Question

已修改以包含仍然存在问题的最少代码。我的代码：

 <div class="caster-player">
    <div class="caster-player__controls">
      <progress class="caster-player__progress" value="0"></progress>
      <span class="caster-player__currenttime caster-player__time">00:00:00</span>
      <span class="caster-player__duration caster-player__time">00:00:00</span>
  </div>
  <audio src="https://bythecoverpodcast.com/wp-content/uploads/2017/12/01-No-Money.mp3"></audio>
<p>"No Money" from No Money by Galantis.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $('document').ready(function() {
    var audioObj = $('audio');
    var audioEl = audioObj[0];
    var progress = $('.caster-player__progress');
    var duration = $('.caster-player__duration');

    function toHHMMSS( totalsecs ) {
        var sec_num = parseInt(totalsecs, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10) {hours   = "0"+hours; }
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}

        var time = hours+':'+minutes+':'+seconds;
        return time;
    }    

    console.log(audioObj)
    audioObj.on('loadedmetadata', function(){
        progress.attr('max', Math.floor(audioEl.duration));
        duration.text(toHHMMSS(audioEl.duration));
      });

})
</script>

我正在尝试为播客网站创建一个简单的音频播放器。在大多数情况下，除了一件事之外，我的一切都按照我想要的方式工作。我正在使用进度元素来显示音轨的进度，需要动态设置 max 属性才能使其正常工作。

根据关于音频元素的文档，有几个事件可用于为此目的创建事件处理程序。 https://www.w3schools.com/jsref/event_onloadedmetadata.asp 基于此，看起来 onLoadedMetaData 是票证，但以下事件处理程序从未运行

audioObj.on('loadedmetadata', function(){
  progress.attr('max', Math.floor(audioEl.duration));
  duration.text(toHHMMSS(audioEl.duration));
});

我有一种感觉，因为我将这段代码包裹在 'document.ready()' 中，所以我实际上错过了这个事件。总的来说，我很困惑，非常感谢您就此主题提供的任何指导！

提前致谢！乔斯洛特

Answer 1

你说得对 -- 'loadedmetadata' 就是你想要的。但是您的 audioEl.on() 处理程序不是运行因为 audioEl 不再包装为 jQuery 对象：

// Creates an <audio> DIV and wraps it as a jQuery object.
var audioObj = $('audio');

// Takes the inner <audio> element out of the jQuery object.
var audioEl = audioObj[0];

一旦它脱离 jQuery 包装（您这样做是为了可以直接在 .play() 处获得），它就不再具有方便的 jQuery 事件处理方法，如 .on().

我刚刚使用了原始的 audioObj（已经包装）并且它与 'loadedmetadata':

一起使用效果很好

// Set the Max Attribute of the progress bar
audioObj.on('loadedmetadata', function(){
    progress.attr('max', Math.floor(audioEl.duration));
    duration.text(toHHMMSS(audioEl.duration));
});

请注意： 为了避免我自己这样的混淆，我（以及我认识和共事的许多其他人）喜欢为 [=40= 添加变量名前缀]-用 $ 包裹的元素表示 var 已经被包裹：

var $audioEl = $('audio');
var audioEl = $audioEl[0];

这样以后就很清楚了。

使用 html5 音频对象

Working with the html5 audio object

html

javascript

jquery

html5-audio