大家好，我是做工程師不做碼農！聚焦大前端技術和程序員成長的乾貨公眾號，點擊關注，每天給你精彩！

您可能已經知道並使用了目前比較流行的Web API（Web Worker、Fetch等），但還有一些不太流行的Web API，我個人很喜歡使用，建議您也嘗試一下。

1. Web Audio API

這個Web音頻API允許您在Web上操作音頻流，它可以用於向網絡上的音頻源添加效果和濾鏡。

音頻源可以來自 <audio>、video/audio 源文件或音頻網絡流。

讓我們看一個簡單的例子：

該示例的頁面效果如下

https://dunizb.github.io/CodeTest/project/WebAPIs-Audio-Example/

本示例將音頻從 <audio> 元素傳遞到 AudioContext。聲音效果（例如聲道）在添加到音頻輸出（揚聲器）之前已添加到音頻源。

初始化調用 init 函數，這將創建一個 AudioContext 實例。接下來，它創建一個媒體源 createMediaElementSource(audio)，將 audio 元素作為音頻源傳遞。

音量節點 volNode 是 createGain 創建的。在這裡我們調整音頻的音量，接下來使用 StereoPannerNode 設置聲道效果。最後，將節點連接到媒體源。

我們有一個“音量和聲道範圍”滑塊，更改它們會影響音量和音頻的聲道效果。

本示例在線演示：https://dunizb.github.io/CodeTest/project/WebAPIs-Audio-Example/

2. Fullscreen API

此API在web應用程序中啟用全屏模式。它允許您選擇要在全屏模式下查看的元素。在Android手機中，它將刪除瀏覽器窗口和Android頂部狀態欄。

方法：

• requestFullscreen 在系統上以全屏模式顯示選定的元素，從而關閉其他應用程序以及瀏覽器和系統UI元素。
• exitFullscreen 將全屏模式退出到正常模式。

讓我們看一個簡單的例子，假設我們有一個視頻，我們想要是以全屏模式觀看，添加如下代碼即可：

<code>video.requestFullscreen() // 開啟全屏
video.exitFullscreen() \t\t// 退出全屏/<code>

3. Web Speech API

這個API為我們提供了將語音合成和語音識別添加到web應用程序中的功能。

使用此API，我們將能夠向網絡應用發出語音命令，就像在Android上通過其Google 語音或在Windows中使用Cortana一樣。

讓我們看一個簡單的例子。我們將看到如何使用Web Speech API實現文本到語音和語音到文本

效果，在線演示地址：https://web-api-examples.github.io/speech.html

第一個Demo 演示文本到語音，通過簡單的輸入文字點擊按鈕即可使用系統語言把文字播放出來。

請參見speak函數：

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

}/<code>

它實例化 SpeechSynthesisUtterance() 對象，將文本設置為根據我們在輸入框中鍵入的文本說話。然後，調用帶有語音對象的 SpeechSynthesis＃speak函數，使輸入框中的文本在我們的揚聲器中播放。

4. Bluetooth API

實驗技術。通過此API，我們可以訪問手機上的低功耗藍牙設備，並使用它將網頁中的數據共享到另一臺設備。

想象一下能夠創建一個網絡聊天應用程序，該應用程序可以通過藍牙發送和接收來自其他手機的消息。

可能性是無窮的。

基本的API是 navigator.bluetooth.requestDevice。調用它將使瀏覽器提示用戶一個設備選擇器，使他們可以選擇一個設備或取消請求。

一個在線示例：https://web-api-examples.github.io/bluetooth.html

5. Channel Messaging API

這個API允許不同瀏覽器上下文中的兩個腳本在雙向通道中相互通信和傳遞消息。

不同的瀏覽器上下文可以是運行在不同標籤頁中的兩個腳本、腳本中的兩個iframe、文檔或腳本等。

首先創建一個 MessageChannel 實例：

<code>new MessageChannel()/<code>

這將返回一個 MessagePort 對象。

然後，每個瀏覽器上下文都可以使用 MessagePort.port1 或 MessageChannel.port2 設置端口。

實例化 MessageChannel 的上下文將使用MessagePort.port1，另一個上下文將使用MessagePort.port2。

然後，可以使用 postMessage API 傳遞消息。

然後，每個瀏覽器上下文都將使用 Message.onmessage 收聽消息。

一個在線示例：https://web-api-examples.github.io/channelmessaging.html

6. Vibration API

此API使我們的設備震動，以作為對新數據或信息的通知或物理反饋的方式。

執行此操作的方法是 navigator.vibrate(pattern)。

pattern 是描述振動模式的單個數字或數字數組。

<code>navigator.vibrate(200)
navigator.vibrate([200])/<code>

這將使設備振動200毫秒並停止。

<code>navigator.vibrate([200, 300, 400])/<code>

這將使設備振動200毫秒，暫停300毫秒，振動400毫秒，然後停止。

可以通過傳遞0，[]（全為零的數組[0,0,0]）來消除振動。

一個在線示例：https://web-api-examples.github.io/vibration.html

7. Broadcast Channel API

這個API允許來自同一來源上不同瀏覽上下文的消息或數據的通信。

瀏覽上下文是窗口，標籤，iframe，工作程序等

BroadcastChannel 類用於創建或加入Channel。

<code>const politicsChannel = new BroadcastChannel("politics")/<code>

politics 將是這個 Channel 的名稱。任何用 politics 初始化 BroadcastChannel 構造函數的上下文都將加入politics 頻道，它將接收在該 Channel 上發送的任何消息，並可以將消息發送到該 Channel。

要發佈到 Channel，請使用 BroadcastChannel.postMessage API

要訂閱 Channel（收聽消息），請使用 BroadcastChannel.onmessage 事件。

一個在線示例：https://web-api-examples.github.io/broadcastchannel.html

8. Payment Request API

該API提供了一種選擇商品和服務到支付網關的支付方式的方法。

這個API提供了一種一致的方式，可以向不同的商家提供支付詳細信息，而無需用戶再次輸入詳細信息。

它向商家提供帳單地址，送貨地址，卡詳細信息等信息。

一個在線示例：https://web-api-examples.github.io/paymentrequest.html

點擊按鈕

9. Resize Observer API

這個API提供了一種通知觀察者的方法，如果它註冊的元素以任何方式重新調整大小。

ResizeObserver類提供了一個觀察器，該觀察器將在每個resize事件上調用。

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

resizeObserver.observe(document.querySelector("div"))/<code>

每當調整div大小時，控制檯上都會打印“ element re-sized”。

一個在線示例：https://web-api-examples.github.io/resizeobserver.html

10. Pointer Lock API

這個API允許無限制地訪問鼠標輸入、座標、動作、移動。

非常適合玩遊戲，為3D模型建模等。

這些API是：

• requestPointerLock：此方法將從瀏覽器中移除鼠標併發送鼠標狀態的事件。這將一直持續到調用exitplock為止。
• exitPointerLock：此API釋放鼠標指針鎖定並恢復鼠標光標。

一個在線示例：https://web-api-examples.github.io/pointerlock.html

總結

網絡越來越複雜，越來越多的 native 功能加入進來，這是因為web用戶的數量遠遠大於 native 應用程序用戶。用戶在 native 應用程序上看到的 native 體驗將被帶到 web 上，以便在不需要返回 native 應用程序的情況下將其保留在那裡。

如果對你有一點點幫助，可以點個關注。

閱讀更多 做工程師不做碼農 的文章

關鍵字: 有用 2019科技之光 Android