管理 与 吹比

百度链接  https://www.baidu.com/s?wd=%E5%AD%99%E4%B9%89%E6%96%87%20%E8%AF%BE%E7%A8%8B&pn=10&oq=%E5%AD%99%E4%B9%89%E6%96%87%20%E8%AF%BE%E7%A8%8B&ie=utf-8&rsv_pq=f44c4194000227d4&rsv_t=ecd2WKihSxR3MziGSEpau527%2Bl8L2VS0VY9nBcpD18u%2FsYAFv0QWywQJHPA&rsv_page=1 孙一文的吹比 看喜马拉雅的录音

html audio

背景需求

公司的某个系统需要提示音,所以研究下音频播放

提示音因为简单,所以不打算上音频库,于是自己写一小段js.

需求:

  • 播放指定音频
  • 连续有序播放指定某些音频

资源

w3school

某大佬博客 基本函数,属性,时间参见这

MDN中audio

一堆插件

想法

在需求中的需求2,可以通过音频连接实现,但是没有意义的消耗计算性能

所以通过音频的连续播放实现

实现

在Audio对象播放完成后会出发ended事件,这时候顺手播放下一个

代码

 

var playOrder = function(){
  // TODO 
  // 异常处理
  this.files = {};
  this.filesConfig = {}
  this.orders = {};
  this.voiceChain = []
  this.setFiles = function(filesConfig){
    this.filesConfig = filesConfig;
  }
  this.setOrders = function(ordersConfig){
    this.orders = ordersConfig;
  }
  this.loadfiles = function(){
    for (file in this.filesConfig){
      var temp = new Audio(this.filesConfig[file]);
      if (temp.error == null){
        this.files[file] = temp;
      }else if (temp.error.code == 4){
        // error code 4 : wrong url
        consle.log("load file " + file + " failed");
      }
    }
  }
  var combile = function(voiceChain){
    function getNext(a,voiceChain){
      for (var i =  0; i < voiceChain.length; i++){
        if (voiceChain[i] == a && i < voiceChain.length){
          return voiceChain[i+1];
        }
      }
      return false;
    }
    var l = voiceChain.length;
    for (var i = 0; i < l-1; i++){
      var temp = voiceChain[i+1]
      //播放结束时添加下一个
      voiceChain[i].addEventListener("ended",function(e){
        //获得下一个文件
        var nextAudio = getNext(e.target,voiceChain);
        if (!nextAudio){
          console.log("last");
        }else{
          nextAudio.play();
        }
      });
    }
    return voiceChain[0];
  }
  // 如果需要间隔,可以在这里加settimeout,因为连续播放时基于时间的,所以settimeout不会遇到异步流程控制的问题
  this.getOrder = function(order){
    if (!(order in this.orders)){
      return false;
    }
    var arr = this.orders[order];
    //检查文件载入
    for (audio in arr){
      if (!(arr[audio] in this.filesConfig)){
        return false;
      }
    }
    //生成播放序列
    this.voiceChain = null
    this.voiceChain = []
    for (audio in arr){
      // 从缓存中加载 或者直接加载
      this.voiceChain.push(new Audio(this.filesConfig[arr[audio]]));
    }
    return combile(this.voiceChain);
  }
  this.playOrder = function(order){
    var start = this.getOrder(order);
    if (start){
      start.play();  
      //释放内存
      this.voiceChain = null
      this.voiceChain = []
      return true;
    }else{
      //释放内存
      this.voiceChain = null
      this.voiceChain = []
      return false;
    }
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>audio play demo</title>
  <meta name="name" content="content" charset="utf-8">
</head>
<body>
  <script type="text/javascript" src="playOrder.js"></script> 
  <script type="text/javascript">
    files = {
      "a1": "./wav/1.wav",
      "a2": "./wav/2.wav",
      "a3": "./wav/3.wav",
      "a4": "./wav/4.wav"
    }
    orders = {
      "234": ["a2","a3","a4"],
      "432": ["a4","a3","a2"],
      "23333": ["a2","a3","a3","a3","a3"]
    }
    var player = new playOrder();
    player.setFiles(files);
    player.setOrders(orders);
    //load files 非必要
    player.loadfiles();
    player.playOrder("432");
  </script>
</body>
</html>

ng-grid 宽度显示不正常/初始化不正常的问题

问题描述:

ng-grid在使用ng-show的时候回初始化不正常,导致宽度成为默认宽度(我这是100px,github上说10%,具体见源码ng-style=”viewport()”)

在查看元素的时候发现元素宽度十分不正常

问题解决

样式(宽度不正常):http://stackoverflow.com/questions/15523959/ng-grid-does-not-take-100-width-on-page-load-but-shows-fine-on-resize

解决办法:

  • 使用ng-if重新加载元素,相当于重新初始化
  • 触发父元素的resize事件,使用jquery实现$(“.father”).resize()),简单方便快捷,一次使用,终身有效(所以只resize一次就好),触发时间自定

 

flex布局

看的最明白的是阮一峰大神的教程

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

好处:

  • 响应式
  • 定位方便
  • 自动填充空闲(十分重要)

对于这一点谈谈一下

WordPress_background

如上图,我们要实现左边的菜单栏的伸缩.

一般实现:点击收缩的时候触发事件,改变右边的width,同时显示左边

flex实现:隐藏左端,右端由flex-shrink自动填充

吃的心得

学会享受人生首先要学会享受吃,最根本的是要满足自己心里的欲望。比如自己想吃肉,就去吃肉。但是人是有理智的,理智要学会告诉自己怎么吃才能到达最大的收益(边际效益为0)或者最大的性价比(编辑效益最大),直观的说就是吃的爽和吃的合算。

另外吃的时候一定要细嚼慢咽。想高考那时候赶时间的吃并不能称作吃,只能算作是饱腹。吃的时候要享受食物的口感,色香味。

—-2017.2.3