运用的技术点：
1、音乐播放器：audio
2、加载本地音乐：file
3、加载音乐名：[]数组、split分割
4、音乐地址：blob
5、事件：file的change事件，li的单击事件
6、li选中背景显示
源码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>音频播放</title><style>.currentli {color:#186ecc;background-color:orange;}#dividLine{border: 1px solid greenyellow;border-radius: 10px;width: 300px;}</style><script src="js/jquery.min.js"></script><script>$(document).ready(function () {var urls=[];//装播放地址的数组var ss=[];//装音乐名的数组//选择文件的事件$("#file").change(function (file) {for (var i=0;i<file.target.files.length;i++){var filename=file.target.files[i].name;//获取到文件名var names=filename.split(".");//根据.进行分割var ol=names[0];//取到.之前的名称var li = $("<li>");li.html(ol);//设置li表现显示的文本$("#playlist").append(li);//将创建的li标签添加到ol里面$("body").append(file.target.files[i]);var url = window.URL.createObjectURL(file.target.files[i]);ss[i]=ol;urls[i]=url;$("#player")[0].src = urls[0];$("#player")[0].Onload= function () {window.URL.revokeObjectURL(src);};}//播放列表的单击事件$("#playlist").on("click","li",function () {//选中li显示背景色和字体颜色$(this).addClass("currentli").siblings().removeClass();var name= $(this).text();//获取到选中列表的文本for (var i=0;i<ss.length;i++)//循环遍历添加到数组中的歌曲名称{if(ss[i]==name)//获取到下标地址{$("#player")[0].src = urls[i];$("#player")[0].Onload= function () {window.URL.revokeObjectURL(src);};}}});});});</script></head><body><audio src="mp3/公子向北走.m4a" cOntrols="controls" autoplay="autoplay" id="player"></audio><label for="file">+</label><input type="file" multiple id="file" style="display: none"><div id="dividLine"><ol id="playlist"></ol></div></body></html>声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com
