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

terrence386

发布于 2022-07-15 10:10:37

3920

发布于 2022-07-15 10:10:37

文章被收录于专栏：JavaScript高级程序设计

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

封面图

一篇自己写的文档，从六个方面简单讲解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，比如：