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

后端代码链接

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

前端参考

利用js小插件js-audio-recorder

官方文档：/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>