音频持续时间未定义

时间:2015-12-09 13:16:51

标签: jquery

你知道为什么音频持续时间未定义吗?

这是代码:

<div class="drag">
  drag
  <audio id="audio" src="www.freesfx.co.uk/rx2/mp3s/11/12840_1448729631.mp3"></audio>
</div>

<div class="drop">drop</div>

$(function() {   
  $(".drag").draggable({
    revert: 'invalid'
  });
  $(".drop").droppable({
    drop: function(event, ui){
      var audlen = $('#audio').duration;
      alert(audlen);
      $(ui.draggable).css({width:audlen + 'px'});
    }
  });
});

integer

1 个答案:

答案 0 :(得分:1)

您没有正确设置视频的src。您需要添加<source>标记,以便正确链接您的文件。这嵌套在<audio>标记内。

您还应该指定一个type属性,这不是必要的,但这是一种良好的做法。

<div class="drag">
  drag
  <audio id="audio" type="audio/mp3">
        <source src="http://www.freesfx.co.uk/rx2/mp3s/11/12840_1448729631.mp3">
  </audio>
</div>

<div class="drop">drop</div>

此外,您可以通过getElementById访问div以使其正常工作。

$(function() {   
  $(".drag").draggable({
    revert: 'invalid'
  });
  $(".drop").droppable({
    drop: function(event, ui){

       var audlen = document.getElementById("audio");
       alert(audlen.duration);

      $(ui.draggable).css({width:audlen + 'px'});
    }
  });
});

因此,将drag div拖入drop div将返回 12.199184

编辑:请参阅JSFiddle以获取有效的演示https://jsfiddle.net/ghxsnr91/