14个让你惊艳的JavaScript Web API！ _JavaScript

文章插图
终于上线啦，有好多好玩的模型，包括最近很火的瞬息宇宙。
文章首先介绍了JAVAScript Web API的概念，解释了它们是如何扩展网站功能并提供丰富用户体验的。接着，文章列举了14个令人兴奋的API，并详细描述了它们的特点和用法。
这些API包括：
Web Speech API：允许网站实现语音识别和语音合成功能。Web Bluetooth API：通过蓝牙技术连接和控制外部设备。WebVR API：为虚拟现实（VR）提供支持，使网站能够与VR设备进行交互。WebUSB API：允许网站与USB设备进行通信和交互。WebRTC API：提供实时音视频通信功能，支持网页间的实时数据传输。Web Animations API：用于创建复杂和流畅的动画效果。Web Speech Synthesis API：提供语音合成功能，让网站能够生成语音输出。
1、Screen Capture API屏幕捕获API正如其名，允许我们捕获屏幕内容，使构建屏幕录制器的过程变得轻而易举。我们需要一个视频元素来显示捕获的屏幕。开始按钮将启动屏幕捕获。
<video id="preview" autoplay>Your browser doesn't support html5.</video><button id="start" class="btn">Start</button>

const previewElem = document.getElementById("preview");const startBtn = document.getElementById("start");async function startRecording() {previewElem.srcObject =awAIt navigator.mediaDevices.getDisplayMedia({video: true,audio: true,});}startBtn.addEventListener("click", startRecording);

2、Web Share APIWeb Share API允许我们将文本、链接甚至文件从网页分享到设备上安装的其他应用程序。

async function shareHandler() {navigator.share({title: "Tapajyoti Bose | Portfolio",text: "Check out my website",url: "https://tapajyoti-bose.vercel.App/",});}

注意：要使用Web Share API，需要用户的交互。例如，按钮点击或触摸事件。
3、Intersection Observer APIIntersection Observer API 检测元素何时进入或离开视口，这对于实现无限滚动非常有用。
4、Clipboard API【14个让你惊艳的JavaScript Web API！】剪贴板 API 允许我们读取和写入剪贴板中的数据。这对于实现复制到剪贴板的功能非常有用。
async function copyHandler() {const text = "https://tapajyoti-bose.vercel.app/";navigator.clipboard.writeText(text);}5、Screen Wake Lock API你是否曾经想过YouTube是如何在播放视频时防止屏幕关闭的？这是因为使用了屏幕保持唤醒（Screen Wake Lock）API 。

let wakeLock = null;async function lockHandler() {wakeLock = await navigator.wakeLock.request("screen");}async function releaseHandler() {await wakeLock.release();wakeLock = null;}

注意：只有在页面已经在屏幕上可见的情况下，才能使用屏幕唤醒锁定API 。否则，会抛出错误。
6、Screen Orientation APIScreen Orientation API 检查当前屏幕的方向，甚至将其锁定为特定的方向。

async function lockHandler() {await screen.orientation.lock("portrait");}function releaseHandler() {screen.orientation.unlock();}function getOrientation() {return screen.orientation.type;}

文章插图
7、Fullscreen APIFullscreen API 在全屏模式下显示一个元素或整个页面。

async function enterFullscreen() {await document.documentElement.requestFullscreen();}async function exitFullscreen() {await document.exitFullscreen();}

注意：要使用全屏API，需要用户的交互。
8、Web SpeechWeb Speech API 可以让你将语音数据整合到网络应用中。Web Speech API 由两个部分组成： SpeechSynthesis （文本转语音）和 SpeechRecognition （异步语音识别）。

// Speech Synthesisconst synth = window.speechSynthesis;const utterance = new SpeechSynthesisUtterance("Hello World");synth.speak(utterance);// Speech Recognitionconst SpeechRecognition =window.SpeechRecognition ?? window.webkitSpeechRecognition;const recognition = new SpeechRecognition();recognition.start();recognition.onresult = (event) => {const speechToText = event.results[0][0].transcript;console.log(speechToText);};