原生JS响应式音乐简单播放器

TOC

主页面的设计要点

该音乐播放器主要由两大部分组成。

  1. 音乐播放模块
    1.1 包含音乐图片,音乐标题,音乐作者,以及音乐专辑的展示。
    1.2 音乐播放进度条,音量控制,歌曲播放暂停切换以及播放模式。
  2. 音乐列表
    屏幕大于510px的时候直接显示,小于510px时通过音乐列表按钮来控制列表是否显示。

设计图

  1. 电脑版
    原生JS响应式音乐简单播放器
  2. 移动版
    原生JS响应式音乐简单播放器

实际效果

原生JS响应式音乐简单播放器
原生JS响应式音乐简单播放器原生JS响应式音乐简单播放器

演示及完整代码链接

链接: 演示链接.
链接: 源码链接.

部分功能详解

利用checkbox实现下拉框

利用 label标签的 "for"绑定到 checkbox复选框,从而实现。

// An highlighted block
var foo = 'bar';