实现简单的自定义音乐播放器

这篇博客只是记录自己写的js插件，着重点在于js，而不是css或者html。所以在js方面会比较详细，而其他的就只是简单提提。

刚学前端js那会，只是应付式的把书看完了，demo也没写几个。碰巧这学期的网页设计课程接近期末，老师要求要完成一个期末设计。好吧，就拿它来练练手了。just do it，搞起。这段时间对音乐和MV比较感兴趣，于是就打算做一个分享音乐、MV的分享网站。要想做这样一个网站有样东西是必须要完成的，没错，就是一个有特色的播放器。

一：首先看看别人家（QQ音乐）的播放器：

分析：（1）：先提取出别人家播放器的几个功能。

1、播放/暂停 

2、左右切换歌曲 

3、调节音量

4、循环方式

5、弹出歌曲列表

6、显示音乐信息（专辑图片、歌手、歌名）

7、弹出/收起 播放器

8、显示播放进度条

（2）：再看布局

这只是我自己简单的分析，并没有根据它的源代码来分析（好像有点不负责任），所以布局可能与它代码实现的布局会有点出入。但最后的效果是一样的就没多大关系。

二：分析自己的简单播放器

既然是简单的，那么就不需要把别人家播放器的所有功能完成，当然，如果想做的话还是可以的。

（1）简单版本的播放器的功能。

1、弹出/收起 播放器

2、左右切换歌曲 

3、播放/暂停 

4、显示音乐信息（专辑图片、歌手、歌名）

（2）布局。功能的减少，意味着按钮的减少，所以布局相比会比较简单。毕竟是简单版本的嘛。。呵呵

不知道看懂了没有，毕竟每个程序猿都是灵魂画师...还是上最后的效果图，和设计图作对比吧。

三：代码实现

根据上面的设计图，用代码实现布局

html代码：

    
    

    
    
    

    
    

        
My Love - mylover
        

            
		
	    
            
		
	    
            
		
	    
        
    
    
    

        
        
    

这里说明一下，这个自定义播放器是基于html5的一个