html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

既然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：不是专业的前端可能写的代码很丑。。分析也不够透彻。。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151626.html原文链接：https://javaforall.c