【JS】136-重温基础：WebAPI介绍

本文是 重温基础 系列文章的第十七篇。 今日感受：挑战。

本章节复习的是JS中的关于WebAPI相关知识，介绍的API比较多。

前置知识：
需要了解 JS 对象 的相关知识。

1.WebAPI介绍

API：应用程序接口，是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

客户端JavaScript提供很多可用的API，他们本身不是JavaScript语言的一部分，却建立在JavaScript语言核心的顶部，为使用JavaScript代码提供额外的超强能力。他们通常分为两类：

• 浏览器API：
  内置于Web浏览器，可以从浏览器和电脑周围环境获取数据，并用于复杂的操作。例如 ​​GeolocationAPI​​提供了一些简单的JavaScript结构来获取位置数据，这种API通常抽象很多复杂逻辑，我们只要调用API即可。
  
• 第三方API：
  缺省情况下不会内置于浏览器，而必须在Wen中某个地方获取代码和信息，例如 ​​Twitter API​​可以推送最新推文给我们，它提供一系列第三方API让我们获取Twitter的服务和信息。
  

1.1 API如何工作

那么，这些API是如何工作的？
不同的JavaScript的API工作内容不同，但具有以下几个相同点：

1. 都是基于对象
   API通过使用一个或多个JavaScript对象与我们的代码交互，这些对象作为API使用的数据（包含在对象属性中）的容器，和API提供的功能（包含在对象的方法中）。
   如 ​​​Geolocation API​​则是由以下几个对象组成：

• ​​Geolocation​​, 包含三种控制地理数据检索的方法。
• ​​Position​​​, 表示在给定的时间的相关设备的位置。它包含一个当前位置的 ​​Coordinates​​ 对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。
• ​​Coordinates​​,包含有关设备位置的大量有用数据，包括经纬度，高度，运动速度和运动方向等。

通常这么使用：

1. ​​navigator.geolocation.getCurrentPosition(function(options){​​
2. ​​    // ... do something​​
3. ​​});​​
4. 都有可识别的入口点 即API的入口位置，如 ​​Geolocation API​​​的入口在 ​​Navigator.geolocation​​ 属性, 它返回浏览器的 ​​Geolocation​​ 对象，所有有用的地理定位方法都可用。
   在文档对象模型(DOM)的API入口位置更简单，常常都挂载在 ​​Document​​对象上，或者 ​​HTML​​元素上：
5. ​​let a = document.createElement('div');// 创建一个新的div元素​​
6. ​​let b = document.querySelector('div');// 获取一个已经存在的div元素​​
7. ​​a.textContent = "hi leo!";  // 给a元素设置文本​​
8. ​​b.appendChild(a);           // 将a元素添加到b元素下​​
9. ​​// <div>hi leo!</div>​​

详细的后面介绍。

1. 都使用事件来处理状态的变化 有些特定的API会包含一些事件，当事件触发，我们便可以运行函数的处理属性，做一些不同的操作。例如 ​​XMLHttpRequest​​对象的实例，有很多的事件可以调用。
2. ​​// 简单写​​
3. ​​const url = "https://www.baidu.com";​​
4. ​​const req = new XMLHttpRequest();​​
5. ​​req.open('GET', url);​​
6. ​​req.responseType = "json";​​
7. ​​req.send();​​
8. ​​req.onload = function(){​​
9. ​​    // ... do something​​
10. ​​}​​
11. 都会在适当位置提供额外的安全机制 主要还是处于安全考虑，提供额外的安全机制，比如常见同源策略，一些特定页面只能在https协议的网页工作等。

接下来看看这些API都能实现什么作用。

2.文档API

我们在开发web页面和应用时，就会经常操作页面文档的结构，这里就会大量用到 ​​document​​对象，控制HTML和样式信息的文档对象模型（DOM）。

下面贴一张web页面视图中的浏览器的主要部分（来源MDN）：

介绍：

