前端—基于Flask框架调用百度接口实现语音识别功能（使用蓝图blueprint）

配合“基于Flask框架调用百度接口实现语音识别功能”使用的前端参考代码

后端代码链接

Python—基于Flask框架调用百度接口实现语音识别功能:基于Flask框架调用百度接口实现语音识别功能（如果链接定向不到文章，可在个人博文中看到）

前端参考

利用js小插件 js-audio-recorder

官方文档：https://www.npmjs.com/package/js-audio-recorder

Tips：如后端view.py中的路由有变化，app.py中的地址有变化，均需要跟随变化下面代码的url地址

<template>
  <div>
    <Button @click="start_luyin">开始录音</Button>
    <Button @click="end_luyin">结束录音</Button>
    <p v-if="messge_audio">
      文字内容是： {{messge_audio}}
    </p>
  </div>
</template>
<script>
  import Recorder from 'js-audio-recorder';
  var recorder = new Recorder({
    sampleBits: 16,                 // 采样位数
    sampleRate: 16000,              // 采样率
    numChannels: 1,                 // 声道
  });
  export default {
    data() {
      return {
        messge_audio: '',
      }
    },
    //定义组建标签
    components: {},
    filters: {},
    //自定义方法
    methods: {
      start_luyin: function () {
        recorder.start().then(() => {
          alert('开始录音')
        })
      },
      end_luyin: function () {
        recorder.stop()
        var pcm_auido = recorder.getPCMBlob()
        console.log(pcm_auido)
        var fromdata = new FormData()
        fromdata.append('pcm_audio', pcm_auido)
        this.axios({
          url: 'http://127.0.0.1:8080/baiduai/',
          method: 'post',
          data: fromdata
        }).then((res) => {
          this.messge_audio = res.data.message
        })
      }
    },
    //钩子方法
    mounted: function () {
      console.log('初始化');


    },
    //监听属性
    watch: {},
    //计算属性
    computed: {}


  }


</script>

<style>

</style>