美文网首页
3. qq音乐练习 2 js

3. qq音乐练习 2 js

作者: wudimingwo | 来源:发表于2018-12-01 23:59 被阅读0次

模拟的后台数据,,还是要好好学一下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");

相关文章

  • 3. qq音乐练习 2 js

    模拟的后台数据,,还是要好好学一下mockdata.json 17.canvas 高斯模糊封装 step1rend...

  • 原生JS实现QQ音乐

    QQ-music 使用原生 JS 实现 QQ 音乐 项目模块： (1) 推荐页面(2) 热门列表(3) 搜索歌曲(...

  • ICON练习 2015-11-11

    1.学习iOS7图标规范 2.学习案例 3.作业 临摹QQ音乐图标作为Basic，练习利用基本形状构型和平衡 模仿...

  • QQ音乐刷播放量，粉丝量，点赞，QQ音乐如何刷粉丝量

    qq音乐刷播放次数，QQ音乐刷播放量，微信youtui2 刷QQ音乐关注人数，粉丝量，qq音乐刷听歌时间，qq音乐...

  • 2019-04-30

    1.solo练习圆三角方形 2.grow move 先音乐再beat 73开 3.音乐风格了解 4.基本功练习，元...

  • 米咪家的音乐课课堂反馈4月26日

    今日课程 1.热身游戏——音乐的长与短《拍蚊子》 2.稳定拍与节奏练习《叫名字》 3.音乐故事《小熊一家》 3.复...

  • 2. qq音乐练习 1 html + css

    htmlstep1 step2 lessstep 1 知识点, 如何实现一个自适应的正方形?以及 子级如何实现 w...

  • JS作用域的练习

    Js作用域练习demo1 Js作用域练习demo2 JS作用域练习demo3 JS作用域练习demo4 JS作用域...

  • 100天训练营03

    1.《易经》第17课 2.舞动两首音乐 3.自我觉察~情结练习——女人

  • JS + Git 测试小练习

    作业链接 js 基础练习js 扩展练习（section-1 & section-2） 提交记录 练习收获 这次作...

网友评论

      本文标题：3. qq音乐练习 2 js

      本文链接：https://www.haomeiwen.com/subject/xwqrcqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|3. qq音乐练习 2 js|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！