• ​​window​​​：是载入浏览器的标签，JavaScript中用 ​​Window​​对象表示，可以实现很多操作：获取窗口大小，操作载入窗口的文档，存储文档数据等。
• ​​navigator​​​：浏览器存在web上的状态和表示（即用户代理），JavaScript中用 ​​Navigator​​对象表示，用于获取对象的一些信息，如：摄像头的地理信息，用户偏爱的语言等。
• ​​document​​​：是实际载入窗口的页面，JavaScript中用 ​​Document​​对象表示，可以实现很多文档操作：获取DOM元素，修改文本内容，设置新样式等。

2.1 文档对象模型(DOM)

在浏览器标签中当前载入的文档用文档对象模型(Document Object Model，简称DOM)表示。
这是一个由浏览器生成的“树结构”，使得编程语言可以很容易访问HTML结构，操作等。

下面是基本的DOM操作：

1. ​​let a = document.createElement('a');// 1. 创建一个新的a元素​​
2. ​​let b = document.querySelector('a');// 2. 获取一个已经存在的a元素​​
3. ​​a.textContent = "进入pingan8787博客";  // 3. 给a元素设置文本​​
4. ​​a.href = "http://www.pingan8787.com"; // 4. 给a元素添加跳转地址​​
5. ​​a.style.color = "red";                // 5. 给a元素添加样式​​
6. ​​a.style.backgroundColor = "black";​​
7. ​​a.setAttribute("my_class");    // 6. 给a元素添加class类名​​
8. ​​b.appendChild(a);              // 7. 将a元素添加到b元素下​​

这么一个简单的例子，实际可以看出DOM提供的方法很多，下面分类介绍下这些方法：

1. DOM HTML操作

• 改变HTML输出流：
  通过 ​​​document.write()​​直接修改HTML输出流写内容。

2. ​​document.write("hello leo");​​

注意：千万不要在文档加载之后使用，否则覆盖文档。

• 改变HTML内容：
  通过 ​​​innerHTML​​属性来改变HTML元素的内容：

1. ​​document.getElementById(id).innerHTML = new HTML;​​
2. ​​// 通过ID获取  （getElementById）​​
3. ​​// 通过name属性（getElementsByName）​​
4. ​​// 通过标签名  （getElementsByTagName）​​
5. ​​// 通过类名    （getElementsByClassName）​​
6. ​​// 获取html的方法 （document.documentElement）​​
7. ​​// 获取body的方法 （document.body）​​
8. ​​// 通过选择器获取一个元素（querySelector）​​
9. ​​// 通过选择器获取一组元素（querySelectorAll）​​

例子：

1. ​​document.getElementById("id1").innerHTML = "hello leo!"​​

• 改变HTML属性：
  通过 ​​​attribute​​属性来改变元素的属性：

2. ​​document.getElementById(id).attribute = new value​​

例子：

1. ​​<img id = "id1" src ="a.jpg">​​
2. ​​document.getElementById("id1").src = "leo.png";​​

详细的文档可以查看HTML DOM Document 对象

1. DOM CSS操作

• 改变HTML样式
  通过 ​​​style.styleName​​属性修改元素的样式：

2. ​​document.getElementById(id).style.property = new style;​​

例子：

1. ​​document.getElementById("id1").style.color = "red";​​
2. ​​document.getElementById("id1").style.backgroundColor = "green";​​

注意： ​​style​​后面的样式的属性名只能使用命名小驼峰。

1. DOM 事件操作
   如要对元素做点击事件的绑定，可以在HTML的 ​​​onclick​​事件属性上绑定方法：
2. ​​<div onclick="fun()"></div>​​
3. ​​<div onclick="fun(prams)"></div>​​

另外可以绑定的事件类型还有很多：

1. ​​<div onload="fun()"></div>​​
2. ​​<div onchange="fun()"></div>​​
3. ​​<div onmouseover="fun()"></div>​​
4. ​​<div onmousedown="fun()"></div>​​

详细的文档可以查看HTML DOM Event 对象

1. DOM 节点操作

• 创建新的HTML元素
  需要先创建一个新元素节点，然后在使用 ​​​appendChild​​方法，向一个已存在的元素上追加这个新元素：

