jquery - 输入网址后的音频长度

Question

我创建了一个框，在其中输入音频标签的链接，然后单击“提交”后，我需要音频的长度。
但是，如果我给静态网址，那么它给出的长度就是返回，但是当我使用这种文本框方法时，它没有显示长度，请帮忙。

HTML

<input type="text" id="mp_source">
<input type="button" id="save" value="save">
<audio id="track" width="320" height="176" controls>
  <source id="sourceMp3" type="audio/mp3"/>
</audio>
<p id="time"></p>

JS

<script type="text/javascript">
$(document).ready(function(){
$("#save").click(function(){
var get_source = $("#mp_source").val();
$("#sourceMp3").attr('src',get_source);
myFunction();
});
});
</script>
<script>


function
myFunction() { 
var vid = document.getElementById("track");
var len = vid.duration/60;
var n = len.toFixed(2);
 var res = n.split(".");
 var result = res[0]+':'+res[1];
 document.getElementById("time").innerHTML = result;
} 
</script>

这是 fiddle的示例。

Answer 1

document.querySelector('button').onclick = function(){
  var url = document.querySelector('input').value;
  
  // create new audio to get the data from the file
  var audio = new Audio();
  
  // listen to the event that the broswer done to read the file 
  audio.addEventListener('loadedmetadata',   function(e) {
    
    // get the duration from the track
    var duration = e.path[0].duration;
    console.log(duration);
    document.querySelector('#result').innerHTML = duration + 's';
  });
  
  audio.src = url;
  //audio.play();
};

<input type="text" placeholder="Type url here" value="http://www.w3schools.com/html/horse.ogg" />
<button>Go</button>
<hr />
<div id="result"></div>

http://jsbin.com/xicixo