你知道为什么音频持续时间未定义吗?
这是代码:
<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'});
}
});
});
答案 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/