2. ​​<div id = "id1"></div>​​
3. ​​// 创建新元素节点​​
4. ​​let a = document.createElement('p');​​
5. ​​let b = document.createTextNode('新的文本');​​
6. ​​a.appendChild(b);​​
7. 
   
8. ​​// 获取已存在元素​​
9. ​​let div = document.getElementById('id1');​​
10. 
    
11. ​​// 追加新元素​​
12. ​​div.appendChild(a);​​

• 删除已有的HTML元素
  如果需要删除HTML元素，就必须先获得该元素的父元素，再使用 ​​​removeChild​​方法删除：

13. ​​<div id = "id1">​​
14. ​​    <p id = "id2">hello leo</p>​​
15. ​​</div>​​
16. ​​let a = document.getElementById("id1");​​
17. ​​let b = document.getElementById("id2");​​
18. ​​a.removeChild(b);​​

2.2 Window对象

Window 对象表示浏览器中打开的窗口。
Window 对象涉及到的属性和方法非常多，具体可以查看 Window 对象 比较详细。
这里一个简单的例子，实现获取视窗（显示文档的内部窗口）的宽高，并设置给指定的Div元素，并且当我们调整窗口时候，也会及时改变Div的宽高。

1. ​​let div = document.querySelector('div');​​
2. ​​// 获取宽高​​
3. ​​let w = window.innerWidth;​​
4. ​​let h = window.innerHeight;​​
5. ​​// 设置宽高​​
6. ​​div.style.width = w + 'px';​​
7. ​​div.style.heitgh = h + 'px';​​
8. ​​// 设置及时调整div宽高​​
9. ​​window.onresize = function(){​​
10. ​​    w = window.innerWidth;​​
11. ​​    h = window.innerHeight;​​
12. ​​    div.style.width = w + 'px';​​
13. ​​    div.style.heitgh = h + 'px';​​
14. ​​}​​

3.获取服务器数据API

这一部分主要复习 ​​Ajax​​​（全称：Asynchronous JavaScript and XML）。
​​​Ajax​​​主要要解决的问题是：避免重复加载刷新整个页面，因为有时候我们只是小部分数据更新，这时候我们这要刷新这部分的数据，而不是整个页面。
​​​Ajax​​不是新的编程语言，而是一种使用现有标准的新方法。

下面看一下Ajax模型图：

Ajax模型包括使用Web API作为代理来更智能地请求数据，而不仅仅是让浏览器重新加载整个页面。让我们来思考这个意义：
比如：我们逛淘宝，搜索或打开商品页面时，顶部导航来和页眉页脚等，都保持不变。
这样做的好处：

• 页面更新更快，减少等待刷新，体验更好，响应更快。
• 下载的数据更少，减少带宽的浪费。

另外为了提高加载速度，网站有时候也会将首次请求和数据存储在用户计算机中，下次再请求就直接先使用本地版本，如果内容有更新才会去服务器获取新数据，原理图：

3.1 Ajax基础使用

​​XMLHttpRequest​​​ 是 ​​AJAX​​​ 的基础。 所有现代浏览器均支持 ​​​XMLHttpRequest​​​ 对象（IE5 和 IE6 使用 ​​ActiveXObject​​）。

创建 ​​XMLHttpRequest​​ 对象的语法：

1. ​​variable=new XMLHttpRequest();​​
2. ​​// IE5 和 IE使用 ActiveX 对象：​​
3. ​​variable=new ActiveXObject("Microsoft.XMLHTTP");​​

为了兼容所有浏览器（包括IE5 IE6），我们就必须检查浏览器是否支持 ​​XMLHttpRequest​​​对象，若支持则创建 ​​XMLHttpRequest​​​对象，否则创建 ​​ActiveXObject​​对象。

1. ​​let my_http;​​
2. ​​if (window.XMLHttpRequest){​​
3. ​​    // 非 ES5 ES6​​
4. ​​    my_http=new XMLHttpRequest();​​
5. ​​    if (xmlhttp.readyState==4 && xmlhttp.status==200){​​
6. ​​        // 网络请求成功后，执行的操作​​
7. ​​    }​​
8. ​​  }​​
9. ​​}else{​​
10. ​​    // ES5 ES6​​
11. ​​    my_http=new ActiveXObject("Microsoft.XMLHTTP");​​
12. ​​}​​

