响应式+全屏 播放器——嗨啦音乐电台
2019-01-08 本文已影响0人
5吖
预览地址: https://lovexwu.github.io/halaMusic/
项目功能
一、头部的音乐播放器 Fm 模块
1、事件监听：发送对象，绑定播放、暂停、下一首
2、点击播放：更新状态
3、点击暂停：清除
4、获取歌曲数据：设置歌名、作者和背景图片
5、设置音乐：得到新的音乐
6、更新时间、进度条
二、底部展现不同的channel音乐合集Footer 模块
1、 绑定事件
左右按钮事件 + li 图片 点击事件
2、 渲染数据
渲染底部数据 + 重设样式
注： 其中Fm模块和Footer模块，通过事件中心来交互，而且它们是独立的
项目技术
1、响应式布局+自适应： vh + @media （媒体查询）实现
2、事件监听：自定义事件
3、音乐播放：audio对象实例化
4、字体图标：iconfont
5、animate.css + 编写一个组件
6、ajax 获取数据
遇到的坑
1、GitHub不支持http协议
2、百度会限制我们的访问，所以在<head>标签下一定要添加<meta name = "referrer" content = "never">
3、收藏歌曲部分还没完善
技术栈
jQuery、css3、响应式
