八个鲜为人知但很实用的Web API

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

1、Web Audio API

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

下面来看一个例子：

    

        
Web APIs

    
    


        

            

                Demo - Audio
            
            

                

                

                    
                
                

                    Init
                    Play
                    Pause
                    Stop
                
                

                    Vol: 
                    Pan: 
                

            
        

    

这个例子中将音频从 

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

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

相关资源：

• Demo： https://web-api-examples.github.io/audio.html
• MDN 文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

2、Fullscreen API

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

Fullscreen API 方法：

• requestFullscreen：系统上以全屏模式显示所选元素，会关闭其他应用程序以及浏览器和系统 UI 元素。
• exitFullscreen：退出全屏模式并切换到正常模式。