[HTML5]簡單網頁本地音樂播放器
阿新 • • 發佈：2019-02-01
既然HTML5提出與本地互動方便，就想寫個HTML5的本地音樂播放器。一開始問題主要集中在怎麼讀取本地檔案路徑，我想肯定可以用JS實現去操作本地檔案（因為node.js很容易實現讀取本地檔案，但是原生JS怎麼寫不太清楚），不過簡單一點就用<input type="file" />這樣只能讀取一個，我想做的是最好是把一個資料夾中的都取出來，然後參考http://sapphion.com/2011/11/html5-folder-upload-with-webkitdirectory/
給file加了個webkitdirectory屬性，谷歌瀏覽器下可以實現，發現目前為止只有谷歌瀏覽器支援資料夾獲取，所以其他瀏覽器只能為file新增一個 multiple 屬性 ，可以一次新增多個檔案，我參考了一下http://blog.csdn.net/goodnew/article/details/7355619，不過試了幾個瀏覽器發現文章中為file新增的mozdirectory
directory，並未發現有什麼用，更堅信了只有谷歌才支援資料夾獲取。後面主要問題就是獲取檔案的URL，播放器的話用<audio>，詳細看程式碼,附上鍊接http://download.csdn.net/detail/popezong/8790939
PS：不是專業的前端可能寫的程式碼很醜。。分析也不夠透徹。。<!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <style> #songlist { border: 1px; background-color: #c4c4c4; } .odd { background-color: #ffffff; } .cur { background-color: #444444; } ul { list-style-type: none; margin: 0px; width: 400px; } ul li { list-style-type: none; display: block; width: 100%; background: #ccc; } ul li:hover { background: #999; } </style> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> </head> <body> <audio id="myaudio" src="1.mp3" controls="controls" loop="false"> 您的瀏覽器不支援 audio 標籤。 </audio> <!-- <button onclick="autoPlay()" style="BACKGROUND-IMAGE: url(next.jpg);BACKGROUND-REPEAT: no-repeat;" /> --> <input type="image" src="next.jpg" onclick="autoPlay()" /> <input type="file" id="files" name="files[]" multiple webkitdirectory="" style="display: none" accept="audio/mpeg" /> <input type="button" id="select" value="選擇歌曲資料夾" onclick="selectMP3()"> <div> <ul id="songlist"> </ul> </div> <script language="javascript" type="text/javascript"> var input = document.getElementById('files'); var songlist = document.getElementById('songlist'); var song = songlist.innerHTML; var myAuto = document.getElementById('myaudio'); input.onchange = function(e) { var files = e.target.files; // FileList var count = 0; for (var i = 0, f; f = files[i]; ++i) { //file have .name var path = f.name || f.webkitRelativePath ; if (/.*\.mp3$/.test(path)) { var url; if (window.createObjectURL) { url = window.createObjectURL(files[i]) } else if (window.createBlobURL) { url = window.createBlobURL(files[i]) } else if (window.URL && window.URL.createObjectURL) { url = window.URL.createObjectURL(files[i]) } else if (window.webkitURL && window.webkitURL.createObjectURL) { url = window.webkitURL.createObjectURL(files[i]) } if (count % 2 === 0) { song += '<li class="song odd" onclick="changeSrc(event)" ><input type="hidden" value="'+url+'"/>' + path + '</li>'; } else { song += '<li class="song even" onclick="changeSrc(event)" ><input type="hidden" value="'+url+'"/>' + path + '</li>'; } count++; } } songlist.innerHTML = song; } function autoPlay() { var next = $(".cur").next(); next.addClass("cur").siblings().removeClass("cur"); var cur = document.getElementsByClassName("cur"); myAuto.src = cur[0].firstChild.value; myAuto.play(); } function selectMP3() { input.click(); } function changeSrc(event) { event = event ? event : window.event; var obj = event.srcElement ? event.srcElement : event.target; $(obj).addClass("cur").siblings().removeClass("cur"); myAuto.src = obj.firstChild.value; myAuto.play(); } </script> </body> </html>