文档章节

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

Ritajiao
 Ritajiao
发布于 2017/08/04 15:06
字数 628
阅读 82
收藏 0

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

 

© 著作权归作者所有

Ritajiao
粉丝 0
博文 10
码字总数 6835
作品 0
保定
私信 提问
OSX 下安装使用控制台音乐播放器 mocp

OSX 下安装使用控制台音乐播放器 mocp 目录 *** mocp 简介 mocp 安装设置* mocp 使用命令 mocp 简介 是一款开源的基于控制台的音乐播放器,也就是说在文本字符界面下使用的音乐播放器,支持 ...

FreeBlues
2014/08/14
0
0
手把手教你做音乐播放器(一)功能规划

版权声明:本文为博主原创文章,禁止转载,违者必究。 https://blog.csdn.net/anddlecn/article/details/52594998 前言 学习完“计算器” “视频播放器” “蓝牙聊天”以后,对安卓应用的开发...

anddlecn
2016/09/20
0
0
命令行下的音乐播放器 — MOC

MOC是运行在“终端”下的音乐播放器,支持MP3,wma等格式。安装起来倒是很简单,至于使用,基本就是靠“字母快捷键”搞定的.在ubuntu终端下输入 sudo apt-get install moc 安装完成后在终端自...

绿悠悠
2010/07/19
1K
8
Android音乐播放器的设计与实现

目录 应用开发技术及开发平台介绍 应用需求分析 应用功能设计及其描述 应用UI展示 一、应用开发技术及平台介绍   ①开发技术:   本系统是采用面向对象的软件开发方法,基于Android stu...

彩笔阿呆
2018/10/31
0
0
手把手教你做音乐播放器(七)播放音乐(上)

版权声明:本文为博主原创文章,禁止转载,违者必究。 https://blog.csdn.net/anddlecn/article/details/52714029 第7节 播放音乐 音乐播放列表也准备好了,我们来播放音乐吧。完成后效果如下...

anddlecn
2016/09/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

axios 使用步骤很简单,首先在前端项目中,引入 axios:

  前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个项目本身也停止维护,目前建...

SEOwhywhy
37分钟前
4
0
c++ 创建对象的三种方法

c++有三种方法创建对象 结合代码来看 1 #include <iostream> 2 using namespace std; 3 class Test { 4 5 private: 6 public: 7 add() 8 { 9 ......

天王盖地虎626
51分钟前
1
0
ant 中的fileset include等拷贝

拷贝一个目录到指定目录下 例:<copy todir="${basedir}/new"> <fileset dir="${basedir}/old"> <include name="appgen" /> <include name="appgen/" /> <include name=appgen/**" /> <incl......

shzwork
57分钟前
2
0
react-jianshu项目的创建

创建项目 1、github上创建仓库react-jianshu 2、将项目克隆到本地git clone git@github.com:startjcu/react-jianshu.git 3、在当前目录(项目目录的上级目录)下执行create-react-app react-...

星闪海洋
今天
2
0
OSChina 周二乱弹 —— 小哥哥,你可以教我写代码吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @nnnm: 生活大爆炸,结束了,这部陪伴了漫长时间的情景喜剧,最终是以诺贝尔奖和大团圆收尾的。虽然,不算精彩,但也是温馨。而少年谢尔顿的...

小小编辑
今天
945
14

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部