科大讯飞实时语音转写

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
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值