大家好,又见面了,我是你们的朋友全栈君。
既然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账号...