vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记！

vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记！

背景

语音识别技术的普及使得语音转写逐渐成为电脑输入的重要方式之一，而实时语音转写更是越来越多的应用场景。本文介绍如何在VS Code中开发一个语音实时转写插件，并将实时转写的结果保存到本地mp3文件中。

准备

在进行实时语音转写插件的开发之前，需要准备以下工具和环境：

1. 麦克风及扬声器设备
2. Node.js 环境
3. VS Code 编辑器
4. Web Speech API 实时语音转写接口
5. Lamejs MP3编码库

实现步骤

1. 创建VSCode插件项目

首先，在VS Code中创建一个新的插件项目，请参考官方文档或使用Yeoman生成器。

2. 获取音频流

使用Web Speech API获取声音流，示例代码如下：

var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.lang = 'en-US';
recognition.onresult = function(event) {
  var result = event.results[event.results.length - 1];
  if (result.isFinal) {
    // 处理最终的文本结果
  } else {
    // 处理实时的文本结果
  }
}
recognition.start();
// 注意：WebKitSpeechRecognition需要在HTTPS站点上运行（或者在localhost上运行）

3. 实时文本转写

根据获取到的音频流，实时地调用Web Speech API进行文本转写，示例代码如下。

src = new MediaStream();
source = audioContext.createMediaStreamSource(src);
source.connect(scriptProcessor);
scriptProcessor.onaudioprocess = function(e) {
  var buffer = e.inputBuffer.getChannelData(0);
  recognition && recognition.continuous && recognition.abort();
  getBuffer(buffer, function(buf) {
    recognition.start();
    socket.emit('data', buf);
  });
};
function getBuffer(buffer, callback) {
  var pcm = new Int16Array(buffer.length);
  for (var i = 0; i < buffer.length; i++) {
    var val = buffer[i];
    if (val < 0) {
      val = 32768 + val * 32768;
    } else {
      val = 32767 * val;
    }
    pcm[i] = val;
  }
  var data = new Uint8Array(pcm.buffer);
  var mp3Data = encoder.encodeBuffer(data);
  callback(mp3Data);
}

4. 将转写结果写入到文本文件中

在实现文本转写的同时，将得到的文本结果写入到VS Code的编辑器文本文件中，示例代码如下。

const editor = vscode.window.activeTextEditor;
if (editor) {
  editor.edit(editBuilder => {
    editBuilder.insert(new vscode.Position(editor.document.lineCount, 0), text);
  });
}

5. 将音频保存到本地

在得到音频数据流之后，使用Lamejs库进行MP3编码，并将编码结果写入到本地的mp3文件中，示例代码如下。

var encoder = new lamejs.Mp3Encoder(1, sampleRate, 128);
var sampleBlockSize = 1152;
var left = new Int16Array(sampleBlockSize);
var mp3Blob;
function encode(buffer) {
  var remaining = buffer.length;
  var offset = 0;
  var mp3Buf;
  while (remaining >= sampleBlockSize) {
    var clearBuffer = offset === 0;
    var len = encoder.encodeBuffer(left, buffer.subarray(offset, offset + sampleBlockSize), clearBuffer);
    remaining -= sampleBlockSize;
    offset += sampleBlockSize;
    if (len > 0) {
      mp3Buf = encoder.flush();
    }
    if (mp3Buf) {
      mp3Blob = new Blob([mp3Blob, mp3Buf], { type: "audio/mpeg" });
    }
  }
  if (remaining > 0) {
    left.set(buffer.subarray(offset));
  }
}

踩坑日记

1. VS Code插件运行的上下文是Node.js环境，需要注意Web Speech API、Lamejs等浏览器端库的兼容性问题。
2. 需要注意Web Speech API在不同浏览器下的差异性问题。
3. 由于实时转写过程会持续消耗麦克风资源，因此需要注意对于麦克风的占用和释放，以避免意外崩溃。
4. 需要注意VS Code的文本编辑器API使用方式，以正确地将转写结果写入到编辑器中。

结语

通过本文的介绍，我们了解了如何在VS Code中开发一个语音实时转写插件，并将实时转写的结果保存到本地mp3文件中。在实现过程中，我们需要注意Web Speech API、Lamejs、Node.js等方面的兼容性和差异性问题，并注意麦克风资源的占用和释放。