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

最新推荐文章于 2022-01-21 09:24:31 发布

昌子玩前端

最新推荐文章于 2022-01-21 09:24:31 发布

阅读量825

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

原文出处： http://bbs.csdn.net/topics/390765871

昌子玩前端

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5实现MP3上传前的预览和播放时长的获取

$(function () { $("#test").change(function () { var objUrl = getObjectURL(this.files[0]); $("#audio").attr("src", objUrl);
复制链接

扫一扫

专栏目录