html5音乐网页代码生成器,HTML5+JavaScript+CSS实现音乐播放器——难点一:动态生成播放列表...

下面是我最近完成的一个音乐播放器，是仿照网易云音乐的排版做的，在做这个之前，感觉难以下手，但一步一步地经过3天的奋战，终于实现了音乐播放器的基本功能，如：动态生成播放列表、进度条的点击与拖动改变歌曲播放进度、上一首下一首、播放模式的改变、歌词的显示等等功能。

其中歌词和唱片的旋转动画，请参照：

1.http://blog.csdn.net/qq_27339691/article/details/52048507?locationNum=13

2.http://blog.chinaunix.net/uid-29658298-id-4378757.html

由于篇幅有限，这里只写出在编写时遇到的第一个问题-动态生成播放列表，其中控制音乐播放的控制器在下一个博客中写出。

在JS中定义一个JSon格式的数组，然后用循环遍历数组，然后分别将信息设置到列表中即可。

HTML代码如下：其中list_tite是列表的标题，listSong是下面的一个大的div框架，以便可以在JS中动态添加。

音乐标题

歌手

专辑

时长

大小

JS代码如下：

//Json数组

var music=[

{"no":"01","name":"七月上","singer":"Jam","src":"audioFile/1.mp3","zhuanji":"七月上","length":"03:10","size":"2.9MB","image":"images/1.png","lyric":""},

{"no":"02","name":"奇妙能力歌","singer":"陈粒","src":"audioFile/2.mp3","zhuanji":"热门华语","length":"04:13","size":"9.7MB","image":"images/2.png","lyric":""}];

//解析Json格式的数组

var oMusic=eval(music);

//获取相应的div对象

var oListSong=document.getElementsByClassName("listSong")[0];

//循环遍历列表利用innerHTML的方法动态生成

for(var i=0;i

//设置列表

oListSong.innerHTML+="

"+oMusic[i].no+" "+oMusic[i].name+" "+oMusic[i].singer+" "+oMusic[i].zhuanji+" "+oMusic[i].length+" "+oMusic[i].size+"

";

}

CSS代码如下：

/*title标题部分*/

.list_title{

overflow: hidden;

border-bottom: 1px solid #E1E1E2;

height: 30px;

line-height: 30px;

}

.list_title div{

border-right: 1px solid #E1E1E2;

/*浮动方式显示成一行*/

float: left;

padding-left: 10px;

}

.no{

width: 50px;height: 30px

}

.name{

width: 290px;

}

.singer{

width: 250px;

}

.zhuanji{

width: 250px;

}

.length{

width: 120px;

}

.size{

width: 123px;

}

/*表格部分*/

.listSong div{

height: 30px;

overflow: hidden;

}

/*隔一行显示不同的颜色*/

.listSong div:nth-of-type(even){

background-color: #fffdef;

}

.listSong div:hover{

background-color: #ffecec;

cursor:pointer;

}

.listSong span{

display: inline-block;

height: 30px;

line-height: 30px;

float: left;

padding-left: 10px;

}