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