项目实现小记

Blue FM

2019-06-22  本文已影响0人  fejavu

最近学习,跟着视频教程做了一个简单的音乐播放器,因为它的主色调是蓝色,所以叫 Blue FM。

主要功能

  1. 页面加载完成后随即开始播放一首歌。
  2. 播放过程中可以随意暂停,播放,以及下一首。
  3. 页面背景以及页面歌曲信息随选择的歌曲变化
  4. 播放进度显示以及歌词加载。
  5. 音乐频道选择自动播放歌曲。
  6. 频道列表前后滚动,以及滚动面板加锁。

技术细节

  1. 页面响应

页面布局方面,为了使页面元素具有更好的响应式,几乎所有元素的大小单位都使用了vh——相对视口的高度单位,使得页面元素大小随着视口的大小而变化,例如歌曲封面,高度设定为30vh,随视口大小而变化。并且尽量少的使用边框类元素,因为边框类元素也会随着适口的大小改变,影响观感。

.cover img {
  height: 30vh; 
  box-shadow: 0px 0px 5px 5px rgba(21, 16, 16,1);
}
  1. 页面布局

页面布局主要使用正常文档流布局,浮动和绝对定位布局。典型的左右元素排布使用浮动布局加相邻元素的左右margin,例如封面图片模块和歌曲信息模块;少数特殊元素使用绝对定位布局,例如频道列表前进后退按钮;其他模块内使用正常文档流布局,例如歌曲细节信息模块。

  1. 资源获取

音乐频道和歌曲的获取,主要是从封装好的接口,异步获取音乐频道列表和对应的歌曲,获取后进行音乐频道列表 DOM 元素封装,拼接到文档中,获取歌曲后将歌曲信息设置到页面各个位置,并使用 Audio 对象进行歌曲播放。

  1. 核心函数

Blue FM 的核心函数是 loadMusic 函数,只要在全局变量设置了频道的id,根据封装的接口,就可以使用异步获得该频道的歌曲列表,将然后将第一首歌曲信息设置为页面信息并播放,同时加载歌词。

function loadMusic(){
  var _this = this;
  $.getJSON('//jirenguapi.applinzi.com/fm/getSong.php',{channel:_this.channelId}).done(function(result){
    _this.song = result['song'][0];
    _this.setMusic();
    _this.loadLyric();
  });
}
  1. 其他细节

页面加载后自动播放
设置一个函数,初始化一个默认的channelId,,在用户未点击列表之前进行播放;
播放完毕自动下一首
对 Audio 标签进行监听,当歌曲播放完毕,调用封装好的 loadMusic 函数,播放同音乐频道的下一首。

  1. 遇到的问题

  1. 需要改进的功能

项目收获

  1. 对前后端封装有了更深的认识
    双方约定相应的接口,后端负责将数据按照接口的模式封装起来,提供接口进行调用;前端利用接口,获取数据并进行处理,与用户进行交互。
  2. 对布局有了更多的了解
    网页布局中典型的左右布局,上下布局,浮动布局,绝对定位等需要更多地实践,钻研。

技术栈关键字

jQuery、JavaScript、HTML5、CSS3、响应式、异步函数、前后端分离

预览连接

上一篇 下一篇

猜你喜欢

热点阅读