3.2 Ajax发送请求

向服务器发送请求时，我们可以使用 ​​XMLHttpRequest​​​ 对象的 ​​open()​​​ 和 ​​send()​​ 方法：

1. ​​my_http.open(method,url,async);  ​​
2. ​​my_http.send(string);​​

参数解释：
​​​open(method,url,async)​​方法接收三个参数：

• ​​method​​​：请求的类型； ​​GET​​ 或 ​​POST​​。
• ​​url​​：文件在服务器上的位置。
• ​​async​​​： ​​true​​（异步）或 ​​false​​（同步）。

​​send(string)​​方法接收一个参数：

• ​​string​​​：仅用于 ​​POST​​ 请求。

例子：

1. ​​// GET​​
2. ​​my_http.open("GET","http://www.baidu.com",true);​​
3. ​​my_http.send();​​
4. 
   
5. ​​// POST​​
6. ​​my_http.open("POST","http://www.baidu.com",true);​​
7. ​​my_http.setRequestHeader(​​
8. ​​    "Content-type",​​
9. ​​    "application/x-www-form-urlencoded"​​
10. ​​);  // 添加 HTTP 头​​
11. ​​my_http.send("name=leo");​​

如果POST请求的话需要设置HTTP头：

1. ​​setRequestHeader(header,value)​​

参数解释：
​​​setRequestHeader(header,value)​​方法接收两个参数：

• ​​header​​: 规定头的名称。
• ​​value​​: 规定头的值。

3.3 Ajax服务器响应

接收服务器响应，我们可以使用 ​​XMLHttpRequest​​​ 对象的 ​​responseText​​​ 或 ​​responseXML​​ 属性。

• ​​responseText​​​：获得 ​​字符串形式​​的响应数据。
  
• ​​responseXML​​​：获得 ​​XML​​ 形式的响应数据。
  
• responseText属性当服务端的响应不是XML，使用 ​​responseText​​属性。
  若是字符串的响应就可以直接使用。
  

1. ​​document.getElementById("id1").inndeHTML = my_http.responseText;​​

3.4 Ajax readyState

​​readyState​​​保存着 ​​XMLHttpRequest​​​对象的状态。
我们发送Ajax请求的整个过程中， ​​​XMLHttpRequest​​​对象的 ​​readyState​​​会改变，当 ​​readyState​​​改变的时候会触发 ​​onreadystatechange​​事件。

​​XMLHttpRequest​​对象的三个重要属性：

通常我们会在 ​​readyState​​​等于4且 ​​status​​等于200时候表示响应已就绪，可以执行业务操作：

1. ​​if (xmlhttp.readyState==4 && xmlhttp.status==200){​​
2. ​​    // 网络请求成功后，执行的操作​​
3. ​​}​​

4.图形绘制API

这里主要介绍的是HTML5新增的 ​​canvas​​​元素，JavaScript为 ​​canvas​​​添加了很多API，进一步增强 ​​canvas​​​。
​​​canvas​​​ 元素可以通过JavaScript脚本，在网页上绘制图形。
比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持 ​​​canvas​​元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。

详细完整的课程推荐：

1. MDN Canvas教程
2. W3C HTML5 Canvas

下面复习一下 ​​canvas​​的一个使用流程：

4.1 简单绘制

1. 创建画布，规定元素id、宽度和高度

要在网页中创建 2D 或者 3D 场景，必须在 HTML 文件中插入一个 ​​canvas​​元素，以界定网页中的绘图区域。

1. ​​<canvas id="id1" width="200" height="100">​​
2. ​​    卧槽你的浏览器竟然不支持 canvas！​​
3. ​​</canvas>​​

在 ​​canvas​​​标签内，写一些浏览器不支持画布功能时候的提示内容。
画布默认尺寸为 300 × 150 像素。

1. 获取画布上下文，并完成设置

