3. qq音乐练习 2 js

模拟的后台数据,,还是要好好学一下mock
data.json

[
{
  "image" : "/source/img/choubaguai.jpg",
  "audio" : "/source/mp3/choubaguai.mp3",
  "song" : "丑八怪",
  "album" : "意外",
  "singer" : "薛之谦",
  "duration" : 253,
  "isLike" : true
},
{
  "image" : "/source/img/shapeofyou.jpg",
  "audio" : "/source/mp3/shapeofyou.mp3",
  "song" : "shape of you",
  "album" : "意外",
  "singer" : "薛之谦",
  "duration" : 253,
  "isLike" : true
},
{
  "image" : "/source/img/xiaoban.jpg",
  "audio" : "/source/mp3/xiaoban.mp3",
  "song" : "丑八怪",
  "album" : "意外",
  "singer" : "薛之谦",
  "duration" : 253,
  "isLike" : true
}
]

17.canvas 高斯模糊封装

step1
render.js

// 页面渲染  img + info + like

(function ($,root) {
      
        function renderImg (src) {
            var img = new Image();
            img.src = src;
            img.onload = function () {
              // 图片懒加载
                $(".img-box img").attr('src',src);
                    // 高斯模糊
                root.gaussBlur($("body")[0],src);
            }
            
        }

        // 更新 info数据
        function renderInfo (info) {
          let str = `<div class="song-name">${info.song}</div>
        <div class="singer-name">${info.singer}</div>
        <div class="album-name">${info.album}</div>`;
          $(".song-info").html(str);
          
        }
        function renderIsLike () {
            
        }
        
    root.render = function (data) {
        renderImg(data.image);
        renderInfo(data);
    }
    
    root.renderImg = renderImg; 
    
})(window.Zepto,window.player || (window.player = {}));

step2

// 页面渲染  img + info + like

(function ($,root) {
      
        function renderImg (src) {
            var img = new Image();
            img.src = src;
            img.onload = function () {
              // 图片懒加载
                $(".img-box img").attr('src',src);
                root.gaussBlur($("body")[0],src);
            }
            
        }
        // 高斯模糊
        
        function renderInfo (info) {
          let str = `<div class="song-name">${info.song}</div>
        <div class="singer-name">${info.singer}</div>
        <div class="album-name">${info.album}</div>`;
          $(".song-info").html(str);
          
        }
        function renderIsLike (like) {
            if (like) {
                $(".like").addClass('liking');
            } else{
                $(".like").removeClass('liking');
            }
        }
        
    root.render = function (data) {
        renderImg(data.image);
        renderInfo(data);
        renderIsLike (data.isLike);
    }
    
    root.renderImg = renderImg; 
    
})(window.Zepto,window.player || (window.player = {}));

step3
bindEvent , control的事件

var root = window.player;
var nowIndex = 0;
var dataLength = null;
var dataclone;
root.gaussBlur = gaussBlur;

function getData(url) {
  $.ajax({
    type: "GET",
    url: url,
    async: true,
    success: function(data) {
      console.log(data[2]);
      dataLength = data.length;
      dataclone = data;
      root.render(data[0]);
      bindEvent();
    },
    error: function() {
      console.log("error");
    }
  });
}

function bindEvent() {
  $(".pre").on('click', function() {
    if(nowIndex == 0) {
      nowIndex = dataLength - 1;
    } else {
      nowIndex--;
    }
    root.render(dataclone[nowIndex]);
  });
  $(".next").on('click', function() {
    if(nowIndex == dataLength - 1) {
      nowIndex = 0;
    } else {
      nowIndex++;
    }
    root.render(dataclone[nowIndex]);
  });
}


getData("../mock/data.json");

---

step4
AudioManager.js

(function($, root) {
  // play pause getAudio

  function AudioManager(src) {
    this.audio = document.createElement('audio');
//  this.audio.src = src;
    //  oAudio.setAttribute('autoplay','autoplay');
    this.state = 'pause';
  }

  AudioManager.prototype = {
    play: function() {
      this.audio.play();
      this.state = 'play';
    },
    pause: function() {
      this.audio.pause();
      this.state = 'pause';
    },
    getAudio: function(src) {
      this.audio.src = src;
      this.audio.load();
    },
  }

  root.audioManager = new AudioManager();

})(window.Zepto, window.player || (window.player = {}));

