MP3上传前的预览和播放时长的获取

19th of October 2017 Javascript JS 3519

有的时候上传mp3需要获取mp3的时长，使用php也可以读取但是得读到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;
        }
		
		<!--利用预加载获取时长参考方法-->
		function zhelsif(file,objUrl) {

			var video = $('#myVideo');
			video.attr("src", objUrl);

			video.on('loadedmetadata', function () {
				setTimeout(startBuffer, 150);
			});

			var startBuffer = function () {
				var currentBuffer = parseInt(video[0].buffered.end(0));//加载时间
				var maxduration = Math.floor(video[0].duration);//总时间
				var perc = 100  currentBuffer / maxduration;
				if(perc > 100){perc = 100;}
				$('#i_'+file.id).html('获取时长：'+Math.floor(perc)+'%');
				if (currentBuffer < maxduration) {//加载时间 小于总时间，接着加载
					setTimeout(startBuffer, 200);
				} else {
					//alert(maxduration);
					$("#resource").val(maxduration);
					$('#i_'+file.id).html('时长：'+maxduration+'秒');
				}
			};

}
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>

如果你打印一下files[0]这个对象会得到以下内容：

{name:"001.jpg",lastModified:1469598644956,lastModifiedDate:{},webkitRelativePath:"",slice:function slice() {
    [native code]
},size:432514,type:"image/jpeg"}

获取到的blob:

"blob:http://127.0.0.1/a47d4d0b-520f-4a4e-93ec-fd6f2b72b806"

Label

Hot