HTML5網頁播放器，實現播放本地文件

最近制作了個簡單的HTML5網頁播放器，主要用到了audio標簽，讀取本地文件用的是FileReader API（貌似僅支持Chrome）。

還有web audio API應該也能實現播放本地音樂文件，就是本人不才，沒有成功！

實例：HTML5網頁播放器DEMO  （阿奇arqi.cc關注web，關注前端開發）

看代碼，html代碼就只需要audio標簽、文件上傳按鈕：

<audio autoplay="autoplay" controls="controls" src="badday.mp3" loop="loop">
      <source src="badday.mp3" type="audio/ogg">
      <source src="badday.mp3" type="audio/mpeg">
      Your browser does not support the audio tag.  
</audio>  
<input id="fileurl" type="file" onchange="play()"/>

javascript代碼如下：

function play(){
try{
    var file=document.getElementById('fileurl').files[0];
    var reader = new FileReader();
    reader.onload = (function(file) {
        return function(e){
            $("audio").attr('src',e.target.result);
            $("source").attr('src',e.target.result);
        }
    })(file);
    reader.readAsDataURL(file);
 }
catch(e){   alert("同學，該換瀏覽器啦！！還在忍受龜速瀏覽器么，用谷歌Chrome吧！"); }  

}

另外，關於audio標簽屬性：可以前往w3school

關於FileReader API：可以前往w3.org

 文章轉載請注明：八戒Done--阿奇arqi.cc