index.js

var root = window.player;
var nowIndex = 0;
var dataLength = null;
var dataclone;
var url = '../mock/data.json';

var audio = root.audioManager;
root.gaussBlur = gaussBlur;

function getData(url) {
  $.ajax({
    type: "GET",
    url: url,
    async: true,
    success: function(data) {
      console.log(data[2]);
      dataLength = data.length;
      dataclone = data;
      root.render(data[0]);
      audio.getAudio(data[nowIndex].audio);
      bindEvent();
    },
    error: function() {
      console.log("error");
    }
  });
}

function bindEvent() {
  $(".pre").on('click', function() {
    if(nowIndex == 0) {
      nowIndex = dataLength - 1;
    } else {
      nowIndex--;
    }
    audio.getAudio(dataclone[nowIndex].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[nowIndex]);
  });
  $(".next").on('click', function() {
    if(nowIndex == dataLength - 1) {
      nowIndex = 0;
    } else {
      nowIndex++;
    }
    audio.getAudio(dataclone[nowIndex].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[nowIndex]);
  });

  $(".play").on('click', function() {
    // 图案变成 暂停
    // 音乐停止播放
    // 图片停止旋转.

    if(audio.state == 'play') {
      $(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
      audio.pause();
    } else if(audio.state == 'pause') {
      $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
      audio.play();
    }

  })
}

getData("../mock/data.json");

---

step5
把 index 弄成模块分割出来
indexControl.js

(function($, root) {

  function Control() {
    this.index = 0;
  }

  Control.prototype = {
    pre: function() {
      if(this.index == 0) {
        this.index = dataLength - 1;
      } else {
        this.index--;
      }
      return this.index;
    },
    next: function() {
      if(this.index == dataLength - 1) {
        this.index = 0;
      } else {
        this.index++;
      }
      return this.index;
    }
  }

  root.controlIndex = new Control();
})(window.Zepto, window.player || (window.player = {}));

index.js

var root = window.player;
//var nowIndex = 0;
var dataLength = null;
var dataclone;
var url = '../mock/data.json';

var audio = root.audioManager;
root.gaussBlur = gaussBlur;

function getData(url) {
  $.ajax({
    type: "GET",
    url: url,
    async: true,
    success: function(data) {
      console.log(data[2]);
      var i = root.controlIndex.index;
      dataLength = data.length;
      dataclone = data;
      root.render(data[i]);
      audio.getAudio(data[i].audio);
      bindEvent();
    },
    error: function() {
      console.log("error");
    }
  });
}

function bindEvent() {
  $(".pre").on('click', function() {
//  if(nowIndex == 0) {
//    nowIndex = dataLength - 1;
//  } else {
//    nowIndex--;
//  }

    var i = root.controlIndex.pre();
    audio.getAudio(dataclone[i].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[i]);
  });
  $(".next").on('click', function() {
//  if(nowIndex == dataLength - 1) {
//    nowIndex = 0;
//  } else {
//    nowIndex++;
//  }
    var i = root.controlIndex.next();
    audio.getAudio(dataclone[i].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[i]);
  });

  $(".play").on('click', function() {
    // 图案变成 暂停
    // 音乐停止播放
    // 图片停止旋转.

    if(audio.state == 'play') {
      $(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
      audio.pause();
    } else if(audio.state == 'pause') {
      $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
      audio.play();
    }

  })
}

getData("../mock/data.json");

---

step6
优化 indexControl.js
真的是秀的我一脸懵逼,
果然数学强的话, 一个公式能顶好多if else
indexControl.js

(function($, root) {

  function Control(len) {
    this.index = 0;
    this.len = len;
  }

  Control.prototype = {
    pre: function() {
      return this.getIndex(-1);
    },
    next: function() {
      return this.getIndex(1);
    },
    // 计算改变后的索引
    getIndex : function (val) {
      var index = this.index;
      
      var len = this.len;
      // 这真是秀懵逼了.
      var curIndex = (index + val + len) % len;
      this.index = curIndex;
        return curIndex;
    }
  }

  root.controlIndex = Control;
})(window.Zepto, window.player || (window.player = {}));

index.js

var root = window.player;
//var nowIndex = 0;
var dataLength = null;
var dataclone;
var url = '../mock/data.json';

var audio = root.audioManager;

var control;

root.gaussBlur = gaussBlur;

function getData(url) {
  $.ajax({
    type: "GET",
    url: url,
    async: true,
    success: function(data) {
      console.log(data[2]);
      dataLength = data.length;
      dataclone = data;
      control = new root.controlIndex(dataLength);
      var i = control.index;
      console.log(i);
      root.render(data[i]);
      audio.getAudio(data[i].audio);
      bindEvent();
    },
    error: function() {
      console.log("error");
    }
  });
}

function bindEvent() {
  $(".pre").on('click', function() {
//  if(nowIndex == 0) {
//    nowIndex = dataLength - 1;
//  } else {
//    nowIndex--;
//  }

    var i = control.pre();
    audio.getAudio(dataclone[i].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[i]);
  });
  $(".next").on('click', function() {
//  if(nowIndex == dataLength - 1) {
//    nowIndex = 0;
//  } else {
//    nowIndex++;
//  }
    var i = control.next();
    audio.getAudio(dataclone[i].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[i]);
  });

  $(".play").on('click', function() {
    // 图案变成 暂停
    // 音乐停止播放
    // 图片停止旋转.

    if(audio.state == 'play') {
      $(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
      audio.pause();
    } else if(audio.state == 'pause') {
      $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
      audio.play();
    }

  })
}

getData("../mock/data.json");

---

step7
bindEvent 切歌,进一步优化
接着懵逼

  $("body").on('play:changed',function (e,index) {
    audio.getAudio(dataclone[index].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[index]);
    
  })
  
  $(".pre").on('click', function() {
    var i = control.pre();
    $("body").trigger('play:changed',i);
  });
  $(".next").on('click', function() {
    var i = control.next();
    $("body").trigger('play:changed',i);
  });

这里有个疑问, 为什么不这样写?
虽然暂时还没看出来好在哪里,但肯定是有好处的.
而且看起来很高级.
问题应该改成, 自定义事件有什么用处?

  function playchanged (index) {
    audio.getAudio(dataclone[index].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[index]);
  }
  
  $(".pre").on('click', function() {
    var i = control.pre();
    playchanged(i);
  });
  $(".next").on('click', function() {
    var i = control.next();
    playchanged(i);
  });

---

step 8
加入旋转

var root = window.player;
//var nowIndex = 0;
var dataLength = null;
var dataclone;
var url = '../mock/data.json';

var audio = root.audioManager;

var control;

var timer;

root.gaussBlur = gaussBlur;

function getData(url) {
  $.ajax({
    type: "GET",
    url: url,
    async: true,
    success: function(data) {
      console.log(data[2]);
      dataLength = data.length;
      dataclone = data;
      control = new root.controlIndex(dataLength);
      var i = control.index;
      console.log(i);
      root.render(data[i]);
      audio.getAudio(data[i].audio);
      bindEvent();
    },
    error: function() {
      console.log("error");
    }
  });
}

function bindEvent() {
  
  function playchanged (index) {
    audio.getAudio(dataclone[index].audio);
    audio.play();
    $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
    root.render(dataclone[index]);
    rotate();
    
    $(".img-box").css({
        'transform' : 'rotateZ(0deg)',
        'transition' : 'none'
      });
  }
  
  $(".pre").on('click', function() {
    var i = control.pre();
    playchanged(i);
  });
  $(".next").on('click', function() {
    var i = control.next();
    playchanged(i);
  });

  $(".play").on('click', function() {
    // 图案变成 暂停
    // 音乐停止播放
    // 图片停止旋转.

    if(audio.state == 'play') {
      $(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
      audio.pause();
//    var reg = /\d+/g;
//    var deg = $(".img-box").css('transform').match(reg)[0];
//    $(".img-box").attr('data-deg',deg);
      clearInterval(timer);
    } else if(audio.state == 'pause') {
      $(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
      audio.play();
      rotate();
    }

  })
}


function rotate () {
    clearInterval(timer);
//  var deg = Number($(".img-box").attr('data-deg')) || 0;
    var deg = 0;
    timer = setInterval(function () {
      deg += 2;
        $(".img-box").css({
          'transform' : 'rotateZ(' + deg +'deg)',
          'transition' : 'transform .2s ease-in-out'
        });
    },200);
}

getData("../mock/data.json");