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

nutchcake 2014-04-21 06:04:11



<!DOCTYPE html>

<html>

<head>

    <!-- @author 夏茂轩@成都信息工程学院 QQ：1034297177 -->

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

...全文

3423 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

yujieyu7 2016-04-20

打赏
举报

引用楼主 nutchcake 的回复:


<!DOCTYPE html>
<html>
<head>
    <!-- @author 夏茂轩@成都信息工程学院 QQ：1034297177 -->
    <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>

牛逼！！！

u018875539 2014-08-22

打赏
举报

引用 1 楼 xzy21com 的回复:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5预览mp3</title>
    <script>
    //jq不是做这种小事的
    window.onload=function(){
        var audio=document.getElementById("audio");
        document.getElementById("test").onchange=function(e){
            var file=e.target.files[0],src=window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
            if(/^audio/i.test(file.type)){
                audio.style.display='block';
                audio.src=src;
                audio.play();
                function g(){isNaN(audio.duration) ? requestAnimationFrame(g):console.info("该歌曲的总时间为："+audio.duration+"秒")}
                requestAnimationFrame(g);
            }else{
                audio.pause();
                audio.style.display='none';
                alert("请选择音乐文件！");
            }
        }
    }
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>

谢谢分享

nutchcake 2014-04-22

打赏
举报

太屌，昨天搞了我好久。。你为何这么叼

scscms太阳光 2014-04-22

打赏
举报

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5预览mp3</title>
    <script>
    //jq不是做这种小事的
    window.onload=function(){
        var audio=document.getElementById("audio");
        document.getElementById("test").onchange=function(e){
            var file=e.target.files[0],src=window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
            if(/^audio/i.test(file.type)){
                audio.style.display='block';
                audio.src=src;
                audio.play();
                function g(){isNaN(audio.duration) ? requestAnimationFrame(g):console.info("该歌曲的总时间为："+audio.duration+"秒")}
                requestAnimationFrame(g);
            }else{
                audio.pause();
                audio.style.display='none';
                alert("请选择音乐文件！");
            }
        }
    }
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>

nutchcake 2014-04-22

打赏
举报

引用 1 楼 xzy21com 的回复:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5预览mp3</title>
    <script>
    //jq不是做这种小事的
    window.onload=function(){
        var audio=document.getElementById("audio");
        document.getElementById("test").onchange=function(e){
            var file=e.target.files[0],src=window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
            if(/^audio/i.test(file.type)){
                audio.style.display='block';
                audio.src=src;
                audio.play();
                function g(){isNaN(audio.duration) ? requestAnimationFrame(g):console.info("该歌曲的总时间为："+audio.duration+"秒")}
                requestAnimationFrame(g);
            }else{
                audio.pause();
                audio.style.display='none';
                alert("请选择音乐文件！");
            }
        }
    }
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>

厉害！

js获取input file控件选择的图片并且立即在img标签显示出来