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>

flex布局

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

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

好处:

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

对于这一点谈谈一下

WordPress_background

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

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

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

css position absolute

图解

父元素在默认情况下是position: static;就是静态定位,这时候如果子元素使用position: absolute;,那么子元素就会跳出父元素的范围,进入父元素的父元素范围,如果父元素的父元素依然是position: static;,那么就会继续跳出这个范围,一直到遇到一个position: absolute;或者position: relative;的祖先元素,才会在这个祖先元素的范围内进行定位布局。
如果子元素是position: absolute;,子元素的祖先元素都是position: static;,那么子元素就会不停往上跳出祖先元素的范围,直到body,然后在body内进行定位布局。
https://zhidao.baidu.com/question/1881998502829437508.html