H5Web Audio API 以及CSS3新单位知识分享

作者: 韩_小文 | 来源:发表于2017-07-13 17:24 被阅读0次

（1）HTML5 Web Audio API 添加声音

对简单或复杂的声音进行混合；
精确控制声音的密度和节奏；
内置淡入/淡出，颗粒噪点，音调控制等效果；
灵活的处理在音频流的声道，使它们成为拆分和合并；
处理从<audio>音频或<video>视频的媒体元素的音频源；
使用MediaStream的getUserMedia()方法事实处理现场输入的音频，例如变声；
立体音效，可以支持多种3D游戏和沉浸式环境；
利用卷积引擎，创建各类线性音效，例如小/大房间、大教堂、音乐厅、洞穴、隧道、走廊、森林、圆形剧场等。尤其适用于创建高质量的房间效果。
高效的实时的时域和频分析，配合CSS3或Canvas或webGL可以实现音乐可视化支持；
以及其他多种音频波形算法控制，几乎就是把一个音频编辑类软件搬到web上。

#######最直接有效：可以直接产生声音，并且可以随意控制音调，时长以及淡入淡出等效果

window.AudioContext = window.AudioContext || window.webkitAudioContext;

(function () {
    if (!window.AudioContext) { 
        alert('当前浏览器不支持Web Audio API');
        return;
    }

    // 按钮元素
    var eleButton = document.getElementById('button');
    
    // 创建新的音频上下文接口
    var audioCtx = new AudioContext();
    
    // 发出的声音频率数据，表现为音调的高低
    var arrFrequency = [100, 2000, 300, 196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99, 880.00, 987.77, 1046.50];
    
    // 音调依次递增或者递减处理需要的参数
    var start = 0, direction = 1;
    
    // 鼠标hover我们的按钮的时候
    eleButton.addEventListener('click', function () {
        // 当前频率
        var frequency = arrFrequency[start];
        // 如果到头，改变音调的变化规则（增减切换）
        if (!frequency) {
            direction = -1 * direction;
            start = start + 2 * direction;
            frequency = arrFrequency[start];
        }
        // 改变索引，下一次hover时候使用
        start = start + direction;
        
        // 创建一个OscillatorNode, 它表示一个周期性波形（振荡），基本上来说创造了一个音调
        var oscillator = audioCtx.createOscillator();
        // 创建一个GainNode,它可以控制音频的总音量
        var gainNode = audioCtx.createGain();
        // 把音量，音调和终节点进行关联
        oscillator.connect(gainNode);
        // audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备
        gainNode.connect(audioCtx.destination);
        // 指定音调的类型，其他还有square|triangle|sawtooth
        oscillator.type = 'sawtooth';
        // 设置当前播放声音的频率，也就是最终播放声音的调调
        oscillator.frequency.value = frequency;
        // 当前时间设置音量为0
        gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
        // 0.01秒后音量为1
        // audioCtx.currentTime，其值是以双精度浮点型数字返回硬件调用的秒数,这个时间无法改变的，无论是
        // 暂停或者重置都不可以
        gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
        // 音调从当前时间开始播放
        oscillator.start(audioCtx.currentTime);
        // 1秒内声音慢慢降低，是个不错的停止声音的方法
        gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
        // 1秒后完全停止声音
        oscillator.stop(audioCtx.currentTime + 1);
    });
})();

image.png

https://codepen.io/gregh/embed/LxJEaj?height=256&theme-id=0&default-tab=result&embed-version=2

（2）CSS新单位

2.1基于vw等viewport视区单位配合rem响应式排版和布局

vw – 视区宽度百分值
vh – 视区高度百分值
vmin – vw或vh，取小的那个
vmax – vw或vh，取大的那个

兼容性

image.png

JS实现自适应REM

function setRootFontSize () {
  const xViewport = window.innerWidth;
  const maxWidth = xViewport > 414 ? 414 : xViewport;
  const fs = maxWidth / 3.75;
  window.document.documentElement.style.fontSize = `${fs}px`;
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);

纯CSS实现自适应REM

html {
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

image.png

水平居中布局与滚动条跳动

当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~
https://shangmiyun.com/#/account/login?backPath=%2F
http://www.zhangxinxu.com/study/201501/body-scrollbar-no-jump.html
1
1
1
1
1
1
1
1
1
1
1
1

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

首先，.wrap-outer指的是居中定宽主体的父级
然后，calc是CSS3中的计算，IE9+浏览器支持
最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器，从而没有任何跳动！

2.2 ch单位与等宽字体

对比：
iiiiii
mmmmmm

iiiiii
mmmmmm

1ch表示一个0字符的宽度，所以000000所占据的宽度就是6ch。此单位，基本上，必须与等宽字体一起使用才有用。

应用：打点动画

image.png

（3）了解CSS/CSS3原生变量var

由less/sass的用法联想到这个东西，感觉这两个东西最大的好处就是可以定义CSS变量，以提供给其他页面复用，于是有了var将迎刃而解并且是原生的。

#######兼容性

image.png

#######作用域
#######CSS变量使用完整语法
CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? ),但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文

image.png

.box {
  --1: #369;
}
body {
  background-color: var(--1, #cd0000);
}

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

请问，此时<body>的背景色是？

A. transparent B. 20px C. #369 D. #cd0000

body {
  --size: 20;   
  font-size: var(--size)px;
}

.
.
.
.
等于 font-size:20 px
.
.
..

body {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}

#######变量定义时可传递

.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}

#######可以用JS修改

:root {
  --颜色: cornflowerblue;
}

h1 { color: var(--颜色); }  
a { color: var(--颜色); }  
strong { color: var(--颜色); }

const rootEl = document.documentElement;  
rootEl.style.setProperty('--颜色', 'plum');

image.png

（4）@supports 操作符

众所周知，不同的浏览器（不管是现代浏览器还是老版本的IE浏览器）对Web页面的解析都是不一样，为了让Web页面在这些浏览器下渲染达到基本一致的情况，给用户更好的体验，我们必须为他们写不同的样式代码。CSS3 Conditional Rules Module Level 3推出了“@supports”条件判断规则，它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式。

image.png

@supports not (display: flex){ #container div{float:left;}}

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级：
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { // ...}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) { // ...}

#######JS支持
在javascript中支持css的@supports的写法是“window.CSS.supports”。CSS.supports规范提供了两种写法

var supportsFlex = CSS.supports("display", "flex");

var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)")

（5）CSS3 filter:drop-shadow滤镜与box-shadow区别应用

box-shadow: h-shadow v-shadow blur spread color inset;
filter: drop-shadow(h-shadow v-shadow spread color);

image.png

内阴影

image.png

盒阴影 VS 真正意义的阴影

image.png

应用：图片非透明区域变色

image.png

.test4{
            width: 100px;
            height: 100px;
            position: relative;
            left: -100px;
            background: url(./icon3.png) no-repeat;
            background-size: 100% 100%;
            filter: drop-shadow(red 100px 0px);
            border-right: 100px solid transparent;
        }
        .test{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            overflow: hidden;
        }
在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。