web前端开发V

学会使用这10个有用的Web API，让你的开发效率瞬间提升10倍。

英文 | https://blog.bitsrc.io/10-useful-web-apis-for-2020-8e43905cbdc5

翻译 | web前端开发（ID：web_qdkf)

你可能已经知道并采用了那些更流行的Web API进行工作了。（如Web Worker，Fetch等），但是我个人更喜欢使用其他一些不太流行的API，我建议你也尝试一下。

在这篇文章中所描述的所有Web API都有实时示例，并且你都可以在以下地址中找到他们：

Web API 地址：https://web-api-examples.github.io/

你还可以在这里：https://github.com/web-api-examples/web-api-examples.github.io

找到描述Web API的所有源代码。

1、网络音频API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

网络音频API允许你在Web上操作音频流。它可用于向网络上的音频源添加效果和滤镜。

音频源主要通过

下面，让我们看一个简单的例子：

            Web APIs
    
    
                                    Demo - Audio            
                            
                                                    
                                                                                                                
                
                    Vol:                     Pan:

本示例将音频从

单击“ Init”按钮将调用init函数。这将创建一个AudioContext实例并将其设置为audioContext。

接下来，它将创建媒体源createMediaElementSource（audio），并将音频元素作为音频源传递。

节点volNode被创建为createGain。在这里，我们调整音频的音量。接下来，使用StereoPannerNode设置平移效果。最后，将节点连接到媒体源。

按钮（播放，暂停，停止）播放，暂停和停止音频。

我们有一个“音量和声像范围”滑块，更改它们会影响音量和音频的声像效果。

你可以在这里试试：https://web-api-examples.github.io/audio.html。

实例演示地址：https://codepen.io/Rumyra/pen/qyMzqN

截图如下：

2、全屏API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

全屏API在Web应用程序中启用全屏模式。你可以选择在全屏模式下查看元素。在Android手机中，它将删除浏览器窗口和Android顶部状态栏（在其中显示网络状态，电池状态等）。

方法：

requestFullscreen在系统上以全屏模式显示选定的元素，从而关闭其他应用程序以及浏览器和系统UI元素。

exitFullscreen将全屏模式退出到正常模式。

让我们看一个简单的示例，其中我们可以使用全屏模式观看视频：

            Web APIs
    
                                Demo - Fullscreen        
                
                    This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window pane, and presents the Element to take the entire width and height of the system.
In Android phones, it will remove the browsers window and the Android UI where the network status, battery status are displayed, and display the Element in full width of the Android system.        
                                        
                    This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window pane, and presents the Element to take the entire width and height of the system.
In Android phones, it will remove the browsers window and the Android UI where the network status, battery status are displayed, and display the Element in full width of the Android system.

看到video元素在div＃video-stage元素中，并带有“切换全屏”按钮。

当我们单击切换全屏按钮时，我们要使元素div＃video-stage变为全屏。

参见功能切换：

function toggle() {    const videoStageEl = document.querySelector(".video-stage")    if(!document.fullscreenElement)        videoStageEl.requestFullscreen()    else        document.exitFullscreen()}

它查询div#video-stage元素并将其HTMLDivElement实例保留在上videoStageEl。

我们使用document.fullsreenElement属性知道该文件是否未处于全屏，所以我们可以调用requestFullscreen()上videoStageEl。这将div#video-stage接管整个设备视图。

如果Toggle Fullscreen在全屏模式下单击按钮，exitFullcreen将在文档上调用，因此UI视图将返回到普通视图。

你可以在这里试试：https://web-api-examples.github.io/fullscreen.html

3、Web Speech API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

此API为我们提供了将语音合成和语音识别添加到我们的Web应用程序的功能。

使用此API，我们将能够向网络应用发出语音命令，就像在Android上通过其Google Speech或在Windows中使用Cortana一样。

让我们看一个简单的例子。我们将看到如何使用Web Speech API实现文本到语音和语音到文本：

            Web APIs
    
            
                                    Demo - Text to Speech            
                                                                
                                                    
            
        
                                    Demo - Speech to Text

第一个演示Demo - Text to Speech演示了如何通过一个简单的输入字段使用此API来接收输入文本和一个用于执行语音操作的按钮。

请参见语音功能：

function speak() {        const speech = new SpeechSynthesisUtterance()        speech.text = textToSpeech.value        speech.volume = 1        speech.rate = 1        speech.pitch = 1        window.speechSynthesis.speak(speech)    }

它实例化SpeechSynthesisUtterance()对象，设置文本，使其与我们在输入框中键入的文本说话。然后，调用带有语音对象的SpeechSynthesis＃speak函数，使输入框中的文本在我们的扬声器中响亮。

第二个演示Demo - Speech to Text是语音识别演示。我们点击Tap and Speak into Mic按钮，对着麦克风讲话，我们说的语言会在文本区域中被翻译成文字。

Tap and Speak into Mic单击后的按钮调用该tapToSpeak函数：

