使用Trae AI功能為編輯器添加話筒，調(diào)用windows讀寫(xiě)功能

TaC

這幾天為了這個(gè)東東，真折騰。

原想在程序上添加語(yǔ)音轉(zhuǎn)文字的功能，網(wǎng)上查了好些資料，并使用Trae 提問(wèn)，可回復(fù)的內(nèi)容，真心看不懂，找不到所在文件的路徑。

這是通過(guò)AI分析DZ程序的回復(fù)，有點(diǎn)看不明白，先留個(gè)底。
要在 Discuz 程序的編輯器里增加一個(gè)語(yǔ)音轉(zhuǎn)文字的功能，可按以下步驟實(shí)現(xiàn)：

### 1. 選擇語(yǔ)音轉(zhuǎn)文字服務(wù)
可以選擇使用第三方語(yǔ)音轉(zhuǎn)文字服務(wù)，例如百度語(yǔ)音識(shí)別、阿里云語(yǔ)音識(shí)別或者騰訊云語(yǔ)音識(shí)別。這里以百度語(yǔ)音識(shí)別為例進(jìn)行說(shuō)明。

### 2. 申請(qǐng) API Key 和 Secret Key
訪問(wèn)百度語(yǔ)音開(kāi)放平臺(tái)，創(chuàng)建一個(gè)新應(yīng)用，獲取 API Key 和 Secret Key 。

### 3. 引入必要的 JavaScript 庫(kù)
在編輯器頁(yè)面引入百度語(yǔ)音識(shí)別的 JavaScript SDK。

### 4. 修改編輯器頁(yè)面
找到 Discuz 編輯器相關(guān)的模板文件，從工具調(diào)用歷史來(lái)看，可能涉及到編輯器相關(guān)的文件有 `post_editor_attribute.htm` 和 `lang_editor.php` 。不過(guò)具體的編輯器核心文件可能未完全展示，下面以假設(shè)的方式添加語(yǔ)音轉(zhuǎn)文字按鈕和功能。
修改語(yǔ)言文件
在 `lang_editor.php` 中添加新的語(yǔ)言項(xiàng)：

```php
// ... existing code ...
$lang = array(
    // ... existing code ...
    'editor_voice_to_text' => '語(yǔ)音轉(zhuǎn)文字',
    // ... existing code ...
);
// ... existing code ...
```
修改模板文件
在編輯器模板文件中添加語(yǔ)音轉(zhuǎn)文字按鈕，并綁定相應(yīng)的 JavaScript 事件。假設(shè)在 `post_editor_attribute.htm` 中添加：

```html
// ... existing code ...
<ul class="swiper-wrapper" id="post_extra_tb">
    <!-- ... existing code ... -->
    <li class="swiper-slide" id="voice_to_text_b"><a>{lang editor_voice_to_text}</a></li>
    <!-- ... existing code ... -->
</ul>
// ... existing code ...
```
```

### 5. 實(shí)現(xiàn) JavaScript 邏輯
在頁(yè)面中添加百度語(yǔ)音識(shí)別的 JavaScript 代碼：

```html
// ... existing code ...
<script type="text/javascript">
    // 百度語(yǔ)音識(shí)別配置
    var client = new BaiduSpeech();
    client.setAppId('your_app_id');
    client.setApiKey('your_api_key', 'your_secret_key');

    function startVoiceRecognition() {
        client.start({
            lang: 'zh', // 識(shí)別語(yǔ)言
            cuid: 'your_cuid',
            pdt: 1536 // 普通話輸入法模型
        });

        client.onmessage = function (res) {
            if (res.result) {
                var text = res.result[0];
                // 將識(shí)別結(jié)果插入到編輯器中
                var editor = document.getElementById('your_editor_id');
                if (editor) {
                    editor.value += text;
                }
            }
        };
    }
</script>
// ... existing code ...
```
```

### 注意事項(xiàng)
- 請(qǐng)將 your_app_id 、 your_api_key 、 your_secret_key 和 your_cuid 替換為你自己的實(shí)際信息。
- your_editor_id 需要替換為 Discuz 編輯器的實(shí)際 ID。
- 由于工具調(diào)用歷史可能未包含所有相關(guān)文件，若上述文件不是實(shí)際的編輯器文件，請(qǐng)?zhí)峁└辔募畔⒁员氵M(jìn)一步調(diào)整。

