您的位置：首页 > Web前端 > HTML5

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

2017-09-04 14:40 302 查看

<!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();

            });

        });

        

        function getTime() {

            setTimeout(function () {

                var duration = $("#audio")[0].duration;

                if(isNaN(duration)){

                    getTime();

                }

                else{

                    console.info("该歌曲的总时间为："+$("#audio")[0].duration+"秒")

                }

            }, 10);

        }

        

        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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航