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

最新推荐文章于 2024-05-13 11:08:15 发布

王明远

最新推荐文章于 2024-05-13 11:08:15 发布

阅读量5.9k

点赞数

分类专栏： html5接口文章标签：预览本地音频获取音频时长

html5接口专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

王明远

关注

0
点赞
踩
3

收藏

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

"utf-8"/> "JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"> $(function () { $("#test").change(function () { var objUrl = g
复制链接

扫一扫