HTML5+JavaScript+CSS实现音乐播放器——难点一:动态生成播放列表

最新推荐文章于 2024-05-16 21:46:32 发布

weixin_34367257

最新推荐文章于 2024-05-16 21:46:32 发布

阅读量1.3k

点赞数 1

文章标签： javascript 前端人工智能 ViewUI

原文链接：https://my.oschina.net/u/2619218/blog/1502777

版权

2019独角兽企业重金招聘Python工程师标准>>>

下面是我最近完成的一个音乐播放器，是仿照网易云音乐的排版做的，在做这个之前，感觉难以下手，但一步一步地经过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中动态添加。

<div class="list_title">
    <div class="no"></div>
    <div class="name">音乐标题</div>
    <div class="singer">歌手</div>
    <div class="zhuanji">专辑</div>
    <div class="length">时长</div>
    <div class="size">大小</div>
</div>
<div class="listSong"></div>

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<oMusic.length;i++){
        //设置列表
        oListSong.innerHTML+="<div><span class='no'>"+oMusic[i].no+"</span><span class='name'>"+oMusic[i].name+"</span><span class='singer'>"+oMusic[i].singer+"</span><span class='zhuanji'>"+oMusic[i].zhuanji+"</span><span class='length'>"+oMusic[i].length+"</span><span class='size'>"+oMusic[i].size+"</span></div>";
    }

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;
}

转载于:https://my.oschina.net/u/2619218/blog/1502777