万普插件库

jQuery插件大全与特效教程

2025年02月03日

10个打开了我新世界大门的 WebAPI(上)「实践」

作者：刘小夕

转发链接：
https://mp.weixin.qq.com/s/aEbqUt3zSnq8EjdBtkBcpw

前言

原来我对这些 Web API 一无所知，打开了我新世界的大门，未来 Web 可以做到更多，早日一统江湖吧，吼吼吼。

虽然这些 API 很多目前还存在兼容性的问题，但是还是有必要了解一下的，文中的代码，我已经都测试过了。希望你看完之后能够有所收获。

原文链接：
https://blog.bitsrc.io/10-useful-web-apis-for-2020-8e43905cbdc5

你可能已经知道并使用更为流行的 Web APIs（Web Worker，Fetch等），但也有少数不那么流行的 API，我个人喜欢使用，并建议你也尝试一下。

这篇文章中描述的所有 Web API 示例都可以在这里找到：

1. Web Audio API

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

音频源可以来自

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


????
????????Web?APIs

????
????
????????
?????????????Demo?-?Audio?


????????????
????????????????


????????????????
????????????????????
????????????????
????????????????
????????????????????Init
????????????????????Play
????????????????????Pause
????????????????????Stop
????????????????
????????????????
????????????????????Vol:?
????????????????????Pan:?
????????????????
????????????


????????


????

译者注：源代码有点小问题，上面的代码我已经修改过，可以运行，不过mp4文件换成自己本地有的。

此示例将音频从

单击 Init 按钮将调用 init 函数。这将创建一个 AudioContext 实例并将其设置为 audioContext。接下来，它创建一个媒体源createMediaElementSource(audio)，将音频元素作为音频源传递。

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

我们有一个音量和声像的滑块，拖动它们会影响音量和音频的声像效果。

这个例子有问题，所以该链接也无法正常使用，可以拷贝上面的代码在本地运行

try it: https://web-api-examples.github.io/audio.html

2. Fullscreen API

Fullscreen API 让我们能够在 Web app 中启用全屏模式。它使你可以选择要在全屏模式下查看的元素。在 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.?
????????????????
????????????????????
????????????????????Toogle?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.?
????????????
????????
????

video 元素在 div＃video-stage元素中，并带有一个按钮 Toggle Fullscreen。

当我们单击 Toggle Fullscreen 按钮时，我们希望使元素 div#video-stage 变为全屏显示。

看一下 toggle 这个函数：

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

获取 div#video-stage 元素，并将其实例保留在 videoStageEl 上。

我们用过 document.fullsreenElement 属性可以知道该元素是否处于全屏模式，如果不是全屏模式，可以调用 videoStageEl 上的 requestFullscreen() 方法，使div#video-stage 接管整个设备视图。

如果在全屏模式下点击 Toggle Fullscreen 按钮，将会调用document.exitFullcreen() ，从而返回到普通视图。

try it: https://web-api-examples.github.io/fullscreen.html

注：该链接中的视频资源找不到了，但是全屏功能是正常的，大家也可以在本地测试

3. Web Speech API

Web Speech API 让我们可以将语音合成和语音识别功能添加到Web应用中。

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

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


????
????????Web?APIs

????
????
????????
????????
?????????????Demo?-?Text?to?Speech?
????????????
????????????????
????????????????????
????????????????
????????????????
????????????????????Tap?to?Speak
????????????????
????????????
????????
????????
?????????????Demo?-?Speech?to?Text?
????????????
????????????????
????????????????????
????????????????
????????????????
????????????????????Tap?and?Speak?into?Mic
????????????????
????????????
????????
????

第一个演示 Demo - Text to Speech 演示了通过一个简单的输入框接收输入的文字以及一个按钮点击后输出语音的功能。

看一下 speak 函数：

function?speak()?{
????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()?{
????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 回调中，我们提取文本并将其设置到文本区域。所以当我们对着麦克风说话时，这些内容会输出在文本区域中。

try it: https://web-api-examples.github.io/speech.html

译者：我的爪机和电脑 Chrome(V83) 都不能支持该 API。

4. Bluetooth API

实验技术

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

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

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

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

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


????
????????Web?APIs

????
????
????????
?????????????Demo?-?Bluetooth?
????????????
????????????????
????????????????
????????????????????Device?Name:?
????????????????????Device?ID:?
????????????????????Device?Connected:?
????????????????
????????????????
????????????????????Get?BLE?Device
????????????????
????????????
????????
????

设备的信息会展示出来。单击按钮 Get BLE Device 则调用 bluetoothAction 函数。

function?bluetoothAction()?{
????if?(navigator.bluetooth)?{
????????navigator.bluetooth.requestDevice({
????????????acceptAllDevices:?true
????????}).then(device?=>?{
????????????dname.innerHTML?=?device.name
????????????did.innerHTML?=?device.id
????????????dconnected.innerHTML?=?device.connected
????????}).catch(err?=>?{

????????????error.innerHTML?=?"Oh?my!!?Something?went?wrong."
????????????error.classList.remove("close")
????????})
????}?else?{
????????error.innerHTML?=?"Bluetooth?is?not?supported."
????????error.classList.remove("close")
????}
}

该 bluetoothAction 函数调用
navigator.bluetooth.requestDevice API，参数设置为 acceptAllDevices: true，这将使其扫描并列出附近所有开启了蓝牙的设备。它返回的是一个 Promise。

try it: https://web-api-examples.github.io/bluetooth.html

译者注：电脑上 Chrome 浏览器上测试了下，是支持该API的。

未完结，请见下一篇

万普插件库

jQuery插件大全与特效教程

10个打开了我新世界大门的 WebAPI(上)「实践」

目录

前言

1. Web Audio API

Web?APIs

????

2. Fullscreen API

Web?APIs

????

3. Web Speech API

Web?APIs

????

4. Bluetooth API

Web?APIs

????

推荐JavaScript经典实例学习资料文章