您现在的位置是：网站首页> 编程资料编程资料

8个鲜为人知但很实用的Web API用法总结_javascript技巧_

2023-05-24 364人已围观

简介 8个鲜为人知但很实用的Web API用法总结_javascript技巧_

在 Web API 中，有非常有用的对象、属性和函数可用于执行小到访问 DOM 这样的小任务，大到处理音频、视频这样的复杂任务。常见的 API 有 Canvas、Web Worker、History、Fetch 等。下面就来看一些不常见但很实用的 Web API。

全文概览：

  • Web Audio API
  • Fullscreen API
  • Web Speech API
  • Web Bluetooth API
  • Vibration API
  • Broadcast Channel API
  • Clipboard API
  • Web Share API

1. Web Audio API

Audio API 允许我们在 Web 上操作音频流，它可以用于 Web 上的音频源添加效果和过滤器。音频源可以来自、视频/音频源文件或音频网络流。

下面来看一个例子：

     
         
Web APIs
     
                                            Demo - Audio             
                             
                
                                     
                
                    Init                     Play                     Pause                     Stop                 
                
                    Vol:                      Pan:                  
            
        
    

这个例子中将音频从  元素传输到 AudioContext，声音效果（如平移）在被输出到音频输出（扬声器）之前被添加到音频源。

按钮 Init 在单击时调用 init 函数。这将创建一个 AudioContext 实例并将其设置为 audioContext。接下来，它创建一个媒体源 createMediaElementSource(audio)，将音频元素作为音频源传递。音量节点 volNode 由 createGain 创建，可以用来调节音量。接下来使用 StereoPannerNode 设置平移效果，最后将节点连接至媒体源。

点击按钮（Play、Pause、Stop）可以播放、暂停和停止音频。页面有一个音量和平移的范围滑块，滑动滑块就可以调节音频的音量和平移效果。

相关资源：

Demo

MDN 文档

2. Fullscreen API

Fullscreen API 用于在 Web 应用程序中开启全屏模式，使用它就可以在全屏模式下查看页面/元素。在安卓手机中，它会溢出浏览器窗口和安卓顶部的状态栏（显示网络状态、电池状态等的地方）。

Fullscreen API 方法：

下面来看一个常见的例子，使用全屏模式观看视频：：

     
         
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：

当点击按钮切换全屏时，我们想让元素 div#video-stage 全屏显示。toggle 函数的实现如下：

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

这里通过 querySelector 查找 div#video-stage 元素并将其 HTMLDivElement 实例保存在 videoStageEl 上。

然后，使用 document.fullsreenElement 属性来确定 document 是否是全屏的，所以可以在 videoStageEl 上调用 requestFullscreen()。这将使 div#video-stage 占据整个设备的视图。

如果在全屏模式下点击 Toggle Fullscreen 按钮，就会在 document 上调用 exitFullcreen，这样 UI 视图就会返回到普通视图（退出全屏）。

相关资源：

Demo

MDN 文档

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