大家好，又见面了，我是你们的朋友全栈君。
既然HTML5提出与本地交互方便，就想写个HTML5的本地音乐播放器。一开始问题主要集中在怎么读取本地文件路径，我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件，但是原生JS怎么写不太清楚)，不过简单一点就用这样只能读取一个，我想做的是最好是把一个文件夹中的都取出来，然后参考http://sapphion.com/2011/11/html5-folder-upload-with-webkitdirectory/ 给file加了个webkitdirectory属性，谷歌浏览器下可以实现，发现目前为止只有谷歌浏览器支持文件夹获取，所以其他浏览器只能为file添加一个 multiple属性 ，可以一次添加多个文件，我参考了一下http://blog.csdn.net/goodnew/article/details/7355619，不过试了几个浏览器发现文章中为file添加的mozdirectorydirectory，并未发现有什么用，更坚信了只有谷歌才支持文件夹获取。后面主要问题就是获取文件的URL，播放器的话用，详细看代码,附上链接http://download.csdn.net/detail/popezong/8790939
#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;
}
您的浏览器不支持 audio 标签。
style=”display: none” accept=”audio/mpeg” />
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 += ‘
‘
+ path + ‘
‘;
} else {
song += ‘
‘
+ path + ‘
‘;
}
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();
}
PS：不是专业的前端可能写的代码很丑。。分析也不够透彻。。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/151626.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
![树莓派3B 系统安装及初始化配置教程[通俗易懂]](http://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)