然后根據(jù)提示，找到百度語(yǔ)音轉(zhuǎn)文字的啥東西，一看，價(jià)格不菲呀。也就是網(wǎng)上瘋轉(zhuǎn)的所謂AI系列東西。
這哪是添加功能，這不是要人命嘛。按小時(shí)收費(fèi)。
后來(lái)一想，手機(jī)上不是可以嘛，根據(jù)輸入法，也找到了官方網(wǎng)址，可就是沒(méi)有電腦端的應(yīng)用。谷歌好象有，可鏈接不上，這把人搞得一暈一暈的。

回到原址，再向Trae提問(wèn)：

你的這個(gè)回復(fù)先放放，我也不明白編輯器ID?，F(xiàn)在，不去研究這個(gè)ID。那我們換個(gè)思路，在編輯器里添加話筒圖標(biāo)，點(diǎn)擊后，能喚起電腦自帶的聽(tīng)寫(xiě)功能。比如win11，打開(kāi)記事本，或文字編輯器，按windows圖標(biāo)+H，就可以喚起電腦系統(tǒng)自帶的聽(tīng)寫(xiě)功能。那么，怎么更改網(wǎng)站代碼，或者怎么實(shí)現(xiàn)這個(gè)功能。

得到回復(fù)【非常漂亮，并測(cè)試成功】：

要在網(wǎng)站編輯器里添加話筒圖標(biāo)，點(diǎn)擊后喚起 Windows 11 系統(tǒng)自帶的聽(tīng)寫(xiě)功能（按 Windows 鍵 + H ），可以借助 JavaScript 模擬按鍵事件。不過(guò)，瀏覽器出于安全考慮，通常不允許直接模擬 Windows 鍵 + H 這樣的系統(tǒng)級(jí)組合鍵。但可以通過(guò)提示用戶(hù)手動(dòng)觸發(fā)，或者引導(dǎo)用戶(hù)了解該功能。

以下是實(shí)現(xiàn)步驟和示例代碼：

### 1. 添加話筒圖標(biāo)
在編輯器相關(guān)的模板文件中添加一個(gè)話筒圖標(biāo)按鈕，假設(shè)該文件路徑為 d:\wamp64\www\tianya\template\default\touch\forum\post_editor_attribute.htm 。

```html
// ... existing code ...
<ul class="swiper-wrapper" id="post_extra_tb">
    <!-- ... existing code ... -->
    <li class="swiper-slide" id="voice_dictation_btn">
        <a href="javascript:void(0);">
            <img src="path/to/microphone-icon.png" alt="語(yǔ)音聽(tīng)寫(xiě)">
        </a>
    </li>
    <!-- ... existing code ... -->
</ul>
// ... existing code ...
```
```

請(qǐng)將 path/to/microphone-icon.png 替換為實(shí)際的話筒圖標(biāo)路徑。

### 2. 實(shí)現(xiàn)提示功能
添加 JavaScript 代碼，當(dāng)用戶(hù)點(diǎn)擊話筒圖標(biāo)時(shí)，彈出提示框告知用戶(hù)如何觸發(fā)系統(tǒng)聽(tīng)寫(xiě)功能。

```html
// ... existing code ...
<script>
function showVoiceDictationTip() {
    alert('請(qǐng)按下 Windows 鍵 + H 來(lái)啟動(dòng)系統(tǒng)自帶的語(yǔ)音聽(tīng)寫(xiě)功能。');
}
</script>
// ... existing code ...
```
```

### 總結(jié)
由于瀏覽器安全限制，無(wú)法直接通過(guò)代碼觸發(fā) Windows 鍵 + H 組合鍵。上述方案通過(guò)添加圖標(biāo)和提示信息，引導(dǎo)用戶(hù)手動(dòng)觸發(fā)系統(tǒng)聽(tīng)寫(xiě)功能。你可以根據(jù)實(shí)際需求調(diào)整圖標(biāo)樣式和提示信息內(nèi)容。

回復(fù)是到位，可哪個(gè)是編輯器文件呢，在官方論壇上查了半天，也沒(méi)看到是哪個(gè)文件。
沒(méi)辦法，死辦法一個(gè)一個(gè)的查。
本人使用的模板是直接在默認(rèn)模板上修改的，所以路徑上供大家參考，forum/post_editor_body.htm。
約107行，把修改過(guò)的代碼完整復(fù)制過(guò)去，并測(cè)試編輯器的顯示情況。

