第三十一期：传统前端和多媒体前端

这里记录工作中遇到的技术点，以及自己对生活的一些思考，周三或周五发布。

封面图

一篇自己写的文档，从六个方面简单讲解VueRouter的原理。主要包括以下内容：

history
Link 和 RouterView组件
实例化过程
路由守卫的实现

传统前端 VS 多媒体前端

技术的进步是不知不觉的，有时候我们对它毫无感知，但是它已经发生了天翻地覆的变化。

前端技术也是如此。

前两天在写文章的时候突然想起来之前自己还注册过一个知乎账号，于是就重新登录上去，水了一篇文章。

我这才发现原来知乎有一个非常友好的功能，可以把自己写的文章自动配图，并且生成视频或者合成语音。

这个功能太赞了。

我这个人就是这样，遇到新的技术或者感觉比较有趣的技术点必须琢磨琢磨它这个到底是什么实现的。

当然浏览器端根据文本自动配图，合成视频这个功能我肯定是实现不了的。按照我的猜测，理论上应该是先从网上爬取对应句子的图片，然后合成流媒体的数据，最后将这个流媒体数据保存为一个可以播放的视频文件即可。

合成视频的功能我做不来，但是我可以做个简单的，比如做个web端的变声器。

做这个变声器我得先确认浏览器是不是可以识别我说的话。

别说，这个语音识别的API还真的有，还真被我找到了。

SpeechRecognition 这个API就是浏览器端的语音识别API。

它的主要的方法有:

start()
speechend()
result()
error()

有兴趣的可以去MDN上查下这个API的具体用法。

找到了就得写个demo测试一下，赶紧找个之前的项目，把这个API的语法先都写了一遍。

// vue文件里的内容

data() {
    return {
      reco: new webkitSpeechRecognition() || new window.SpeechRecognition(),
      SpeechGrammarList:
        new webkitSpeechGrammarList() || new SpeechGrammarList(),
      actions: ['open', 'close'],
    }
  },
  // 方法
startTest() {
      let actions = ['open', 'close']
      var grammar =
        '#JSGF V1.0; grammar actions; public <action> = ' +
        actions.join(' | ') +
        ' ;'
      this.SpeechGrammarList.addFromString(grammar, 1)
      this.reco.grammars = this.SpeechGrammarList
      this.continuous = false
      this.reco.lang = 'en-US'
      this.reco.interimResults = false
      this.reco.maxAlternatives = 1
      this.reco.start()
      this.reco.onaudiostart = function(e) {
        console.log('onaudiostart', e)
      }
      this.reco.onaudioend = function(e) {
        conosle.log('audioend', e)
      }

      this.reco.onsoundstart = function(e) {
        console.log('soundstart', e)
      }
      this.reco.onsoundend = function(e) {
        console.log('soundend-', e)
      }
      this.reco.onresult = function(event) {
        console.log(event)
        var action = event.results[0][0].transcript
        alert(action)
      }
      this.reco.onspeechend = function() {
        console.log('speechend')
        this.reco.stop()
      }
      this.reco.onnomatch = function(event) {
        alert("I didn't recognise that action.")
      }
      this.reco.onnomatch = function(event) {
        alert('come err.')
      }
    },

然后上传到服务器，访问页面，点击按钮，本来以为会见证奇迹。但是什么反应都没有。

看来这个API的兼容性是真的有问题，也或者说刚好我的手机不支持这个API。

当然，在找这个API的过程当中，我也看到了很多其他相关的API，比如：

Web 文本识别API
任何时候都能接收数据的API
布局稳定性API
web Audio API

等等，一些非常有意思的API。

然后我突然间意识到，原来前端技术已经渗透到多媒体和AI领域了。

当我再次打开淘宝，看到它展示给我的界面，我才第一次真正的意识到，这些界面已经从原来的传统的展示型的界面，变成了已多媒体为主的，可以实时互动的界面。

当然，这些技术的成熟，归根结底都是业务推动的，我们当前的业务中和这些技术关系不大，这些技术我们想用也用不到。

写传统的前端也好，写多媒体相关的前端也好，对待技术的热情，我们得持续保持。

最后

个人公众号《JavaScript高级程序设计》

公众号内回复”vue-router“ 或 ”router“即可收到 VueRouter源码分析的文档。

感谢您的点赞，转发，关注。