HTML5实现MP3上传前的预览和播放时长的获取代码,Js代码库,德仔网

代码语言

代码分类

【Js】 HTML5实现MP3上传前的预览和播放时长的获取

作者: / 发布于2019/8/22/ 1069

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

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label