H5音乐播放器

     本来我是想把这个播放器写完的,但是我现在已经摸清楚我js的技术了,(我还是只懂皮毛)所以我就决定了,先不写了,所以我的音乐播放器还只是一个半成品,下面我简单说一下我的编写过程吧!          

这个是我模仿酷狗的音乐播放器做的整个播放器我把他划分为4个部分。

           1 第一个部分就是头部主要放图片ioc和切换皮肤,皮肤主要是利用css3的一个颜色的特点currcolor(单词好像打错了)这个主要是把我的页面的颜色变成动态的,只要我的父子盒子的color的颜色变,其他的颜色就都会跟着变,在这个里我把最大的盒子的color的颜色当成父子颜色(currcolor它只跟随父级的color变,还有一切颜色的都可以设置为currcolor),然后我在用javascript去改变我的父级color就能简单的皮肤切换了。

           2第二部分就是歌曲的播放的一些按键了,右边就是一张有,这个第二部分左边才是关键,在这个里我本来是想都用图片做按钮的,但是我之前学了css3的一些其他的特点,(css3主要对颜色的应用神奇,毕竟我们对美的评价,就是对颜色的评价,这个你就也懂的了),这里的我用css的三角形的绘制在加上旋转,这里主要是对border边框的玩法,就绘制了上一曲,下一曲,这里对进度条的玩法也是比较有意思的,在我们的C#form中有专门的控件,但是在html里就没有了,那时候我还想了很久,怎么实现这个进度条,后来想的了width,和margin我就有了思路了,我给一个2px像素的height高的盒子里面在来一个子级盒子先不定宽用javascript去控制width宽就好了,在给他加background'背景色就可以了,至于那个长方形白色的块也是同理(这个进度条我用了css3的渐变色)。

            3第三部分就是动态的控制UL里面的LI,我是用的动态生成我写一个josn数组的数组存取我歌曲的数据在用javascript的动态控制,说的这里我昨天写的这个功能,我动态的生成的时候,只能给最后一个li加上点击事件,好像是闭包了吧,在这个理我闭包还只知道一点点,后面我就找的了,我网上的网友讨论了一下这个bug,后面他还是给了我解决的方法,第一个是javascript的事件冒泡,第二种方法就是在我创建完li后在给我每一个li遍历的方法加上点击事件,,当我点击对应的歌曲的时候播放对应的歌曲。 

             4第四部分 再续中......................................


     总结:这就是我为什么说是一和半成品了,我今天早上想了想我可以把我这个音乐播放器写的跟好但不是现在,在这里我有几个想法,我的歌曲列表之所以一写动态是因为我想的了一个功能,就是写一个文本框接受客户输入的歌曲,上传的pm3歌曲文件,存到服务器里,就能实现播放自己上传的歌曲,或者录音,还有给每一个歌曲前面加一个多选框,来下载歌曲,对了这里的歌词我想了一下也用动态添加li就可以了,还有对歌词的拖拽不过我还不可以实现,等吧!!!!!!我现在重新在吧javascript进阶一下

淘宝优惠网要源码的在下面留下自己的邮箱号我会发你,我相信你会把我的优化的跟号

源码音乐播放器       

猜你喜欢

转载自blog.csdn.net/weixin_41472521/article/details/80432254