function tapToSpeak() {        var SpeechRecognition = SpeechRecognition;        const recognition = new SpeechRecognition()        recognition.onstart = function() { }        recognition.onresult = function(event) {            const curr = event.resultIndex            const transcript = event.results[curr][0].transcript            speechToText.value = transcript        }        recognition.onerror = function(ev) {            console.error(ev)        }        recognition.start()    }

很简单，SpeechRecognition实例化，然后注册事件处理程序和回调。onstart在语音识别开始onerror时调用，在发生错误时调用。onresult每当语音识别捕获到一条线时，就会调用。

看到，在onresult回调中，我们提取字母并将它们设置到textarea中。所以当我们对着麦克风说话时，这些文字会出现在文本区域内容中。

你可以在这里试试：https://web-api-examples.github.io/speech.html

4、蓝牙 API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API

实验技术

通过此API，我们可以访问手机上的低功耗蓝牙设备，并使用它将网页中的数据共享到另一台设备。

想象一下能够创建一个网络聊天应用程序，该应用程序可以通过蓝牙发送和接收来自其他手机的消息。

可能性是无止境。

基本的API是navigator.bluetooth.requestDevice。调用它将使浏览器提示用户一个设备选择器，使他们可以选择一个设备或取消请求。

navigator.bluetooth.requestDevice需要一个强制对象。该对象定义了用于返回与过滤器匹配的蓝牙设备的过滤器。

让我们看一个简单的演示。本演示将使用navigator.bluetooth.requestDeviceAPI从BLE设备检索基本设备信息。

            Web APIs
    
    
                                    Demo - Bluetooth            
                            
                                    Device Name: 
                    Device ID: 
                    Device Connected:

设备的信息显示在此处。单击该按钮可Get BLE Device调用该bluetoothAction功能。

function bluetoothAction(){        navigator.bluetooth.requestDevice({            acceptAllDevices: true        }).then(device => {                        dname.innerHTML = device.name            did.innerHTML = device.id            dconnected.innerHTML = device.connected        }).catch(err => {            console.error("Oh my!! Something went wrong.")        })    }

该bluetoothAction函数navigator.bluetooth.requestDevice使用选项调用API acceptAllDevices: true，这将使其扫描并列出附近所有具有蓝牙功能的设备。看到它返回了一个Promise，因此我们解析它以device从回调函数中获取一个参数，该device参数将保存列出的Bluetooth设备的信息。这是我们使用其属性在设备上显示信息的地方。

在这里尝试：https://web-api-examples.github.io/bluetooth.html

5、频道消息传递API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API

该API允许在不同浏览器上下文中的两个脚本在双向通道中相互通信并传递消息。

不同的浏览器上下文可以是在不同选项卡中运行的两个脚本，脚本中的两个iframe，文档和脚本中的iframe等。

首先创建一个MessageChannel实例：

new MessageChannel()

这将返回一个MessagePort对象。

然后，每个浏览器上下文都可以使用MessagePort.port1或MessageChannel.port2设置端口。

实例化MessageChannel的上下文将使用MessagePort.port1，另一个上下文将使用MessagePort.port2。

然后，可以使用postMessage API传递消息。

每个浏览器上下文都将使用Message.onmessage收听消息。

让我们看一个简单的示例，在这里我们可以使用MessageChannel在文档和iframe之间发送文本。

            Web APIs
    
    
                                    Demo - MessageChannel

请注意iframe广告代码。我们在上面加载了一个iframe.content.html文件。按钮和文本是我们输入文字并向iframe发送消息的地方。

我们初始化了MessageChannel和port1。我们向iframe添加了加载事件监听器。在这里，我们在onmessage上注册了侦听器port1，然后使用postMessageAPI 将消息发送到iframe 。看到渠道port2被向下发送到iframe。

让我们看一下iframe的iframe.content.html：

    
                                    Running inside an iframe

在这里，我们注册了一个消息事件处理程序。我们检索，port2并onmessage为其设置事件处理程序。现在，我们可以从iframe接收消息并将其发送到其父文档。

在这里尝试：https://web-api-examples.github.io/channelmessaging.html

6、振动API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API

振动API能使我们的设备振动，以作为对新数据或信息的通知或物理反馈的方式，我们应对此做出响应。

执行此操作的方法是navigator.vibrate（pattern）。

模式是描述振动模式的单个数字或数字数组。

navigator.vibrate(200)navigator.vibrate([200])

这将使设备振动200毫秒并停止。

navigator.vibrate([200, 300, 400])

这将使设备振动200毫秒，暂停300毫秒，振动400毫秒，然后停止。

可以通过传递0，[]（全为零的数组[0,0,0]）来消除振动。

让我们看一个简单的演示：

            Web APIs
    
    
                                    Demo - Vibration

我们有输入和一个按钮。在输入框中输入振动的持续时间，然后按按钮。

你的设备将在输入的时间内振动。

