[34天] 各种好玩的WEB API_Javascript_西西优一点

Javascript[34天] 各种好玩的WEB API

[34天] 各种好玩的WEB API

Pointer Lock API Picture-in-Picture_API Battery Status API Vibration API Visual Viewport API 阅读：771 时间：2022年06月19日

前言最近读MDN Web API，发现了一些好玩有趣的API，也许在有些场景下十分有用，特此记录分享一下。 Web Speech API 语音识别与合成语音识别与语音合成功能, 来吧，再控制台输入以下代码并回车，你听到了什么？ wind...

前言

最近读MDN Web API，发现了一些好玩有趣的API，也许在有些场景下十分有用，特此记录分享一下。

Web Speech API 语音识别与合成

语音识别与语音合成功能,

来吧，再控制台输入以下代码并回车，你听到了什么？

window.speechSynthesis.speak(new window.SpeechSynthesisUtterance('你好帅'))

你好帅！，没错这就是Web Speech API的语音合成能力了。真的是简单的另人发指啊。

当然，你想复杂也可以。选择语音包，音量，语速，语调...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Speech API</title>
</head>
<body>
<button onclick="handleTest()">测试</button>
<button onclick="handlePause()">暂停</button>
<button onclick="handleResume()">继续</button>

<script>
let voices = []
speechSynthesis.addEventListener("voiceschanged", () => {
  voices = speechSynthesis.getVoices()
  voices = voices.filter(voice => voice.localService)
  console.log(voices)
})
function handleTest() {
  speechSynthesis.cancel()
  const rance = new SpeechSynthesisUtterance(`
    一身劳苦一心伤，满腹无奈何人讲。
    最怕夜深人静时，倚枕难眠更彷徨。
    三两蚊蝇似浅唱，一席疏帘漏街光。
    心思远飘天河去，迷离已是天微芒。
  `)
  // rance.voice = voices[0]
  rance.volume = 1
  rance.pitch = 2
  rance.rate = 2
  speechSynthesis.speak(rance)
}

function handlePause() {
  speechSynthesis.pause()
}

function handleResume() {
  speechSynthesis.resume()
}
</script>
</body>
</html>

这个API的另一个能力是相反的，语音识别，不多介绍了，你知道有就行。自己看下面的文档链接吧。

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API

Pointer Lock API 隐藏鼠标光标

该API主要做两件事：

取消对鼠标(指针)移动方向上的距离锁定
隐藏鼠标(指针)光标可见性

一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body, div{
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      user-select: none;
    }
  </style>
</head>
<body>
  <button onclick="test()">点我后再移动鼠标到边界试试</button>
<div></div>
<script>
function test() {
  document.body.requestPointerLock();
}
document.body.addEventListener("mousemove", e => {
  var movementX = e.movementX
      movementY = e.movementY
  // 打印鼠标移动的增量值。
  console.log("movementX=" + movementX, "movementY=" + movementY);
}, false);
</script>
</body>
</html>

正常情况下，鼠标移动到页面边界，就不会再有事件增量，开启该锁定后，虽然鼠标已经位于边界，但仍可监听到事件增量。

可以看出该API就是为一些3D场景和FPS游戏量身定制啊

https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_Lock_API

Picture-in-Picture_API 画中画，跨窗口浮动视频

画中画！在开启该API后，可以让视频跨窗口悬浮播放。可以一干活一边摸鱼？

上个小demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <video 
  id="video"
  src="https://mdn.github.io/dom-examples/picture-in-picture/assets/bigbuckbunny.mp4"
  width="300"
  height="200"
  autoplay
  loop
  controls
  >
</video>
  <button onclick="togglePictureInPicture()">点我后切换其它页面试试</button>
<script>
function togglePictureInPicture() {
  const video = document.querySelector('#video')
  if (document.pictureInPictureElement) {
    video.exitPictureInPicture();
  } else {
    if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture();
    }
  }
}
</script>
</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API

Page_Visibility_API 页面可见性

当用户最小化窗口或切换到另一个选项卡时，API 会发送visibilitychange事件，让监听者知道页面状态已更改。你可以检测事件并执行某些操作或行为不同。

简单说，就是给你一个当前窗口是否是活动状态的事件通知，以便于页面处于后台(非活动状态)时，相应的做出处理。

比如，当页面处于非活动状态后，暂停正在播放的视频，反之恢复播放。

小demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <video 
  id="video"
  src="https://mdn.github.io/dom-examples/picture-in-picture/assets/bigbuckbunny.mp4"
  width="300"
  height="200"
  autoplay
  loop
  controls
  >
</video>
<script>
const videoElement = document.querySelector('#video')
// 标准事件名称为 visibilitychange，我用Chrome测试，其私有事件名称为：webkitvisibilitychange
document.addEventListener('webkitvisibilitychange', e => {
  console.log(e)
  if (document.hidden) {
    videoElement.pause()
    document.title = '暂停播放'
  } else {
    videoElement.play()
    document.title = '正在播放'

  }
})
</script>
</body>
</html>

https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

Battery Status API 电池状态

Battery Status API，更多时候被称之为 Battery API, 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。这个可以在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失。

就是能获取/监听设备电池信息的接口喽，没什么好讲的。直接上MDN的demo自行研读就好。

navigator.getBattery().then(function(battery) {

  console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  console.log("Battery level: " + battery.level * 100 + "%");
  console.log("Battery charging time: " + battery.chargingTime + " seconds");
  console.log("Battery discharging time: " + battery.dischargingTime + " seconds");

  battery.addEventListener('chargingchange', function() {
    console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  });

  battery.addEventListener('levelchange', function() {
    console.log("Battery level: " + battery.level * 100 + "%");
  });

  battery.addEventListener('chargingtimechange', function() {
    console.log("Battery charging time: " + battery.chargingTime + " seconds");
  });

  battery.addEventListener('dischargingtimechange', function() {
    console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
  });});

https://developer.mozilla.org/zh-CN/docs/Web/API/Battery_Status_API

Vibration API 振动

大多数现代移动设备包括振动硬件，其允许软件代码通过使设备摇动来向用户提供物理反馈。Vibration API 为 Web 应用程序提供访问此硬件（如果存在）的功能，如果设备不支持此功能，则不会执行任何操作。

这个API太喜欢了，是继陀螺仪(参见HTML5陀螺仪重力感应API)后的又一个惊喜，让我的H5页面又多了花样玩法。给H5的动感交互又增加了无限可能。必竟在以前这种调动设备硬件的活，是Web Dever不敢奢望的东西。。。

知道有这么个神奇的东西后，我立马拿手机试了一下，手机振动那一下，我的心也跟着振动了一下。感慨当今的Web前端真是无限潜力与可能！

单次振动

window.navigator.vibrate(200);
// 或者
window.navigator.vibrate([200]);

振动模式

一组数值描述了设备振动并且不振动的交替时间段。数组中的每个值都将转换成一个整数，然后交替解释为设备应该振动的毫秒数和不振动的毫秒数

整个摩斯电码？

window.navigator.vibrate([200, 100, 200]);

持续振动

API未提供原生的持续方法，可使用setInterval等方式自行实现.

let vibrateInterval
function startPeristentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
}, interval);}

停止振动

当调用 window.navigator.vibrate() 的参数为「0」、空白？数组，或？数组全为「0」时，即可取消目前？进行中的振动。

如

window.navigator.vibrate([0]);

https://developer.mozilla.org/zh-CN/docs/Web/API/Vibration_API

Visual Viewport API

用于查询和修改窗口的可视化视口的属性。视觉视口是屏幕的视觉部分，不包括屏幕上的键盘、收缩缩放区域以外的区域或任何其他不随页面尺寸缩放的屏幕上工件。

获取该视口对象(该对象是只读的)

window.visualViewport

可获取的只读属性

height: 449
offsetLeft: 0
offsetTop: 0
onresize: null
onscroll: null
pageLeft: 0
pageTop: 0
scale: 1
width: 1920

还有两个事件

onresize: (...) 尺寸改变
onscroll: (...) 滚动条位置

https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

精品模板蓝瞳原创精品网站模板

蓝瞳: 蓝瞳视觉; 西西优一点; 小西和成语

手机西西

伙伴链接: MDN Web; ECMAScript 6; 张鑫旭; 品啤酒

联系西西: Q Q : 584645505; 邮箱 : lenton@vip.qq.com; 地址 : 广东省深圳市龙华新区

声明：本站内容为辛苦创作，如转载需注明出处：西西优一点( http://www.ccued.com/ ) 程序:ZBP

Javascript[34天] 各种好玩的WEB API