vue使用科大讯飞实时语音转写示例
官方文档:https://www.xfyun.cn/doc/asr/rtasr/API.html
1.需要申请先APPID、API_KEY
2.把官方案例js的示例下载下来
3.引入了下载的官方案例中的几个文件
4.示例代码
`<template>
<div class="home">
<button id="startBtn">
开始
</button>
<button id="endBtn">
结束
</button>
<div id="output"></div>
<div id="time" v-show="false">00: 00</div>
</div>
</template>`
export default {
name: 'HomeView',
components: {
},
mounted() {
this.audioInit()
},
methods: {
audioInit() {
// 初始化语音转写
let startBtn = document.getElementById("startBtn")
// 结束按钮
let endBtn = document.getElementById("endBtn")
// 接收识别的文本
let output = document.getElementById("output")
// 记时器
let time = document.getElementById("time")
// 如果使用的是webpack,或者报错 请尝试这种写法 const recorderWorker = new Worker('../assets/js/transformpcm.worker.js')
const recorderWorker = new Worker(new URL('../utils/transformpcm.worker.js', import.meta.url))
// 记录处理的缓存音频
let buffer = []
let AudioContext = window.AudioContext || window.webkitAudioContext
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
recorderWorker.onmessage = function (e) {
buffer.push(...e.data.buffer)
}
class IatRecorder {
constructor(config) {
this.config = config
this.state = 'ing'
//以下信息在控制台-我的应用-实时语音转写 页面获取
this.appId = '5febed45'
this.apiKey = 'a61ff9579e78926146465f9b48be93c2'
}
start() {
this.stop()
if (navigator.getUserMedia && AudioContext) {
this.state = 'ing'
if (!this.recorder) {
var context = new AudioContext()
this.context = context
console.log(context)
this.recorder = context.createScriptProcessor(0, 1, 1)
var getMediaSuccess = (stream) => {
var mediaStream = this.context.createMediaStreamSource(stream)
this.mediaStream = mediaStream
this.recorder.onaudioprocess = (e) => {
this.sendData