我们需要获得一个对绘画区域的特殊的引用（称为“上下文”）用来在画布上绘图。可通过 ​​HTMLCanvasElement.getContext()​​​ 方法获得基础的绘画功能，需要提供一个字符串参数来表示所需上下文的类型。
下面创建一个2d画布：

1. ​​let ctx = canvas.getContext("2d");​​

​​ctx​​​ 变量包含一个 ​​CanvasRenderingContext2D对象​​​，画布上所有绘画操作都会涉及到这个对象。
下面将画布背景涂黑：

1. ​​ctx.fillStyle = 'rgb(0, 0, 0)';​​
2. ​​ctx.fillRect(0, 0, 200, 100);​​

4.2 绘制基础

首先需要知道一些2D画布的知识，画布左上角的坐标是(0, 0)，横坐标（x）轴向右延伸，纵坐标（y）轴向下延伸。

1. 绘制实线
2. ​​ctx.lineTo(100,50);  // 绘制目标坐标​​
3. ​​ctx.lineWidth = 5;   // 线条宽度​​
4. ​​ctx.stroke();  // 绘制实线​​

1. 绘制矩形
   ​​​fillRect(x, y, width, height)​​​ 绘制一个填充的矩形
   ​​strokeRect(x, y, width, height)​​ 绘制一个矩形的边框
   ​​clearRect(x, y, width, height)​​ 清除指定矩形区域，让清除部分完全透明。
   x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
   width和height设置矩形的尺寸。
2. ​​// 实心矩形​​
3. ​​ctx.fillStyle = 'rgb(255, 0, 0)'; // 矩形颜色​​
4. ​​ctx.fillRect(50, 50, 100, 150);   // 矩形起止坐标​​
5. 
   
6. ​​// 空心矩形​​
7. ​​ctx.strokeStyle = 'rgb(255, 255, 255)';// 矩形边框颜色​​
8. ​​ctx.strokeRect(25, 25, 175, 200);// 矩形起止坐标​​
9. 绘制路径 可以通过路径来实现复杂的图形，下面整理了一些常用到的方法：

• ​​beginPath()​​：在画笔当前所在位置开始绘制一条路径。在新的画布中，画笔起始位置为 (0, 0)。
• ​​moveTo()​​：将画笔移动至另一个坐标点，不记录、不留痕迹，只将画笔“跳”至新位置。
• ​​fill()​​：通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。
• ​​stroke()​​：通过为当前绘制路径的区域描边，来绘制一个只有边框的形状。
• 路径也可和矩形一样使用 ​​lineWidth​​​ 和 ​​fillStyle​​ / ​​strokeStyle​​ 等功能。

10. ​​ctx.fillStyle = 'rgb(255, 0, 0)'; // 设置填充颜色​​
11. ​​ctx.beginPath();      // 开始​​
12. ​​ctx.moveTo(50, 50);   // 移动到结束点的坐标​​
13. ​​// .. 可以在到处移动​​
14. ​​ctx.fill();           // 绘制​​
15. 绘制圆形
    ​​​arc(x, y, radius, startAngle, endAngle, anticlockwise)​​​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
    ​​arcTo(x1, y1, x2, y2, radius)​​ 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

​​arc​​方法，该方法有六个参数：

• ​​x,y​​为绘制圆弧所在圆上的圆心坐标。
• ​​radius​​为半径。
• ​​startAngle​​​以及 ​​endAngle​​参数用弧度定义了开始以及结束的弧度。
• ​​anticlockwise​​​是布尔值，为true时，是逆时针方向，否则顺时针方向。
  这些都是以x轴为基准。

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。

1. ​​cxt.fillStyle="#FF0000";​​
2. ​​cxt.beginPath();​​
3. ​​cxt.arc(70,18,15,0,Math.PI*2,true);​​
4. ​​cxt.closePath();​​
5. ​​cxt.fill();​​
6. 绘制文本
   ​​​fillText(text, x, y [, maxWidth])​​​ 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
   ​​strokeText(text, x, y [, maxWidth])​​ 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
