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");

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342

3. qq音乐练习 2 js

推荐阅读更多精彩内容