让你的网站更有趣：四个不可错过的 Web API

在日常开发中，前端工程师总是和各种api打交道，在这篇文章中，我们将探讨一些有趣的Web API技术，这些技术可以让前端开发更加有趣和意料之外的惊喜。同时，我们还将探讨如何使用这些API来创建令人兴奋应用程序。这几个API分别是：

• Web Speech API
• navigtor.getBattewry
• navigtor.vibrate
• navigator.onLine

Web Speech API

Web Speech API是浏览器提供的和用户进行语音交互的一项功能， 提供了两种不同方向的API， Speech recognition（语音识别）和Speech synthesis（文字转语音）。

Speech recognition

Speech recognition API需要麦克风等音频输入设备的支持，目前主要在Chrome PC和 Chrome Android  33版本上支持，由于浏览器还没有广泛支持，chrome在调用时需要使用带有webkit前缀，另外在Firefox 桌面端和移动端在 Gecko 44+ 中都支持，不过需要设置相关权限，感兴趣的同学可自行查找资料进行配置。

demo示例：

代码示例：

html:

<div id="container" style="height: 600px; background-color: #eee;" /> 

Javascript:

// 创建SpeechRecognition对象 chrome中要使用前缀webkit
const recognition = new webkitSpeechRecognition();
// 设置语言为普通话
recognition.lang = 'cmn-Hans-CN';
// 设置是持续听还是听到声音之后就关闭接收。通过设置`continuous`属性值实现
// newRecognition.continuous = true;
// 开始监听
recognition.start();
// 监听语音识别结果
recognition.onresult = event => {
   const result = event.results[ 0 ][ 0 ].transcript;
   if ( result.indexOf( '红色' ) > -1 ){
       document.getElementById( 'container' ).style.backgroundColor = 'red';
   }
   // 对识别结果进行处理
   console.log( '你说了：',result );
   document.getElementById( 'container' ).innerHTML = result;
};
// 监听语音识别错误
recognition.onerror = event => {
   console.error( '语音识别发生错误：',event.error );
};

更多关于Speech API的详情，请参见：SpeechRecognition

Speech Synthesis

Speech Synthesis API 的兼容性要比Speech recognition API好得多，不需要携带前缀即可使用。对于患有视力障碍的用户或无暇阅读网页内容的用户，有了Speech Synthesis API,都会带来一定的便利性。

代码示例：

html：

<input type="text" id="inputTxt">
<button id="speakBtn">文字转换成语音</button>

Javascript:

// 创建 SpeechSynthesis 实例 
const synth = speechSynthesis;
// 获取语音合成输入框 
const inputTxt = document.querySelector( '#inputTxt' );
// 获取“说话”按钮 
const speakBtn = document.querySelector( '#speakBtn' );
// 给“说话”按钮添加点击事件 
speakBtn.addEventListener( 'click',() => {
   // 创建 SpeechSynthesisUtterance 实例 
   const utterance = new SpeechSynthesisUtterance( inputTxt.value );
   // 设置语音合成配置 
   utterance.voice = synth.getVoices()[ 0 ]; utterance.pitch = 1; utterance.rate = 1;
   // 开始语音合成 
   synth.speak( utterance );
});

更多关于Speech Synthesis API的描述，请参照：# SpeechSynthesis

navigtor.getBattery

navigtor.getBattery API是浏览器检索有关设备电池状态实时的信息。这个 API 返回一个 Promise 对象，该对象包含有关设备电池的信息，例如剩余电量、充电状态和充电时间等。在PC或移动设备上都可使用。

代码示例：

if ( 'getBattery' in navigator ) {
   navigator.getBattery().then( function ( battery ) {
      console.log( "当前电量：" + battery.level * 100 + "%" );
      console.log( "充电状态：" + ( battery.charging ? "正在充电" : "未充电" ) );
   });
} else { 
   console.log( "navigator.getBattery()不受支持" ); 
}

更多关于## navigtor.getBattery方法的描述请参见：BatteryManager

navigtor.vibrate

该方案在震动硬件的设备上产生频率的震动，增强用户交互体验， 如游戏， 提醒！这是一个线上的体验地址：强烈推荐大家用手机访问体验一下：www.audero.it/demo/vibrat…

代码示例：

if (navigator.vibrate) {
   try {
       // 这是一个持续3秒的震动
       window.navigator.vibrate( 3000 )
       // 这是一个震动500毫秒，暂停1秒，震动200毫秒，暂停2秒，然后再震动500毫秒的示例：
       window.navigator.vibrate( [ 500,1000,200,2000,500 ] );
   } catch ( err ) {
       alert( err )
   }

} else { alert( "navigator.vibrate()不受支持" ); }

更多关于navigator.vibrate API的详情，请参照：Navigator.vibrate

navigator.onLine

返回值是boolean， 用于浏览器是否连接上网络，有两个对应的事件online和offline，通常绑定在window上，在网络状态变更时触发，可用在类似于游戏等交互场景。

代码示例：

 window.addEventListener( 'online',function () {
    console.log( '网络已连接' );
    console.log( navigator.onLine );
 })

window.addEventListener( 'offline',function (){
   console.log( '网络已下线' );
   console.log( navigator.onLine );
})

navigator.onLine API和navigator.connection API 可以实现在移动端判断用户是否使用流量观看视频或其他流量耗费较大的场景，感兴趣的同学可以查询相关资料。

感谢阅读，欢迎交流！