高级Web应用开发前沿技术简述( 四 ) _Web应用

< output.length; ++i) {output[i].set(input[i]);//实现自定义的音频处理方法，这里只是为了演示把数据取出来又重新放进去～～}return true;//返回true表示当前处理节点仍旧处于活跃状态，用户可以根据自己的业务逻辑确定是否关闭该节点。}}registerProcessor('distortion-processor', DistorationProcessor);//全局注册一下，保证可以创建AudioWorkletNode3.5 WebShare
通过WebShare API可以唤起系统原生的共享功能，在macOS和iOS系统上支持的渠道包括邮件、备忘录、短信、AirDrop等，但是在此之前由于只支持URL的共享，所以实用性并不是很强，也很少有Web页面会特地去使用这个功能。但是在最新版的Safari中增加了对文件共享的支持，包括图片、视频、音频在内多种形式的内容都可以被分享出去，关于分享渠道，除了前面提及的邮件等，还可以分享到微信、QQ等三方App，甚至可以通过Extension的形式为自己的App在系统的共享功能中增加入口，这样就可以实现Web页面内容的快速社交化分享了～，调用也很简单，通过navigator.canShare()判断是否支持共享，通过navigator.share唤起共享，具体如下:
function share() {let file = new File([blob], 'memo.mp3');//这是使用前文Media Recorder API生成的音频文件let filesArray = [file];//注意这里需要array类型的入参，意味着一次可以共享多个文件if (navigator.canShare && navigator.canShare({files: filesArray})) {navigator.share({files: filesArray,title: 'memo.mp3',text:'I just created a really interesting recording!',})}}3.6 Speech Recognition
这是一项很酷的功能，简单来说就是在Web应用中实现语音到文本的实时转换，至于转换的准确率可以不用担心，因为这套API在macOS上采用的就是Siri引擎，同时支持多种语言，只需要在api中明确需要转换的语言类型即可。使用下面的方法就可以初始化并启动强大的识别功能了：
//start and stop speech recognitionvar recognition;function startRecognition(){if (webkitSpeechRecognition) {recognition = new webkitSpeechRecognition();recognition.continuous = true;//要求识别持续进行，直到停止。recognition.interimResults = true;//设置是否允许临时结果，临时结果是识别的中间过程，这时候返回结果的isFinal = false 。recognition.lang = 'cmn-Hans-CN'; //普通话 (中国大陆)recognition.onresult = onRecognitionResult;//收到结果回调时执行的方法recognition.onend = onRecognitionEnd;//识别结束时调用的方法recognition.start();}}function stopRecognition(){if(recognition){recognition.stop();}}在demo中笔者尝试用Media Recorder录了一段语音，然后使用Speech Recognition进行转换，测试下来整体感觉翻译的很流畅，速度很快，准确率基本上没有问题，需要注意的是由于需要使用Siri引擎，所以要在系统偏好或设置中打开Siri或听写功能。具体的使用效果你们可以感受一下。

文章插图

文章插图

这部分功能看起来是比较值得期待的，语音输入作为一个交互入口，应该会有比较强的可用场景，比如语音搜索、在线笔记等。
3.7 MediaSession
当用户在Safari中播放音视频时，macOS的状态栏和iOS的负一屏就会出现一个Now Playing widget，但是点击这个widget后会发现其实它只是展示了一个网页标题，并没有其他的任何信息，不过现在通过media session API就可以在widget中增加更丰富的内容，比如播放进度、快进、快退、暂停操作等，总之media session API在Web应用和系统的其他组件之间实现了媒体状态的共享，这也是WWDC21 很重要的一部分内容，更详细的内容可以参考另外一个session: Coordinate media playback in Safari with Group Activities [5].

4 关于Demo和调试为了便于大家调试本文提及的部分功能，我把demo的代码放在了这里[6] 。
可以使用Mac自带的Apache进行调试，调试的步骤如下：