你可以在这里尝试一下：https://web-api-examples.github.io/vibration.html

7、广播频道API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

此API允许来自同一来源的不同浏览上下文的消息或数据进行通信。

浏览上下文是窗口，标签，iframe，工作程序等

BroadcastChannel类用于创建或加入频道。

const politicsChannel = new BroadcastChannel("politics")

politics是频道的名称。用来初始化BroadcastChannel构造函数的任何上下文politics都将加入政治频道，它将接收在该频道上发送的任何消息，并且可以将消息发送到该频道。

如果是第一个到BroadcastChannel的构造函数，politics则会创建该频道。

要发布到频道，请使用BroadcastChannel.postMessageAPI

要订阅频道（收听消息），请使用BroadcastChannel.onmessage事件。

为了演示广播频道的用法，我构建了一个简单的聊天应用程序：

            Web APIs
    
    
                                    Demo - BroadcastChannel            
                            Open this page in another tab, window or iframe to chat with them.

我从设置UI视图开始。这是一个简单的文本和按钮。输入你的信息，然后按按钮发送信息。

在脚本部分，我初始化了politicsChannel，并在上设置了一个onmessage事件侦听器politicsChannel，这样它将接收并显示消息。

该sendMsg功能由按钮调用。它politicsChannel通过BroadcastChannel#postMessageAPI 将消息发送到。初始化此相同脚本的任何标签，iframe或辅助程序都将接收从此处发送的消息，因此此页面将接收从其他上下文发送的消息。

你可以在这里尝试：

https://web-api-examples.github.io/broadcastchannel.html

8、付款请求API

推荐阅读：https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API

该API提供了一种选择商品和服务到支付网关的支付方式的方法。

支持一种一致的方式来向不同的商家提供付款细节，而无需用户再次输入细节。

它向商家提供帐单地址，送货地址，卡详细信息等信息。

注意：此API不会为表格带来新的付款方式。它提供了用户付款明细。

让我们看一个演示：如何使用付款请求API接受信用卡付款的演示。

            Web APIs
    
    
                                    Demo - Credit Card Payment

networks，types和supportedTypes都描述了付款方式。

details 列出我们的购买和总费用。

现在，PaymentRequest使用supportedTypes传递给PaymentRequest构造函数的和详细信息实例化。

paymentRequest.show()将显示浏览器付款用户界面。然后，我们处理解决Promise时用户提供的数据。

它们是使用付款API进行付款的许多配置，至少通过以上示例，我们已经了解了付款请求API的使用方式和工作方式。

在此处尝试现场演示：

https://web-api-examples.github.io/paymentrequest.html

9、调整观察者API的大小

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

该API提供了一种方式，如果以任何方式调整了注册观察者的元素的大小，则可以通知观察者。

ResizeObserver类提供了一个观察器，该观察器将在每个resize事件上调用。

const resizeObserver = new ResizeObserver(entries => {    for(const entry of entries) {        if(entry.contentBoxSize)            consoleo.log("element re-sized")    }})resizeObserver.observe(document.querySelector("div"))

每当调整div大小时，控制台上都会打印“ element re-sized”。

让我们看一下如何使用Resize Observer API的示例：

            Web APIs
    
    
                                    Demo - ResizeObserver            
                            
                
                                    
                
                                    Resize Width:                
                                    Resize Height:

我们这里有范围滑块。如果我们滑动它们，它们将改变的高度和宽度idv#resizeBox。我们在ResizeObserver上向div#resizeBox观察者注册了一个，该观察者将显示指示框已调整大小以及其高度和宽度的当前值的消息。

尝试滑动范围滑块，您将看到div#resizeBox宽度和高度的变化，此外，我们还将看到信息显示在div＃stat框中。

你可以在这里尝试一下：

https://web-api-examples.github.io/resizeobserver.html

10、指针锁定API

学习地址：https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

该API可以无限制地访问鼠标输入，坐标，动作和移动。

非常适合玩游戏，为3D模型建模等。

这些API是：

requestPointerLock：此方法将从浏览器中删除鼠标并发送鼠标状态事件。这将持续到exitPinterLock调用为止。

exitPointerLock：此API释放鼠标指针锁定并恢复鼠标光标。

让我们来看一个例子：

            Web APIs
    
    
                                    Demo - PointerLock

我们有一个div#box和div#ball 里面的div#box。

我们在上设置了click事件div#box，因此单击它会调用requestPointerLock()，这会使光标消失。

PointerLock有一个pointerlockchange事件监听器。当指针锁定状态更改时，将发出此事件。在其回调中，我们将其附加到mousemove事件。当鼠标在当前浏览器选项卡上移动时，将触发其回调。在此回调中，当前鼠标位置被发送到e参数，因此我们使用它来获取鼠标的当前X和Y位置。使用此信息，我们可以设置的top和left样式属性div#ball，因此，当鼠标移动时，我们会看到一个跳舞的球。