1. <!-- 添加話筒，讀寫(xiě) -->
   
2.                         <ul class="swiper-wrapper" id="post_extra_tb" onselectstart="return false">
   
3.              <li class="swiper-slide" id="voice_dictation_btn">
   
4.                 <a href="javascript:void(0);" onclick="showVoiceDictationTip()">
   
5.                   <img src="images/ty_ht.png" alt="語(yǔ)音聽(tīng)寫(xiě)">
   
6.                 </a>
   
7.              </li>
   
8.             </ul>
   
9.             <script>
   
10.                                 function showVoiceDictationTip() { alert('請(qǐng)按下 Windows 鍵 + H 來(lái)啟動(dòng)系統(tǒng)自帶的語(yǔ)音聽(tīng)寫(xiě)功能。'); }
    
11.             </script>

復(fù)制代碼

至此，電腦端windows系統(tǒng)調(diào)用語(yǔ)音功能到位，下面就是細(xì)節(jié)上的修改了。
但是蘋(píng)果電腦怎么弄，希望有蘋(píng)果電腦的，弄好后，分享一下。

TaC

哈，接著上樓，再向Trae提問(wèn)。

經(jīng)過(guò)測(cè)試，上面方法可用，但是，如果是蘋(píng)果電腦，怎么優(yōu)化上面的代碼

靠，回復(fù)來(lái)了：

在蘋(píng)果電腦上，喚起系統(tǒng)自帶的語(yǔ)音聽(tīng)寫(xiě)功能可以通過(guò)按下 Fn + Control + 空格 組合鍵。我們可以修改之前的代碼，當(dāng)用戶(hù)使用蘋(píng)果設(shè)備時(shí)，提示相應(yīng)的操作方法。

### 修改模板文件
在 d:\wamp64\www\tianya\template\default\touch\forum\post_editor_attribute.htm 文件中保持圖標(biāo)按鈕不變，但修改 JavaScript 代碼來(lái)根據(jù)用戶(hù)設(shè)備類(lèi)型給出不同提示。

```html
// ... existing code ...
<script>
function showVoiceDictationTip() {
    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    if (isMac) {
        alert('請(qǐng)按下 Fn + Control + 空格 來(lái)啟動(dòng)系統(tǒng)自帶的語(yǔ)音聽(tīng)寫(xiě)功能。');
    } else {
        alert('請(qǐng)按下 Windows 鍵 + H 來(lái)啟動(dòng)系統(tǒng)自帶的語(yǔ)音聽(tīng)寫(xiě)功能。');
    }
}
</script>
// ... existing code ...
```
```

上述代碼通過(guò) navigator.platform 來(lái)判斷用戶(hù)是否使用蘋(píng)果設(shè)備，如果是則提示 Fn + Control + 空格 組合鍵，否則提示 Windows 鍵 + H 組合鍵。

我的媽呀，可我沒(méi)有蘋(píng)果啊。怎么測(cè)試呢。

TaC

遺憾來(lái)了，打開(kāi)抖音短視頻，讀寫(xiě)正常，可沒(méi)有標(biāo)點(diǎn)符號(hào)

TaC

糾正一下，行數(shù)不對(duì)，測(cè)試使用的 是有背景底色的，更換png格式后，顯示有其它圖標(biāo)。
位置錯(cuò)了？大佬提示一下。

TaC

TaC 發(fā)表于 2025-4-27 22:29
遺憾來(lái)了，打開(kāi)抖音短視頻，讀寫(xiě)正常，可沒(méi)有標(biāo)點(diǎn)符號(hào)

今天測(cè)試，標(biāo)點(diǎn)符號(hào)正常，有點(diǎn)怪

TaC

目前發(fā)現(xiàn)問(wèn)題:
1，代碼放到標(biāo)題一欄，標(biāo)題及主題分類(lèi)，無(wú)法輸入。
2，代碼放到編輯一欄，出來(lái)其它編輯欄的圖標(biāo)背景。
希望官方解答，并能充分利用這個(gè)功能。因?yàn)閷?duì)于網(wǎng)站，或是會(huì)員，它免費(fèi)。