本文主要是介绍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+="
}
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;
}
这篇关于html5音乐网页代码生成器,HTML5+JavaScript+CSS实现音乐播放器——难点一:动态生成播放列表...的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
