美文网首页
响应式+全屏 播放器——嗨啦音乐电台

响应式+全屏 播放器——嗨啦音乐电台

作者: 5吖 | 来源:发表于2019-01-08 21:42 被阅读0次

    预览地址: 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、响应式

    相关文章

      网友评论

          本文标题:响应式+全屏 播放器——嗨啦音乐电台

          本文链接:https://www.haomeiwen.com/subject/iumbrqtx.html