CODEWITHSUNDEEP
jquery
Gari
Gari

Reputation: 5

The audio duration is undefined

Do you know why audio duration appears undefined?

This is the code:

<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'});
    }
  });
});

https://jsfiddle.net/hfy3dwf5/5/

Upvotes: 0

Views: 217

Answers (1)

Smittey
Smittey

Reputation: 2490

You did not correctly set the src of the video correctly. You need to add a <source> tag which allows you to correctly link your file. This is nested within the <audio> tag.

You should also specify a type attribute which isn't necessary for this to work, but good practice.

<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>

Additionally, you can access the div via getElementById to make this work.

$(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'});
    }
  });
});

As a result, dragging the drag div into the drop div will return 12.199184

Edit: See the JSFiddle for a working demo https://jsfiddle.net/ghxsnr91/

Upvotes: 1

Related Questions