音乐播放器

项目介绍

特点

• 基于原生 JavaScript、HTML、CSS 实现网页音乐播放器
• 使用 HTML5
  元素实现音频播放与控制
• 首页轮播图，模拟公告展示、音乐推荐等
  • 定时自动播放下一个项目，鼠标移入时停止自动播放
  • 点击左右箭头可切换到上一个 / 下一个项目
  • 底部白点定位当前项目在总项目的位置，且动态变化
  • 鼠标移动到哪个白点就可切换到该项目
• 通过 ontimeupdate、onplay、onpause、onended 事件实现音频播放事件
  • 音频播放时
    • 小播放器和大播放器的封面随音频播放旋转
    • 小播放器会展开环形进度条，环形进度条通过
      标签的
      标签实现
    • 大播放器封面出现渐变波纹特效
    • 大播放器进度条实时更新
  • 音频暂停时
    • 封面旋转、环形进度条和直线进度条、渐变波纹皆暂停
  • 音频结束播放时
    • 根据当前循环播放状态（单曲循环、列表循环、随机播放）在播放列表中播放下一首歌
• 具备播放列表、收藏列表动态更新与保存功能
• 收藏列表、播放列表动态渲染，可上下滚动且不影响其他 DOM 元素
• 通过事件绑定、事件委托实现歌曲的播放、暂停、上下首、音频开关、添加 / 删除到收藏列表、添加到播放列表、下载功能
• 通过 clientX、offsetLeft 实现大播放器进度条 拖动播放、点击播放 功能
• 针对歌曲名长度超出 DOM 元素的情况，通过 textContent、clientWidth 实现左右滚动效果
• CSS 使用 animation 实现各个关键帧动画