7. ​​ctx.strokeStyle = 'white';​​
8. ​​ctx.lineWidth = 1;​​
9. ​​ctx.font = '36px arial';​​
10. ​​ctx.strokeText('hello leo !', 50, 50);​​
11. 
    
12. ​​ctx.fillStyle = 'red';​​
13. ​​ctx.font = '48px georgia';​​
14. ​​ctx.fillText('hello leo !', 50, 150);​​

另外还有一些有样式的文本，可以使用这些属性：

• ​​font = value​​ 当前绘制的文本字体.默认是 10px sans-serif。
• ​​textAlign = value​​​ 文本对齐选项. 可选的值包括： ​​start​​, ​​end​​, ​​left​​, ​​right​​ or ​​center​​. 默认值是 start。
• ​​textBaseline = value​​​ 基线对齐选项. 可选的值包括： ​​top​​, ​​hanging​​, ​​middle​​, ​​alphabetic​​,​​ideographic​​, ​​bottom​​。默认值是 ​​alphabetic​​。
• ​​direction = value​​​ 文本方向。可能的值包括： ​​ltr​​, ​​rtl​​, ​​inherit​​。默认值是 ​​inherit​​。

1. ​​ctx.font = "48px serif";​​
2. ​​ctx.textBaseline = "hanging";​​
3. ​​ctx.strokeText("Hello leo ", 0, 100);​​
4. 绘制图片

• ​​drawImage(image, x, y)​​​ 其中 ​​image​​ 是 ​​image​​ 或者 ​​canvas​​ 对象， ​​x​​ 和 ​​y​​ 是其在目标 ​​canvas​​ 里的起始坐标。

5. ​​let img = new Image();​​
6. ​​img.src = "leo.png";​​
7. ​​img.onload = function(){​​
8. ​​    ctx.drawImage(img, 50, 50);​​
9. ​​};​​

​​drawImage​​方法还有更多参数：

1. ​​ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);​​

• 第一个参数不变，为图片引用。
• 参数 2、3 表示裁切部分左上顶点的坐标，参考原点为原图片本身左上角的坐标。原图片在该坐标左、上的部分均不会绘制出来。
• 参数 4、5 表示裁切部分的长、宽。
• 参数 6、7 表示裁切部分左上顶点在画布中的位置坐标，参考原点为画布左上顶点。
• 参数 8、9 表示裁切部分在画布中绘制的长、宽。本例中绘制时与裁切时面积相同，你也可以定制绘制的尺寸。

详细完整的课程推荐：

1. MDN Canvas教程
2. W3C HTML5 Canvas

5.视频音频API

HTML5提供了用于文档中嵌入富媒体的元素 ​​<video>​​​和 ​​<audio>​​标签，通过元素自带的API来控制视频和音频的播放搜索等。

1. ​​<video>​​
2. ​​  <source src="1.mp4" type="video/mp4">​​
3. ​​  <source src="2.webm" type="video/webm">​​
4. ​​  <a href="3.mp4">打开mp4</a> ​​
5. ​​</video>​​

5.1 视频

当前，video 元素支持三种视频格式： ​​Ogg​​​/ ​​MPEG4​​​和 ​​WebM​​​。
简单使用：

1. ​​<video src="1.ogg" controls="controls"> </video>​​
2. ​​<video src="1.ogg" controls="controls" width="320" height="240"> </video>​​

连接不同视频：

1. ​​<video width="320" height="240" controls="controls">​​
2. ​​    <source src="1.ogg" type="video/ogg">​​
3. ​​    <source src="2.mp4" type="video/mp4">​​
4. ​​    您的浏览器不支持！​​
5. ​​</video>​​

​​<video>与</video>​​​ 之间插入的内容是供不支持 ​​video​​​ 元素的浏览器显示的。
​​​<video>​​ 标签的属性：

另外我们可以为视频创建简单的播放/暂停和调整尺寸的控件，这里需要使用 ​​play()​​​和 ​​pause()​​​ 还有两个属性： ​​paused​​​ 和 ​​width​​​。
更多方法可以查看 HTML5 video - 方法、属性以及事件

5.2 音频

