sur-voice 1.0.0

package/src/utils/ChatUtils.ts

@@ -0,0 +1,63 @@
+
+
+const ChatUtils = {
+
+
+  /**
+   * 图片加载完成，聊天对话框scroll拉到最下
+   * @param id 容器id
+   */
+  imageLoad(id: string): void {
+    this.scrollBottom(id);
+    const messageBox = document.getElementById(id);
+    if (messageBox) {
+      const images = messageBox.getElementsByTagName("img");
+      if (images) {
+        const arr: string[] = [];
+        for (let i = 0; i < images.length; i++) {
+          arr[i] = images[i].src;
+        }
+        this.preloadImages(arr).finally(() => {
+          this.scrollBottom(id);
+        });
+      }
+    }
+  },
+
+  /**
+   * 加载图片
+   * @param arr 图片路径[]
+   */
+  preloadImages(arr: string[]): Promise<any> {
+    let loadedImage = 0;
+    return new Promise((resolve) => {
+      for (let i = 0; i < arr.length; i++) {
+        const image = new Image();
+        image.src = arr[i];
+        image.onload = () => {
+          loadedImage++;
+          if (loadedImage === arr.length) {
+            resolve("");
+          }
+        };
+        image.onerror = () => {
+          loadedImage++;
+          if (loadedImage === arr.length) {
+            resolve("");
+          }
+        };
+      }
+    });
+  },
+  /**
+   * 滚动条到最下方
+   * @param id 容器id
+   */
+  scrollBottom(id: string): void {
+    const div = document.getElementById(id);
+    if (div) {
+      div.scrollTop = div.scrollHeight;
+    }
+  }
+};
+export default ChatUtils;

package/src/utils/Recorder.js

