前一阵子做了个移动端的mp3网站，利用html5来实现相关的一些功能，比如：MP3的预览、获取MP3的时间长短，下面我们就说说这些功能是如何实现的?
举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(function () {
$("#test").change(function () {
var objUrl = getObjectURL(this.files[0]);
$("#audio").attr("src", objUrl);
$("#audio")[0].play();
$("#audio").show();
getTime();
});
});
<!--获取mp3文件的时间 兼容浏览器-->
function getTime() {
setTimeout(function () {
var duration = $("#audio")[0].duration;
if(isNaN(duration)){
getTime();
}
else{
console.info("该歌曲的总时间为："+$("#audio")[0].duration+"秒")
}
}, 10);
}
<!--把文件转换成可读URL-->
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>以上就是我实现html5预览MP3，获得播放时长的具体实现方法，其中还专门处理了各浏览器的兼容问题，希望对大家有所帮助！
