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

     "utf-8"/>

     "JavaScript" src="http://code.jquery.com/jquery-1.11.0.js">
       </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        $(<span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">function</span><span style="border:none;"> () {  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            $(<span class="string" style="border:none;color:#0000FF;">"#test"</span><span style="border:none;">).change(</span><span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">function</span><span style="border:none;"> () {  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">var</span><span style="border:none;"> objUrl = getObjectURL(</span><span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">this</span><span style="border:none;">.files[0]);  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                $(<span class="string" style="border:none;color:#0000FF;">"#audio"</span><span style="border:none;">).attr(</span><span class="string" style="border:none;color:#0000FF;">"src"</span><span style="border:none;">, objUrl);  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                $(<span class="string" style="border:none;color:#0000FF;">"#audio"</span><span style="border:none;">)[0].play();  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                $(<span class="string" style="border:none;color:#0000FF;">"#audio"</span><span style="border:none;">).show();  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                getTime();  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            });  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        });  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        <!--获取mp3文件的时间 兼容浏览器-->  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">function</span><span style="border:none;"> getTime() {  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            setTimeout(<span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">function</span><span style="border:none;"> () {  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">var</span><span style="border:none;"> duration = $(</span><span class="string" style="border:none;color:#0000FF;">"#audio"</span><span style="border:none;">)[0].duration;  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">if</span><span style="border:none;">(isNaN(duration)){  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                    getTime();  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                }  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">else</span><span style="border:none;">{  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                    console.info(<span class="string" style="border:none;color:#0000FF;">"该歌曲的总时间为："</span><span style="border:none;">+$(</span><span class="string" style="border:none;color:#0000FF;">"#audio"</span><span style="border:none;">)[0].duration+</span><span class="string" style="border:none;color:#0000FF;">"秒"</span><span style="border:none;">)  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            }, 10);  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        <!--把文件转换成可读URL-->  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">function</span><span style="border:none;"> getObjectURL(file) {  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">var</span><span style="border:none;"> url = </span><span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">null</span><span style="border:none;">;  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">if</span><span style="border:none;"> (window.createObjectURL != undefined) { </span><span class="comment" style="border:none;color:rgb(0,130,0);">// basic</span><span style="border:none;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                url = window.createObjectURL(file);  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            } <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">else</span><span style="border:none;"> </span><span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">if</span><span style="border:none;"> (window.URL != undefined) { </span><span class="comment" style="border:none;color:rgb(0,130,0);">// mozilla(firefox)</span><span style="border:none;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                url = window.URL.createObjectURL(file);  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            } <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">else</span><span style="border:none;"> </span><span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">if</span><span style="border:none;"> (window.webkitURL != undefined) { </span><span class="comment" style="border:none;color:rgb(0,130,0);">// webkit or chrome</span><span style="border:none;">  </span></span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">                url = window.webkitURL.createObjectURL(file);  </span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">            <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:bold;">return</span><span style="border:none;"> url;  </span></span></li> 
    <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">        }  </span></li> 
    <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside !important;"> <span style="border:none;color:#000000;">


 "test" type="file" multiple="multiple"/>
 "audio" controls="" style="display: none;">