​​audio​​​ 元素能够播放声音文件或者音频流。
当前， ​​​audio​​​ 元素支持三种视频格式： ​​OggVorbis​​​/ ​​MP3​​​和 ​​Wav​​​。
简单使用：

1. ​​<audio src="1.ogg" controls="controls"></audio>​​

​​control​​​ 属性供添加播放、暂停和音量控件。
​​​<audio>与</audio>​​​ 之间插入的内容是供不支持 ​​audio​​​ 元素的浏览器显示的。
连接不同音频：

1. ​​<audio controls="controls">​​
2. ​​    <source src="1.ogg" type="audio/ogg">​​
3. ​​    <source src="2.mp3" type="audio/mpeg">​​
4. ​​    您的浏览器不支持！​​
5. ​​</audio>​​

​​<audio>​​ 标签的属性：

6.客户端存储API

现代web浏览器会提供一些在客户端存储用户数据的方法，只要用户允许，可以随时取出使用。
使用客户端存储API可以存储的数据量是优先的，具体取决于浏览器或者用户设置 。
存储的方式可以这样分类：

1. 传统方法：cookies
   cookie使用比较久了，过时，存在各种安全问题，而且无法存储复杂数据，可能唯一的优势就是对非常老旧浏览器支持，如果业务需要，也可以使用cookie
   
2. 新流派：Web Storage 和 IndexedDB
   现代浏览器所提供的更加简单有效的客户端储存API。
   
3. 未来：Cache API
   一些现代浏览器支持新的 ​​Cache​​ API。这个API是为存储特定HTTP请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 ​​Service Worker​​ API 组合使用，尽管不一定非要这么做。
   

6.1 WebStorage

​​web storage​​API只需存储简单的 键/值对的数据（限制为字符串、数字等类型），并在需要的时候检索其值。
​​​web storage​​API提供了两种在客户端存储数据的新方法：

• ​​localStorage​​ : 一直保存数据，甚至到浏览器关闭又开启后也是这样
• ​​sessionStorage​​ : 只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失)

localStorage方法：

• ​​localStorage.setItem(key, value)​​：存储一个数据。
• ​​localStorage.getItem(key)​​：读取一个数据。
• ​​localStorage.removeItem(key)​​：删除一个数据。

1. ​​localStorage.setItem('name','leo');​​
2. ​​let leo = localStorage.getItem('name');​​
3. ​​leo ; // "leo"​​
4. ​​localStorage.removeItem('name');​​

关闭浏览器以后数据还在。

sessionStorage方法：

• ​​sessionStorage.setItem(key, value)​​：存储一个数据。
• ​​sessionStorage.getItem(key)​​：读取一个数据。
• ​​sessionStorage.removeItem(key)​​：删除一个数据。

1. ​​sessionStorage.setItem('name','leo');​​
2. ​​let leo = sessionStorage.getItem('name');​​
3. ​​leo ; // "leo"​​
4. ​​sessionStorage.removeItem('name');​​

关闭浏览器以后数据不在。

7.第三方API

并不是所有的API都是内置在浏览器中，有一些可能是其他网站（如谷歌，Facebook等）提供的API，让开发者调用，从而使用他们的服务和数据等。

API通过使用一个或多个JavaScript对象与我们的代码交互，这些对象作为API使用的数据（包含在对象属性中）的容器，和API提供的功能（包含在对象的方法中）。
例如我们调用谷歌地图的Google Maps APIs ，需要先引入他们开放的JavaScript库。

1. ​​<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>​​

然后就可以这么使用：

1. ​​navigator.geolocation.getCurrentPosition(function(options){​​
2. ​​    // ... do something​​
3. ​​});​​

如 ​​GeolocationAPI​​则是由以下几个对象组成：

• ​​Geolocation​​, 包含三种控制地理数据检索的方法。
• ​​Position​​​, 表示在给定的时间的相关设备的位置。它包含一个当前位置的 ​​Coordinates​​ 对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。
• ​​Coordinates​​,包含有关设备位置的大量有用数据，包括经纬度，高度，运动速度和运动方向等。

参考文章：

1. MDN JavaScript指南
2. W3school JavaScript