為富文本編輯器添加錄音功能可以增強內容創作的多樣性。以下是幾種實現方案：

方案一：基于Web Audio API原生實現

實現步驟

1. 獲取用戶麥克風權限

   navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => { /* 處理音頻流 */ }).catch(err => console.error('麥克風訪問被拒絕:', err));
   

2. 錄音功能實現

   const audioChunks = [];
   const mediaRecorder = new MediaRecorder(stream);mediaRecorder.ondataavailable = event => {audioChunks.push(event.data);
   };mediaRecorder.onstop = () => {const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });// 處理錄音結果
   };
   

3. 集成到富文本編輯器

   • 將音頻轉換為Base64或上傳到服務器
   • 在編輯器中插入音頻標簽或自定義播放組件

方案二：使用第三方錄音庫

推薦庫

1. RecordRTC - 功能強大的錄音庫

   const recorder = RecordRTC(stream, {type: 'audio',mimeType: 'audio/webm'
   });
   

2. wavesurfer.js - 帶波形顯示的錄音庫

3. Recorder.js - 輕量級錄音解決方案

方案三：云服務集成

推薦服務

1. AWS Transcribe - 錄音+轉文字
2. Azure Speech Services
3. 阿里云智能語音交互

富文本編輯器集成示例（以Quill為例）

// 添加錄音按鈕到工具欄
quill.getModule('toolbar').addHandler('audio', function() {// 顯示錄音UIshowRecordingUI(quill);
});function showRecordingUI(quill) {// 創建錄音界面const modal = createRecordingModal();modal.querySelector('.start').addEventListener('click', startRecording);modal.querySelector('.stop').addEventListener('click', () => {stopRecording(audioBlob => {// 上傳音頻獲取URLuploadAudio(audioBlob).then(url => {quill.insertEmbed(quill.getSelection().index, 'audio', url);});modal.remove();});});
}

優化考慮

1. 格式兼容性

   • 提供MP3、WAV等多種格式選項
   • 考慮瀏覽器兼容性進行格式轉換

2. 用戶體驗

   • 添加錄音波形可視化
   • 提供錄音時長限制
   • 實現暫停/繼續功能

3. 性能優化

   • 使用Web Worker處理音頻數據
   • 分塊上傳大音頻文件

4. 安全考慮

   • 用戶授權明確提示
   • 音頻內容審核機制

完整實現示例

<button id="recordButton">開始錄音</button>
<button id="stopButton" disabled>停止</button>
<audio id="audioPreview" controls></audio><script>
const recordBtn = document.getElementById('recordButton');
const stopBtn = document.getElementById('stopButton');
const audioPreview = document.getElementById('audioPreview');let mediaRecorder, audioChunks = [];recordBtn.addEventListener('click', async () => {const stream = await navigator.mediaDevices.getUserMedia({ audio: true });mediaRecorder = new MediaRecorder(stream);mediaRecorder.ondataavailable = event => {audioChunks.push(event.data);};mediaRecorder.onstop = () => {const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });audioPreview.src = URL.createObjectURL(audioBlob);audioChunks = [];};mediaRecorder.start();recordBtn.disabled = true;stopBtn.disabled = false;
});stopBtn.addEventListener('click', () => {mediaRecorder.stop();recordBtn.disabled = false;stopBtn.disabled = true;
});
</script>

選擇哪種方案取決于項目需求、預算和技術棧。對于簡單需求，原生API足夠；復雜場景可考慮專業庫或云服務。