HTML5實現MP3上傳前的預覽和播放時長的獲取
阿新 • • 發佈：2019-01-06
原文出處：http://bbs.csdn.net/topics/390765871
<!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>