@@ -0,0 +1,628 @@
+/**
+ * @Time    :   2019/03/08 17:09:53
+ * @Author  :   wyh19
+ * @Contact :   wyh_19@163.com
+ * @Desc    :   录音器类，支持AudioWorklet和ScriptProcessorNode降级方案
+ */
+
+class Recorder {
+  constructor(onaudioprocess, showWaveFn) {
+    this.config = {
+      sampleBits: 16, // 采样数位 8, 16
+      sampleRate: 16000, // 采样率(1/6 44100)
+    };
+    this.size = 0; // 录音文件总长度
+    this.buffer = []; // 录音缓存
+    this.realtimeBuffer = [];
+    this.audioContext = null;
+    this.mediaStream = null;
+    this.mediaStreamSource = null;
+    this.audioWorkletNode = null;
+    this.scriptProcessor = null;
+    this.isRecording = false;
+    
+    // 录音实时获取数据
+    this.input = function(data) {
+      // 记录数据，这儿的buffer是二维的
+      this.buffer.push(new Float32Array(data));
+      this.size += data.length;
+    };
+    this.onaudioprocess = onaudioprocess;
+    this.showWaveFn = showWaveFn;
+    
+    // 检查是否支持 AudioWorklet
+    this.supportsAudioWorklet = 
+      typeof AudioWorkletNode !== 'undefined' && 
+      typeof OfflineAudioContext !== 'undefined';
+  }
+
+  // 设置如采样位数的参数
+  setOption(option) {
+    // 修改采样率，采样位数配置
+    Object.assign(this.config, option);
+  }
+
+  async ready() {
+    try {
+      this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      
+      if (!navigator.mediaDevices) {
+        return Promise.reject(new Error('无法发现指定的硬件设备。'));
+      }
+
+      // 获取麦克风权限
+      this.mediaStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: false,
+          noiseSuppression: false,
+          autoGainControl: false,
+          sampleRate: this.config.sampleRate,
+          channelCount: 1
+        },
+      });
+
+      // 创建音频源
+      this.mediaStreamSource = this.audioContext.createMediaStreamSource(this.mediaStream);
+      
+      // 设置采样率
+      this.inputSampleRate = this.audioContext.sampleRate;
+      this.inputSampleBits = 16;
+      this.outputSampleRate = this.config.sampleRate;
+      this.oututSampleBits = this.config.sampleBits;
+
+      return Promise.resolve();
+    } catch (error) {
+      this.handleError(error);
+      return Promise.reject(error);
+    }
+  }
+
+  // 开始录音
+  async start() {
+    try {
+      if (!this.audioContext || this.audioContext.state === 'closed') {
+        await this.ready();
+      }
+      
+      if (this.audioContext.state === 'suspended') {
+        await this.audioContext.resume();
+      }
+
+      // 清空数据
+      this.buffer.length = 0;
+      this.size = 0;
+      this.isRecording = true;
+
+      if (this.supportsAudioWorklet) {
+        // 使用 AudioWorklet
+        await this.setupAudioWorklet();
+      } else {
+        // 降级使用 ScriptProcessorNode（兼容旧浏览器）
+        this.setupScriptProcessor();
+      }
+
+    } catch (error) {
+      Recorder.throwError('无法开始录音。异常信息:' + (error.code || error.name));
+    }
+  }
+
+  // 设置 AudioWorklet
+  async setupAudioWorklet() {
+    try {
+      // 创建内联 AudioWorklet 处理器
+      const workletProcessor = `
+        class RecorderProcessor extends AudioWorkletProcessor {
+          constructor(options) {
+            super();
+            this.sampleRate = options.processorOptions?.sampleRate || 16000;
+            this.isRecording = true;
+            
+            this.port.onmessage = (event) => {
+              if (event.data.type === 'stop') {
+                this.isRecording = false;
+              }
+            };
+          }
+
+          process(inputs) {
+            if (!this.isRecording) return false;
+            
+            const input = inputs[0];
+            if (input && input.length > 0) {
+              const channelData = input[0];
+              // 发送音频数据到主线程
+              this.port.postMessage({
+                type: 'audioData',
+                audioData: channelData.slice()
+              });
+            }
+            return true;
+          }
+        }
+
+        registerProcessor('recorder-processor', RecorderProcessor);
+      `;
+
+      // 使用 Blob URL 注册 AudioWorklet
+      const blob = new Blob([workletProcessor], { type: 'application/javascript' });
+      const url = URL.createObjectURL(blob);
+      
+      try {
+        await this.audioContext.audioWorklet.addModule(url);
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+
+      // 创建 AudioWorkletNode
+      this.audioWorkletNode = new AudioWorkletNode(this.audioContext, 'recorder-processor', {
+        numberOfInputs: 1,
+        numberOfOutputs: 1,
+        outputChannelCount: [1],
+        processorOptions: {
+          sampleRate: this.config.sampleRate
+        }
+      });
+
+      // 处理接收到的音频数据
+      this.audioWorkletNode.port.onmessage = (event) => {
+        if (!this.isRecording) return;
+        
+        const data = event.data;
+        if (data.type === 'audioData') {
+          this.handleAudioData(data.audioData);
+        }
+      };
+
+      // 连接节点
+      this.mediaStreamSource.connect(this.audioWorkletNode);
+      this.audioWorkletNode.connect(this.audioContext.destination);
+
+    } catch (error) {
+      console.warn('AudioWorklet 初始化失败，降级使用 ScriptProcessorNode:', error);
+      this.setupScriptProcessor();
+    }
+  }
+
+  // 降级使用 ScriptProcessorNode
+  setupScriptProcessor() {
+    console.warn('使用 ScriptProcessorNode（已废弃，建议升级浏览器）');
+    
+    try {
+      const createScript = 
+        this.audioContext.createScriptProcessor || 
+        this.audioContext.createJavaScriptNode;
+      
+      this.scriptProcessor = createScript.call(this.audioContext, 4096, 1, 1);
+
+      // 音频采集
+      this.scriptProcessor.onaudioprocess = (e) => {
+        if (!this.isRecording) return;
+        
+        const data = e.inputBuffer.getChannelData(0);
+        this.handleAudioData(data);
+      };
+
+      // 连接节点
+      this.mediaStreamSource.connect(this.scriptProcessor);
+      this.scriptProcessor.connect(this.audioContext.destination);
+    } catch (error) {
+      Recorder.throwError('无法创建音频处理器: ' + error.message);
+    }
+  }
+
+  // 处理音频数据
+  handleAudioData(audioData) {
+    if (!this.isRecording) return;
+    
+    this.input(audioData);
+    if (this.onaudioprocess) {
+      this.onaudioprocess(this.encodePCMFragment(audioData));
+    }
+    if (this.showWaveFn) {
+      this.toWaveData(audioData);
+    }
+  }
+
+  // 停止录音
+  stop() {
+    this.isRecording = false;
+    
+    // 停止 AudioWorklet
+    if (this.audioWorkletNode) {
+      this.audioWorkletNode.port.postMessage({ type: 'stop' });
+      this.audioWorkletNode.disconnect();
+      this.audioWorkletNode = null;
+    }
+    
+    // 停止 ScriptProcessor
+    if (this.scriptProcessor) {
+      this.scriptProcessor.disconnect();
+      this.scriptProcessor = null;
+    }
+    
+    // 断开媒体流
+    if (this.mediaStreamSource) {
+      this.mediaStreamSource.disconnect();
+    }
+    
+    // 停止音轨（但不关闭AudioContext，以便重新开始）
+    if (this.mediaStream) {
+      this.mediaStream.getTracks().forEach(track => {
+        track.stop();
+      });
+    }
+  }
+
+  // 完全关闭（释放所有资源）
+  close() {
+    this.stop();
+    
+    if (this.audioContext && this.audioContext.state !== 'closed') {
+      this.audioContext.close();
+    }
+    
+    this.audioContext = null;
+    this.mediaStream = null;
+    this.mediaStreamSource = null;
+  }
+
+  // 错误处理
+  handleError(error) {
+    console.error('录音错误:', error);
+    
+    const errorMap = {
+      'PERMISSION_DENIED': '用户拒绝提供信息。',
+      'PermissionDeniedError': '用户拒绝提供信息。',
+      'NOT_SUPPORTED_ERROR': '浏览器不支持硬件设备。',
+      'NotSupportedError': '浏览器不支持硬件设备。',
+      'MANDATORY_UNSATISFIED_ERROR': '无法发现指定的硬件设备。',
+      'MandatoryUnsatisfiedError': '无法发现指定的硬件设备。',
+      'NotAllowedError': '请在浏览器设置中开启麦克风权限!',
+      'NotFoundError': '无法发现指定的硬件设备。',
+      8: '无法发现指定的硬件设备。',
+    };
+
+    const message = errorMap[error.code || error.name] || 
+      `无法打开麦克风。异常信息: ${error.code || error.name || error.message}`;
+    
+    Recorder.throwError(message);
+  }
+
+  // 播放到audio标签中
+  play(audio) {
+    if (!audio) return;
+    const wavBlob = this.getWAVBlob();
+    if (wavBlob) {
+      audio.src = URL.createObjectURL(wavBlob);
+    }
+  }
+
+  // 获取PCM编码的二进制数据
+  getPCM() {
+    this.stop();
+    return this.encodePCM();
+  }
+
+  // 获取不压缩的PCM格式的编码
+  getPCMBlob() {
+    const pcmData = this.getPCM();
+    return pcmData ? new Blob([pcmData]) : null;
+  }
+
+  // 获取WAV编码的二进制数据
+  getWAV(isRecord = true) {
+    this.stop();
+    return this.encodeWAV(isRecord);
+  }
+
+  // 获取不压缩的WAV格式的编码
+  getWAVBlob() {
+    const wavData = this.getWAV(true);
+    return wavData ? new Blob([wavData], { type: 'audio/wav' }) : null;
+  }
+
+  // 采样率转换
+  SRC(input, inputFs, outputFs) {
+    // 输入为空检验
+    if (input == null) {
+      throw Error('Error:\t输入音频为空数组');
+      return null;
+    }
+
+    // 采样率合法检验
+    if (inputFs <= 1 || outputFs <= 1) {
+      throw Error('Error:\t输入或输出音频采样率不合法');
+      return null;
+    }
+
+    // 输入音频长度
+    let len = input.length;
+
+    // 输出音频长度
+    let outlen = Math.round((len * outputFs) / inputFs);
+
+    let output = new Float32Array(outlen);
+    let S = new Float32Array(len);
+    let T = new Float32Array(outlen);
+    // 输入信号归一化
+    for (let i = 0; i < len; i++) {
+      S[i] = input[i] / 32768.0;
+    }
+
+    // 计算输入输出个数比
+    let F = (len - 1) / (outlen - 1);
+    let Fn = 0;
+    let Ceil = 0,
+      Floor = 0;
+    output[0] = input[0];
+    for (let n = 1; n < outlen; n++) {
+      // 计算输出对应输入的相邻下标
+      Fn = F * n;
+      Ceil = Math.ceil(Fn);
+      Floor = Math.floor(Fn);
+
+      // 防止下标溢出
+      if (Ceil >= len && Floor < len) {
+        Ceil = Floor;
+      } else if (Ceil >= len && Floor >= len) {
+        Ceil = len - 1;
+        Floor = len - 1;
+      }
+
+      // 相似三角形法计算输出点近似值
+      T[n] = S[Floor] + (Fn - Floor) * (S[Ceil] - S[Floor]);
+    }
+
+    for (let i = 1; i < outlen; i++) {
+      output[i] = T[i] * 32768.0;
+    }
+    return output;
+  }
+
+  // 数据合并压缩
+  compress(isReplay = false) {
+    if (this.buffer.length === 0) return new Float32Array(0);
+    
+    // 合并
+    var data = new Float32Array(this.size);
+    var offset = 0; // 偏移量计算
+    // 将二维数据，转成一维数据
+    for (var i = 0; i < this.buffer.length; i++) {
+      data.set(this.buffer[i], offset);
+      offset += this.buffer[i].length;
+    }
+    let result = this.SRC(data, this.inputSampleRate, this.outputSampleRate);
+    return result;
+  }
+
+  // 编码PCM数据
+  encodePCM(isReplay = false) {
+    let bytes = this.compress(isReplay);
+    if (!bytes || bytes.length === 0) return null;
+    
+    let sampleBits = Math.min(
+      this.inputSampleBits,
+      isReplay ? this.inputSampleBits : this.oututSampleBits,
+    );
+    let offset = 0;
+    let dataLength = bytes.length * (sampleBits / 8);
+    let buffer = new ArrayBuffer(dataLength);
+    let data = new DataView(buffer);
+
+    // 写入采样数据
+    if (sampleBits === 8) {
+      for (var i = 0; i < bytes.length; i++, offset++) {
+        // 范围[-1, 1]
+        var s = Math.max(-1, Math.min(1, bytes[i]));
+        var val = s < 0 ? s * 128 : s * 127;
+        val = parseInt(val + 128);
+        data.setInt8(offset, val, true);
+      }
+    } else {
+      for (var i = 0; i < bytes.length; i++, offset += 2) {
+        var s = Math.max(-1, Math.min(1, bytes[i]));
+        // 16位直接乘就行了
+        data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+      }
+    }
+
+    return data;
+  }
+
+  // 编码PCM片段
+  encodePCMFragment(fragment) {
+    if (!fragment || fragment.length === 0) return null;
+    
+    let data = new Float32Array(fragment);
+    let bytes = this.SRC(data, this.inputSampleRate, this.outputSampleRate);
+    if (!bytes || bytes.length === 0) return null;
+    
+    let sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
+    let offset = 0;
+    let dataLength = bytes.length * (sampleBits / 8);
+    let buffer = new ArrayBuffer(dataLength);
+    let lastData = new DataView(buffer);
+
+    // 写入采样数据
+    if (sampleBits === 8) {
+      for (var i = 0; i < bytes.length; i++, offset++) {
+        var s = Math.max(-1, Math.min(1, bytes[i]));
+        var val = s < 0 ? s * 128 : s * 127;
+        val = parseInt(val + 128);
+        lastData.setInt8(offset, val, true);
+      }
+    } else {
+      for (var i = 0; i < bytes.length; i++, offset += 2) {
+        var s = Math.max(-1, Math.min(1, bytes[i]));
+        lastData.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+      }
+    }
+
+    return lastData;
+  }
+
+  // 编码WAV数据
+  encodeWAV(isReplay = false) {
+    let bytes = this.encodePCM(isReplay);
+    if (!bytes) return null;
+    
+    let sampleRate = this.outputSampleRate;
+    let sampleBits = Math.min(
+      this.inputSampleBits,
+      isReplay ? this.inputSampleBits : this.oututSampleBits,
+    );
+    let buffer = new ArrayBuffer(44);
+    let data = new DataView(buffer);
+
+    let channelCount = 1; // 单声道
+    let offset = 0;
+
+    // 写入WAV头
+    writeString(data, offset, 'RIFF');
+    offset += 4;
+    data.setUint32(offset, 36 + bytes.byteLength, true);
+    offset += 4;
+    writeString(data, offset, 'WAVE');
+    offset += 4;
+    writeString(data, offset, 'fmt ');
+    offset += 4;
+    data.setUint32(offset, 16, true);
+    offset += 4;
+    data.setUint16(offset, 1, true);
+    offset += 2;
+    data.setUint16(offset, channelCount, true);
+    offset += 2;
+    data.setUint32(offset, sampleRate, true);
+    offset += 4;
+    data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true);
+    offset += 4;
+    data.setUint16(offset, channelCount * (sampleBits / 8), true);
+    offset += 2;
+    data.setUint16(offset, sampleBits, true);
+    offset += 2;
+    writeString(data, offset, 'data');
+    offset += 4;
+    data.setUint32(offset, bytes.byteLength, true);
+    offset += 4;
+
+    // 合并WAV头和PCM数据
+    data = combineDataView(DataView, data, bytes);
+
+    return data;
+  }
+
+  // 转换为波形数据
+  toWaveData(o) {
+    if (!o || o.length === 0) return;
+    
+    var PowerLevel = function(pcmAbsSum, pcmLength) {
+      var power = pcmAbsSum / pcmLength || 0;
+      var level;
+      if (power < 1251) {
+        level = Math.round((power / 1250) * 10);
+      } else {
+        level = Math.round(
+          Math.min(
+            100,
+            Math.max(0, (1 + Math.log(power / 10000) / Math.log(10)) * 100),
+          ),
+        );
+      }
+      return level;
+    };
+
+    var size = o.length;
+    var pcm = new Int16Array(size);
+    var sum = 0;
+    for (var j = 0; j < size; j++) {
+      var s = Math.max(-1, Math.min(1, o[j]));
+      s = s < 0 ? s * 0x8000 : s * 0x7fff;
+      pcm[j] = s;
+      sum += Math.abs(s);
+    }
+
+    var buffers = [];
+    buffers.push(pcm);
+
+    var sizeOld = this.recSize || 0;
+    var addSize = pcm.length;
+
+    var bufferSize = sizeOld + addSize;
+    this.recSize = bufferSize;
+
+    var bufferSampleRate = this.inputSampleRate;
+    var powerLevel = PowerLevel(sum, pcm.length);
+    var duration = Math.round((bufferSize / bufferSampleRate) * 1000);
+    
+    if (this.showWaveFn) {
+      this.showWaveFn(buffers, powerLevel, duration, bufferSampleRate);
+    }
+  }
+
+  // 获取录音状态
+  getState() {
+    return {
+      isRecording: this.isRecording,
+      supportsAudioWorklet: this.supportsAudioWorklet,
+      bufferSize: this.size,
+      duration: this.size > 0 ? Math.round((this.size / this.inputSampleRate) * 1000) : 0,
+    };
+  }
+
+  // 静态方法
+  static throwError(message) {
+    throw new Error(message);
+  }
+
+  // 检查浏览器兼容性
+  static checkCompatibility() {
+    const hasGetUserMedia = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
+    const hasAudioContext = !!(window.AudioContext || window.webkitAudioContext);
+    const hasAudioWorklet = !!(window.AudioWorkletNode && window.OfflineAudioContext);
+    
+    return {
+      hasGetUserMedia,
+      hasAudioContext,
+      hasAudioWorklet,
+      isCompatible: hasGetUserMedia && hasAudioContext,
+      recommendedBrowser: hasAudioWorklet ? 'modern' : 'legacy'
+    };
+  }
+}
+
+/**
+ * 在data中的offset位置开始写入str字符串
+ */
+function writeString(data, offset, str) {
+  for (var i = 0; i < str.length; i++) {
+    data.setUint8(offset + i, str.charCodeAt(i));
+  }
+}
+
+/**
+ * 合并二进制数据
+ */
+function combineDataView(resultConstructor, ...arrays) {
+  let totalLength = 0,
+    offset = 0;
+  // 统计长度
+  for (let arr of arrays) {
+    totalLength += arr.length || arr.byteLength;
+  }
+  // 创建新的存放变量
+  let buffer = new ArrayBuffer(totalLength),
+    result = new resultConstructor(buffer);
+  // 设置数据
+  for (let arr of arrays) {
+    // dataview合并
+    for (let i = 0, len = arr.byteLength; i < len; ++i) {
+      result.setInt8(offset, arr.getInt8(i));
+      offset += 1;
+    }
+  }
+
+  return result;
+}
+
+// 导出 Recorder 类
+export default Recorder;

package/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}