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

本文主要是介绍html5音乐网页代码生成器,HTML5+JavaScript+CSS实现音乐播放器——难点一:动态生成播放列表...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

e11ada3123bc14edc2b8dc13ef613d46.png

cc1d9ff3be539948696723a511bc164f.png

其中歌词和唱片的旋转动画,请参照:

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;

}

这篇关于html5音乐网页代码生成器,HTML5+JavaScript+CSS实现音乐播放器——难点一:动态生成播放列表...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/606161

相关文章

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

Python如何在Word中生成多种不同类型的图表

《Python如何在Word中生成多种不同类型的图表》Word文档中插入图表不仅能直观呈现数据,还能提升文档的可读性和专业性,本文将介绍如何使用Python在Word文档中创建和自定义各种图表,需要的... 目录在Word中创建柱形图在Word中创建条形图在Word中创建折线图在Word中创建饼图在Word

Java捕获ThreadPoolExecutor内部线程异常的四种方法

《Java捕获ThreadPoolExecutor内部线程异常的四种方法》这篇文章主要为大家详细介绍了Java捕获ThreadPoolExecutor内部线程异常的四种方法,文中的示例代码讲解详细,感... 目录方案 1方案 2方案 3方案 4结论方案 1使用 execute + try-catch 记录

Python Excel实现自动添加编号

《PythonExcel实现自动添加编号》这篇文章主要为大家详细介绍了如何使用Python在Excel中实现自动添加编号效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、背景介绍2、库的安装3、核心代码4、完整代码1、背景介绍简单的说,就是在Excel中有一列h=会有重复

SpringBoot接收JSON类型的参数方式

《SpringBoot接收JSON类型的参数方式》:本文主要介绍SpringBoot接收JSON类型的参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、jsON二、代码准备三、Apifox操作总结一、JSON在学习前端技术时,我们有讲到过JSON,而在

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Spring Security注解方式权限控制过程

《SpringSecurity注解方式权限控制过程》:本文主要介绍SpringSecurity注解方式权限控制过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、摘要二、实现步骤2.1 在配置类中添加权限注解的支持2.2 创建Controller类2.3 Us

Spring MVC跨域问题及解决

《SpringMVC跨域问题及解决》:本文主要介绍SpringMVC跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录跨域问题不同的域同源策略解决方法1.CORS2.jsONP3.局部解决方案4.全局解决方法总结跨域问题不同的域协议、域名、端口