运用的技术点：
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>
