文章详情 - 首页

:::align-left 
Web API 是浏览器提供的一组用于与 Web 页面交互的接口和方法。以下是常用的 Web API： 
 
1. DOM API：提供了一组现代 JavaScript 对象，用于操作网页中的 HTML 和 XML 文档元素。 
2. Event API：为页面上发生的事件提供了一套机制，例如鼠标单击、键盘按键、文本输入、滚动等。 
3. XMLHttpRequest API：允许 JavaScript 通过 HTTP 发送异步请求，与服务器进行数据交换。 
4. Fetch API：提供了一个更简洁和灵活的接口，使用 Promise 实现异步网络请求，并支持更强大的数据类型和格式。 
5. Web Storage API：提供了一种在 Web 浏览器中存储数据的机制，包括 localStorage 和 sessionStorage。 
6. IndexedDB API：提供了一种支持事务处理的高级本地数据库，用于离线数据存储和快速查询。 
7. Canvas API：提供了一种绘制 2D 图形和动画的方式。 
8. Web Audio API：提供了一种处理音频数据的方式，让开发者可以获得更多的控制和灵活性。 
9. WebRTC API：提供了一种支持实时通信和视频会议的机制。 
10. Web Workers API：允许在后台运行 JavaScript 程序，提高页面响应速度和用户体验。 
 
除此之外，还有许多其他的 Web API，例如 Geolocation API、Fullscreen API、Battery API、Web Speech API 等，它们扩展了浏览器的功能，并使得 Web 应用程序可以更加强大和交互性。 
 
 
**1. 标签页通信--频道** 
``` 
 function BroadChannel(cb){ 
 // 获取频道 
 this.get = function(channelname){ 
 return this.channelMap.get(channelname) 
 } 
 // 获取默认频道名称 
 this.getDefaultName = function(){ 
 return 'broad-channel-' + (this.channelMap.size + 1) 
 } 
 // 获取所有频道数 
 this.getLength = function(){ 
 return this.channelMap.size 
 } 
 // 创建频道 
 this.create = function(channelname){ 
 const self = this 
 const name = channelname || self.getDefaultName() 
 const channel = new BroadcastChannel(name) 
 channel.onmessage = function(ev){ 
 const message = { 
 data: ev.data, 
 name, 
 time: Date.now() 
 } 
 cb && cb(message) 
 } 
 channel.onmessageerror = function(ev){ 
 console.error(ev.data); 
 } 
 self.channelMap.set(name,channel) 
 self.channelLength = self.getLength() 
 return channel 
 } 
 // 开通频道 
 this.open = function (channelname){ 
 const channel = this.get(channelname) 
 return channel || this.create(channelname) 
 } 
 // 关闭频道 
 this.close = function(channelname){ 
 const channel = this.get(channelname) 
 if( channel ){ 
 channel.close() 
 } 
 } 
 // 删除频道 
 this.delete = function(channelname){ 
 this.close(channelname) 
 this.channelMap.delete(channelname) 
 this.channelLength = this.getLength() 
 } 
 // 判断是否存在相同频道 
 this.has = function(channelname){ 
 return this.channelMap.has(channelname) 
 } 
 // 发送消息 
 this.postMessage = function(channelname, data){ 
 const channel = this.get(channelname) 
 if( channel ){ 
 try { 
 // 正常 
 channel.postMessage(data) 
 }catch (e) { 
 // 频道已关闭,重新创建频道 
 this.delete(channelname) 
 this.open(channelname) 
 this.postMessage(channelname, data) 
 } 
 }else{ 
 console.warn('【channel:'+channelname+'】: channel is not defined, you should first execute open method'); 
 } 
 } 
 // 初始化 
 this.reset = function (){ 
 // 频道名称集合 
 this.channelMap = new Map() 
 this.channelLength = this.getLength() 
 } 
 this.reset() 
 } 
 
 const channel = new BroadChannel((data)=>{ 
 console.log(data); 
 
 }) 
 channel.open('test').postMessage('test',111) 
 channel.open('test2').postMessage('test2',222) 
 console.log(channel); 
``` 
 
**2. 语音识别和语音合成** 
``` 
 function Speech(option,cb){ 
 this.voiceToText = function(){ 
 if( !this.recognition ){ 
 return 
 } 
 // 开始识别用户的语音 
 this.recognition.start(); 
 // 处理识别结果 
 this.recognition.onresult = (event) => { 
 const result = event.results[event.results.length - 1][0].transcript; 
 cb && cb(result) 
 } 
 } 
 this.textToVoice = function(text){ 
 if( !this.synthesis ){ 
 return 
 } 
 if( typeof SpeechSynthesisUtterance === 'undefined' ){ 
 console.warn('SpeechSynthesisUtterance is undefined') 
 return 
 } 
 const speech = new SpeechSynthesisUtterance(text); 
 this.synthesis.speak(speech); 
 } 
 this.resetRecognition = function (){ 
 if( typeof window.webkitSpeechRecognition !== 'undefined'){ 
 this.recognition = new window.webkitSpeechRecognition() 
 Object.keys(this.option).forEach((key)=>{ 
 this.recognition[key] = this.option[key] 
 }) 
 }else{ 
 console.warn('webkitSpeechRecognition is undefined') 
 this.recognition = null 
 } 
 } 
 this.setLanguage = function(lang){ 
 this.recognition.lang = lang 
 } 
 this.resetSynthesis = function (){ 
 if( typeof window.speechSynthesis !== 'undefined'){ 
 this.synthesis = window.speechSynthesis 
 }else{ 
 console.warn('speechSynthesis is undefined') 
 this.synthesis = null 
 } 
 } 
 this.reset = function (option={}){ 
 this.option = Object.assign({ 
 lang: navigator.language || 'zh-CN', 
 continuous: true 
 },option) 
 this.resetRecognition() 
 this.resetSynthesis() 
 } 
 this.reset() 
 } 
 const speech = new Speech({},(data)=>{ 
 console.log(data); 
 }) 
 speech.voiceToText() 
 speech.textToVoice('你好,世界! Hello World!') 
```