@aiyiran/myclaw 1.0.101 → 1.0.102

package/assets/myclaw-inject.js

@@ -2,15 +2,18 @@
  * ============================================================================
  * MyClaw UI Inject — 浏览器端注入脚本
  * ============================================================================
- * 
+ *
  * 功能：
  *   1. 页面顶部 fixed 显示 myclaw 版本号
  *   2. 在聊天工具栏新增讯飞语音输入按钮
  *      - 光标处插入文字
  *      - 持续录入，手动停止
  *      - 讯飞 60 秒断开后自动重连
- * 
- * 依赖：voice-input.js（讯飞 VoiceInput SDK，需先于本脚本加载）
+ *   3. 拦截 chat-tts-btn 按钮，点击后使用讯飞 TTS 播放消息
+ *
+ * 依赖：
+ *   - voice-input.js（讯飞 VoiceInput SDK）
+ *   - voice-output.js（讯飞 VoiceOutput SDK）
  * ============================================================================
  */
 (function () {
@@ -20,11 +23,13 @@
 
   // ═══ 状态 ═══
   var voice = null;           // VoiceInput 实例
+  var tts = null;             // VoiceOutput 实例
   var recording = false;      // 用户层面的录音状态（独立于 SDK 的 status）
   var pendingText = "";       // 当前这轮识别的文字（实时更新）
   var committedText = "";     // 已经提交到 textarea 的文字（上一轮累积）
   var cursorOffset = 0;       // 录音开始时光标在 textarea 中的位置
   var injected = false;
+  var ttsBtnHooked = false;   // TTS 按钮是否已绑定
 
   // ═══ 1. 右下角版本标签（点击测试麦克风） ═══
   function createVersionBar() {
@@ -396,6 +401,92 @@
     console.log("[myclaw-inject] ✅ 发送按钮拦截器已挂载");
   }
 
+  // ═══ 7. TTS 按钮绑定（讯飞语音合成） ═══
+
+  function initTts() {
+    if (typeof window.VoiceOutput === "undefined") {
+      console.error("[myclaw-tts] VoiceOutput SDK 未加载");
+      return;
+    }
+    if (tts) return;
+
+    tts = new window.VoiceOutput({
+      APPID: 'de6ec59e',
+      APISecret: 'ZTA3ZDU3YjAyNDUyZGVkNjQwMGM5MWNi',
+      APIKey: '37104a0463a5460d7571869324b667d5',
+      vcn: 'aisbabyxu',
+      onAudio: function (audioBuffer) {
+        console.log('[myclaw-tts] audio chunk:', audioBuffer.byteLength, 'bytes');
+      },
+      onStatusChange: function (oldStatus, newStatus) {
+        console.log('[myclaw-tts] status:', oldStatus, '->', newStatus);
+      },
+      onError: function (err) {
+        console.error('[myclaw-tts] error:', err);
+      }
+    });
+
+    console.log("[myclaw-tts] ✅ 讯飞 TTS SDK 已初始化");
+  }
+
+  /**
+   * 从 .chat-tts-btn 按钮获取对应的消息文字
+   * 按钮通常在消息气泡下方，需要向上查找
+   */
+  function extractMessageText(ttsBtn) {
+    // 尝试找到包含此按钮的消息气泡
+    var bubble = ttsBtn.closest('.chat-message__bubble');
+    if (!bubble) {
+      // 尝试上一级元素的兄弟元素
+      var parent = ttsBtn.parentElement;
+      if (parent) {
+        var prevSibling = parent.previousElementSibling;
+        if (prevSibling) {
+          bubble = prevSibling.querySelector('.chat-message__bubble');
+        }
+      }
+    }
+
+    if (bubble) {
+      // 获取气泡内的文字，移除多余空白
+      var text = bubble.textContent || '';
+      return text.replace(/\s+/g, ' ').trim();
+    }
+
+    return '';
+  }
+
+  function hookTtsButton() {
+    if (ttsBtnHooked) return;
+    ttsBtnHooked = true;
+
+    // 使用捕获阶段拦截点击
+    document.addEventListener('click', function (e) {
+      var btn = e.target.closest('.chat-tts-btn');
+      if (!btn) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      var text = extractMessageText(btn);
+      if (!text) {
+        console.warn('[myclaw-tts] 未找到消息文字');
+        return;
+      }
+
+      console.log('[myclaw-tts] 播放:', text.substring(0, 50) + (text.length > 50 ? '...' : ''));
+
+      if (!tts) {
+        initTts();
+      }
+      if (tts) {
+        tts.speak(text);
+      }
+    }, true);
+
+    console.log("[myclaw-inject] ✅ TTS 按钮拦截器已挂载");
+  }
+
   function fallbackCopy(text) {
     var ta = document.createElement("textarea");
     ta.value = text;
@@ -415,6 +506,9 @@
     // 初始化 VoiceInput SDK
     initVoice();
 
+    // 初始化 TTS SDK
+    initTts();
+
     // 持续监听 DOM 变化，确保按钮始终在
     new MutationObserver(function () {
       if (!document.querySelector("#myclaw-voice-btn")) {
@@ -430,6 +524,9 @@
 
     // 挂载发送拦截
     hookSendButton();
+
+    // 挂载 TTS 按钮拦截
+    hookTtsButton();
   }
 
   if (document.readyState === "loading") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiyiran/myclaw",
-  "version": "1.0.101",
+  "version": "1.0.102",
   "description": "",
   "main": "index.js",
   "bin": {

package/patch-manifest.json

@@ -1,6 +1,6 @@
 {
   "_doc": "MyClaw 注入清单 (auto-generated)。strategy: auto | on | off",
-  "_generated": "2026-04-01T17:04:53.758Z",
+  "_generated": "2026-04-01T18:02:28.628Z",
   "agents": [
     {
       "id": "danci",

package/voice-output/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>语音合成演示</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, sans-serif; background: #f5f5f5; padding: 40px 20px; }
+    .container { max-width: 500px; margin: 0 auto; }
+    h1 { font-size: 20px; color: #333; margin-bottom: 20px; }
+    textarea {
+      width: 100%; height: 120px; padding: 12px; font-size: 15px;
+      border: 1px solid #ddd; border-radius: 8px; resize: vertical;
+      line-height: 1.6;
+    }
+    .controls { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
+    .btn {
+      padding: 12px 24px; font-size: 15px;
+      border: none; border-radius: 8px; cursor: pointer;
+      color: white; transition: all 0.2s;
+    }
+    .btn-speak { background: #28a745; }
+    .btn-speak:hover { background: #218838; }
+    .btn-stop { background: #dc3545; }
+    .btn-stop:hover { background: #c82333; }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .status { margin-top: 10px; font-size: 13px; color: #888; }
+    .voice-select { margin-top: 12px; }
+    .voice-select label { font-size: 13px; color: #666; margin-right: 8px; }
+    .voice-select select { padding: 6px 10px; font-size: 14px; border-radius: 6px; border: 1px solid #ddd; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🔊 讯飞语音合成演示</h1>
+    <textarea id="text" placeholder="输入要合成的文字...">你好世界，这是语音合成测试</textarea>
+
+    <div class="voice-select">
+      <label>音色:</label>
+      <select id="vcn">
+        <option value="x4_xiaoyan">小燕 - 普通话女声</option>
+        <option value="x4_yezi">小露 - 普通话女声</option>
+        <option value="aisjiuxu">许久 - 普通话男声</option>
+        <option value="aisjinger">小婧 - 普通话女声</option>
+        <option value="aisbabyxu">许小宝 - 童声</option>
+      </select>
+    </div>
+
+    <div class="controls">
+      <button class="btn btn-speak" id="speakBtn">🔊 开始合成</button>
+      <button class="btn btn-stop" id="stopBtn" disabled>⏹ 停止</button>
+    </div>
+
+    <div class="status" id="status">就绪</div>
+  </div>
+
+  <script src="voice-output.js"></script>
+  <script>
+    var textEl = document.getElementById('text');
+    var vcnEl = document.getElementById('vcn');
+    var speakBtn = document.getElementById('speakBtn');
+    var stopBtn = document.getElementById('stopBtn');
+    var statusEl = document.getElementById('status');
+
+    var tts = null;
+
+    function updateStatus(text) {
+      statusEl.textContent = text;
+    }
+
+    speakBtn.onclick = function () {
+      var text = textEl.value.trim();
+      if (!text) {
+        alert('请输入要合成的文字');
+        return;
+      }
+
+      if (!tts) {
+        // 使用 OpenClaw 配置的讯飞账号
+        tts = new VoiceOutput({
+          APPID: 'de6ec59e',
+          APISecret: 'ZTA3ZDU3YjAyNDUyZGVkNjQwMGM5MWNi',
+          APIKey: '37104a0463a5460d7571869324b667d5',
+          vcn: vcnEl.value,
+          onAudio: function (audioBuffer) {
+            console.log('[demo] received audio chunk:', audioBuffer.byteLength, 'bytes');
+          },
+          onStatusChange: function (oldStatus, newStatus) {
+            console.log('[tts] status:', oldStatus, '->', newStatus);
+            var labels = {
+              idle: '就绪',
+              connecting: '连接中...',
+              synthesizing: '🔊 合成中...',
+              stopping: '停止中...',
+              stopped: '已停止'
+            };
+            statusEl.textContent = labels[newStatus] || newStatus;
+
+            speakBtn.disabled = (newStatus !== 'idle');
+            stopBtn.disabled = (newStatus === 'idle' || newStatus === 'stopping');
+          },
+          onError: function (err) {
+            console.error('[tts] error:', err);
+            statusEl.textContent = '❌ ' + err;
+          }
+        });
+      }
+
+      tts.vcn = vcnEl.value;
+      tts.speak(text);
+    };
+
+    stopBtn.onclick = function () {
+      if (tts) {
+        tts.stop();
+      }
+    };
+  </script>
+</body>
+</html>

package/voice-output/voice-output.js

@@ -0,0 +1,299 @@
+/**
+ * VoiceOutput - 独立语音合成 SDK
+ * 基于讯飞语音合成 WebAPI（流式版）
+ *
+ * 零依赖，纯原生 JS，任何静态 HTML 页面都能用
+ *
+ * 用法：
+ *   const tts = new VoiceOutput({
+ *     onAudio: (audioData) => { ... }
+ *   });
+ *   tts.speak("你好世界");  // 开始合成
+ *   tts.stop();            // 停止
+ */
+(function (global) {
+  'use strict';
+
+  // ============ 默认配置 ============
+  var DEFAULT_CONFIG = {
+    APPID: '',
+    APISecret: '',
+    APIKey: '',
+    url: 'wss://tts-api.xfyun.cn/v2/tts',
+    host: 'tts-api.xfyun.cn',
+    vcn: 'x4_xiaoyan',    // 默认语音
+    speed: 50,            // 语速 0-100
+    pitch: 50,             // 音调 0-100
+    volume: 50,            // 音量 0-100
+    aue: 'lame',          // 音频格式: lame=mp3, raw=pcm
+  };
+
+  // ============ 工具函数 ============
+
+  function hmacSHA256(key, message) {
+    var enc = new TextEncoder();
+    return crypto.subtle.importKey(
+      'raw', enc.encode(key), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']
+    ).then(function (cryptoKey) {
+      return crypto.subtle.sign('HMAC', cryptoKey, enc.encode(message));
+    }).then(function (sig) {
+      return arrayBufferToBase64(sig);
+    });
+  }
+
+  function arrayBufferToBase64(buffer) {
+    var binary = '';
+    var bytes = new Uint8Array(buffer);
+    for (var i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+    return btoa(binary);
+  }
+
+  function base64ToArrayBuffer(base64) {
+    var binaryStr = atob(base64);
+    var bytes = new Uint8Array(binaryStr.length);
+    for (var i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i);
+    return bytes.buffer;
+  }
+
+  // ============ VoiceOutput 类 ============
+
+  function VoiceOutput(opts) {
+    opts = opts || {};
+
+    this.APPID = opts.APPID || DEFAULT_CONFIG.APPID;
+    this.APISecret = opts.APISecret || DEFAULT_CONFIG.APISecret;
+    this.APIKey = opts.APIKey || DEFAULT_CONFIG.APIKey;
+    this.url = opts.url || DEFAULT_CONFIG.url;
+    this.host = opts.host || DEFAULT_CONFIG.host;
+    this.vcn = opts.vcn || DEFAULT_CONFIG.vcn;
+    this.speed = opts.speed || DEFAULT_CONFIG.speed;
+    this.pitch = opts.pitch || DEFAULT_CONFIG.pitch;
+    this.volume = opts.volume || DEFAULT_CONFIG.volume;
+    this.aue = opts.aue || DEFAULT_CONFIG.aue;
+
+    // 回调
+    this.onAudio = opts.onAudio || function (audioBuffer) {};  // 音频数据回调
+    this.onStatusChange = opts.onStatusChange || function () {};
+    this.onError = opts.onError || function () {};
+
+    // 内部状态
+    this.status = 'idle'; // idle | connecting | synthesizing | stopping | stopped
+    this.webSocket = null;
+    this.audioContext = null;
+    this.audioChunks = [];
+    this.audioSource = null;
+    this.onAudioEnd = null;
+  }
+
+  VoiceOutput.prototype._getWebSocketUrl = function () {
+    var self = this;
+    var date = new Date().toUTCString();
+    var signatureOrigin = 'host: ' + self.host + '\ndate: ' + date + '\nGET /v2/tts HTTP/1.1';
+
+    return hmacSHA256(self.APISecret, signatureOrigin).then(function (signature) {
+      var authOrigin = 'api_key="' + self.APIKey + '", algorithm="hmac-sha256", headers="host date request-line", signature="' + signature + '"';
+      var authorization = btoa(authOrigin);
+      return self.url + '?authorization=' + authorization + '&date=' + encodeURIComponent(date) + '&host=' + self.host;
+    });
+  };
+
+  VoiceOutput.prototype._initAudioContext = function () {
+    if (!this.audioContext) {
+      this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    return this.audioContext;
+  };
+
+  VoiceOutput.prototype._playAudio = function (audioBuffer) {
+    var self = this;
+
+    // 创建 Blob URL 用于 <audio> 元素播放
+    var mimeType = this.aue === 'lame' ? 'audio/mpeg' : 'audio/wav';
+    var blob = new Blob([audioBuffer], { type: mimeType });
+    var blobUrl = URL.createObjectURL(blob);
+
+    // 停止之前的播放
+    if (this.currentAudio) {
+      this.currentAudio.pause();
+      URL.revokeObjectURL(this.currentAudioSrc);
+    }
+
+    // 创建 audio 元素播放
+    var audio = new Audio(blobUrl);
+    this.currentAudio = audio;
+    this.currentAudioSrc = blobUrl;
+
+    audio.play().then(function () {
+      console.log('[tts] playing...');
+    }).catch(function (err) {
+      console.error('[tts] play error:', err);
+      self.onError('播放失败: ' + err.message);
+    });
+
+    audio.onended = function () {
+      URL.revokeObjectURL(blobUrl);
+      if (self.onAudioEnd) {
+        self.onAudioEnd();
+      }
+    };
+  };
+
+  VoiceOutput.prototype._playBuffer = function (audioBuffer) {
+    var source = this.audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(this.audioContext.destination);
+    source.start(0);
+    this.audioSource = source;
+
+    source.onended = function () {
+      if (self.onAudioEnd) {
+        self.onAudioEnd();
+      }
+    };
+  };
+
+  VoiceOutput.prototype.speak = function (text, opts) {
+    if (this.status === 'synthesizing') {
+      console.warn('[tts] already synthesizing');
+      return;
+    }
+
+    opts = opts || {};
+    this.audioChunks = [];
+    this._setStatus('connecting');
+
+    var self = this;
+    this._getWebSocketUrl().then(function (url) {
+      var ws = new WebSocket(url);
+      self.webSocket = ws;
+
+      var timeout = setTimeout(function () {
+        if (ws.readyState === WebSocket.CONNECTING) {
+          ws.close();
+          self.onError('WebSocket 连接超时');
+          self._setStatus('idle');
+        }
+      }, 5000);
+
+      ws.onopen = function () {
+        clearTimeout(timeout);
+        self._setStatus('synthesizing');
+
+        // 构造 TTS 请求
+        var textBase64 = btoa(unescape(encodeURIComponent(text)));
+
+        var payload = {
+          common: { app_id: self.APPID },
+          business: {
+            aue: self.aue,
+            auf: 'audio/L16;rate=16000',
+            vcn: opts.vcn || self.vcn,
+            speed: opts.speed || self.speed,
+            pitch: opts.pitch || self.pitch,
+            volume: opts.volume || self.volume,
+            tte: 'UTF8',
+          },
+          data: {
+            status: 2,
+            text: textBase64,
+          },
+        };
+
+        ws.send(JSON.stringify(payload));
+        console.log('[tts] sent text:', text.substring(0, 50) + (text.length > 50 ? '...' : ''));
+      };
+
+      ws.onmessage = function (event) {
+        try {
+          var msg = JSON.parse(event.data);
+
+          if (msg.code !== 0) {
+            self.onError('TTS error ' + msg.code + ': ' + msg.message);
+            self._cleanup();
+            return;
+          }
+
+          // 音频数据
+          if (msg.data && msg.data.audio) {
+            var audioData = base64ToArrayBuffer(msg.data.audio);
+            self.audioChunks.push(audioData);
+            self.onAudio(audioData);
+
+            // 全部接收完成后播放
+            if (msg.data.status === 2) {
+              console.log('[tts] synthesis complete, chunks:', self.audioChunks.length);
+              // 合并所有 chunks
+              var totalLen = 0;
+              for (var i = 0; i < self.audioChunks.length; i++) {
+                totalLen += self.audioChunks[i].byteLength;
+              }
+              var merged = new Uint8Array(totalLen);
+              var offset = 0;
+              for (var j = 0; j < self.audioChunks.length; j++) {
+                merged.set(new Uint8Array(self.audioChunks[j]), offset);
+                offset += self.audioChunks[j].byteLength;
+              }
+              self._playAudio(merged.buffer);
+              self._setStatus('idle');
+            }
+          }
+        } catch (err) {
+          console.error('[tts] parse error:', err);
+        }
+      };
+
+      ws.onerror = function (err) {
+        console.error('[tts] WebSocket error:', err);
+        self.onError('WebSocket 连接错误');
+        self._cleanup();
+      };
+
+      ws.onclose = function () {
+        clearTimeout(timeout);
+        if (self.status !== 'idle') {
+          self._setStatus('idle');
+        }
+      };
+    }).catch(function (err) {
+      self.onError('签名失败: ' + err);
+      self._setStatus('idle');
+    });
+  };
+
+  VoiceOutput.prototype.stop = function () {
+    this._setStatus('stopping');
+    this._cleanup();
+    this._setStatus('idle');
+  };
+
+  VoiceOutput.prototype._cleanup = function () {
+    if (this.webSocket) {
+      this.webSocket.close();
+      this.webSocket = null;
+    }
+    if (this.audioSource) {
+      try { this.audioSource.stop(); } catch (e) {}
+      this.audioSource = null;
+    }
+  };
+
+  VoiceOutput.prototype._setStatus = function (status) {
+    if (this.status !== status) {
+      var old = this.status;
+      this.status = status;
+      this.onStatusChange(old, status);
+    }
+  };
+
+  VoiceOutput.prototype.destroy = function () {
+    this.stop();
+    if (this.audioContext) {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+  };
+
+  // 暴露到全局
+  global.VoiceOutput = VoiceOutput;
+
+})(typeof window !== 'undefined' ? window : this);