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

最新推荐文章于 2023-12-29 09:30:00 发布

web前端开发V

最新推荐文章于 2023-12-29 09:30:00 发布

阅读量498

点赞数

本文链接：https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/105742739

版权

英文 | 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上操作音频流。它可用于向网络上的音频源添加效果和滤镜。

音频源主要通过<audio>元素来添加，其包括视频/音频源文件或音频网络流。

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

<body>    <header>        <h2>Web APIs<h2>    </header>    <div class="web-api-cnt">
        <div class="web-api-card">            <div class="web-api-card-head">                Demo - Audio            </div>            <div class="web-api-card-body">                <div id="error" class="close"></div>                <div>                    <audio controls src="./audio.mp3" id="audio"></audio>                </div>
                <div>                    <button onclick="audioFromAudioFile.init()">Init</button>                    <button onclick="audioFromAudioFile.play()">Play</button>                    <button onclick="audioFromAudioFile.pause()">Pause</button>                    <button onclick="audioFromAudioFile.stop()">Stop</button>                </div>                <div>
                    <span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></span>                    <span>Pan: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" step="0.01" value="0" /></span>                </div>
            </div>        </div>
    </div></body>
<script>    const l = console.log    let audioFromAudioFile = (function() {        var audioContext        var volNode        var pannerNode        var mediaSource
        function init() {            l("Init")        try {                audioContext = new AudioContext()                        mediaSource = audioContext.createMediaElementSource(audio)                volNode = audioContext.createGain()                volNode.gain.value = 1                pannerNode = new StereoPannerNode(audioContext, { pan:0 })
                mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)            }            catch(e) {                error.innerHTML = "The Web Audio API is not supported in this device."                error.classList.remove("close")            }        }
        function play() {            audio.play()                    }
        function pause() {            audio.pause()        }
        function stop() {            audio.stop()                    }
        function changeVolume() {            volNode.gain.value = this.value            l("Vol Range:",this.value)        }
        function changePan() {            pannerNode.gain.value = this.value            l("Pan Range:",this.value)        }
        return {            init,            play,            pause,            stop,            changePan,            changeVolume        }    })()</script>

本示例将音频从<audio>元素传递到AudioContext。声音效果（例如声像）在添加到音频输出（扬声器）之前已添加到音频源。

单击“ 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将全屏模式退出到正常模式。

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

<body>    <header>        <h2>Web APIs<h2>    </header>    <div class="web-api-cnt">        <div class="web-api-card">        <div class="web-api-card-head">            Demo - Fullscreen        </div>        <div class="web-api-card-body">        <div id="error" class="close"></div>        <div>            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.        </div>        <div class="video-stage">            <video id="video" src="./video.mp4"></video>            <button onclick="toggle()">Toogle Fullscreen</button>        </div>        <div>            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.        </div>        </div>        </div>    </div></body>
<

最低0.47元/天解锁文章

web前端开发V

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学会使用这10个有用的Web API，让你的开发效率瞬间提升10倍。

英文 |https://blog.bitsrc.io/10-useful-web-apis-for-2020-8e43905cbdc5翻译 | web前端开发（ID：web_qdkf)...
复制链接

扫一扫