个人项目经理 音乐播放器

 

 轮播图片是连接后端数据库在页面加载的时候

 歌单因为要一个div显示一个歌单 所以使用了分页查询 本且将歌单id保存到原生的html元素上面 方便后期 点击时更具id查找

$item.get(0).musicid =music[0].musicID;

 

 

 

 

下面的单歌单查询会查询出前十首歌曲 调用了jquery的fide()方法 能完美过度 音乐的加载 提升用户视觉体验 

 当完美点击歌曲或者歌单的时候 就会更具歌单的id或者歌曲的id跳转音乐播放器的页面

 

 首先 如果他是歌单它会根据歌单id查询 如果是单曲他只会加载当前歌曲 

这个页面的一些基本功能已经全部实现（播放 暂停 上一首 下一首 歌词滚动 音量大小控制 歌曲随机切换）

音乐播放：

 

 创建一个音乐播放器对象：

 

 监听播放按钮的点击事件

 

 

 

 

 给滚动条对象添加 鼠标移动 鼠标点击 鼠标抬起事件 （并且计算出 每次移动的位置）

//新增点击和移动的方法
        progressClik:function(callback) {
            var $this = this;
            //监听背景点击
            this.$progressBar.click(function (event) {
                //获取距离默认窗口位置
                var normaLeft = $(this).offset().left;
                //获取点击的窗口宽度
                var X = event.pageX;
                $this.$progressLine.css("width",X-normaLeft);
                //计算当前进度条百分比（用前景的宽度/背景的宽度）
                var value  = (X-normaLeft)/$(this).width();
                callback(value);
            });
        },
        progressMove:function () {
            var $this = this;
          //监听鼠标的按下事件
          this.$progressBar.mousedown(function () {
              $this.isMove = true;
              //获取距离默认窗口位置
              var normaLeft = $(this).offset().left;
                //监听鼠标的移动事件
              $(document).mousemove(function (event) {
                  //获取点击的窗口宽度
                  var X = event.pageX;
                  $this.$progressLine.css("width",X-normaLeft);
                  $this.$progressDot.css("left",X-normaLeft);
                  //原点位置
                  var leftDot = $this.$progressDot.offset().left+$this.$progressDot.width()+$this.$progressDot.width();
                  var leftBar = $this.$progressBar.width()+$this.$progressBar.offset().left;
                  if (leftDot>leftBar) {
                      //如果前景色大于背景色 就停止移动
                      return;
                  }

              });
          });
          //鼠标抬起事件
            $(document).mouseup(function () {
                $(document).off("mousemove");
                $this.isMove = false;
            });
         },

调用方法 监听播放音乐发生改变 设置前景色的宽度 调用回调方法 返回当 前播放长度 和 播放位置 还有返回计算好格式化时间的歌词

 

 

接下来监听音频对象发生改变事件之后我们要执行的操作：设置前进色的宽度 并且可以在这里监听歌词的位置

  setProgress:function (value) {
            if (this.isMove) return;
            if (value<0 || value>100) return ;
                this.$progressLine.css({
                    width : value+"%"
                });
                this.$progressDot.css({
                    left:value+"%"
                });
        }

 

 

 解析歌词 传入当前播放歌曲的歌词 然后显示出来 每当进度条发生变化的时候歌词的随之变化

 　　　每当点击生成二维码的时候 将在数据生成一个唯一编码

　　

 

 

 前端调用一个定时器 生成二维码的时候 就会实时刷新二维码是否被访问

 

 

调用接口 这个接口使用的参数有两个 一个是编码 一个是uid 如果编码不存在是不能被访问 并且判断当前扫描登录的用户是否登录过 如果没有 显示用账号登录的页面 如果有 显示一个直接授权的页面

 

 视频弹幕：根据后端查询数据 将数据填充到数组里面 然后更具数据设置 transition:translateX属性 监听属性 等属性结束的时候弹幕小时 1.5版本优化简易 根据视频的长度记录 放出弹幕