uniapp 文本转语音
uniapp 文本转语音
- 基于 Minimax API 的 UniApp 文本转语音工具，支持文本分段、队列播放、暂停恢复等功能。
- 目前只内置了 Minimax文本转语音
- Minimax的语音生成技术以其自然、情感丰富和实时性强而著称
API_KEY、GroupId获取方法
https://platform.minimaxi.com/user-center/basic-information/interface-key
NPM地址
特性
- 🎯 自动文本分段处理
- 🔄 队列播放管理
- ⏯️ 支持暂停/恢复
- 📦 轻量级封装
- 🎨 完整的事件系统
- 💫 支持长文本处理
安装
npm install uniapp-text-to-speech
基础使用
import SpeechSynthesisUtil from 'uniapp-text-to-speech';
// 初始化
const tts = new SpeechSynthesisUtil({API_KEY: 'your_minimax_api_key', // Minimax API密钥GroupId: 'your_group_id', // Minimax 组IDMAX_QUEUE_LENGTH: 3， // 可选：音频队列最大长度modelConfig: { // 可选：音频生成配置model: 'speech-01-240228',voice_setting: {"voice_id": "female-tianmei","speed": 1,"vol": 1,}},// 其他配置...}
});// 基础播放
try {await tts.textToSpeech('你好，世界！');
} catch (error) {console.error('语音合成失败:', error);
}
分段使用
- 模拟AI大模型流式返回数据
import SpeechSynthesisUtil from 'uniapp-text-to-speech';
// 初始化
const tts = new SpeechSynthesisUtil({API_KEY: 'your_minimax_api_key', // Minimax API密钥GroupId: 'your_group_id', // Minimax 组ID
});const mockArray = ['你好，', '我是', '一个ai','机器人', ',我的名', '字', '叫做', '阿强']// 自动会处理合成分段：["你好"，"我是一个ai机器人"，"我的名字叫做阿强"]// 基础播放
try {mockArray.map(item => {await tts.textToSpeech(item);})await tts.flushRemainingText()} catch (error) {console.error('语音合成失败:', error);
}
高级功能
1. 事件监听
import { EventType } from 'uniapp-text-to-speech';
// 监听合成开始
tts.on(EventType.SYNTHESIS_START, ({ text }) => {console.log('开始合成文本:', text);
});
// 监听播放开始
tts.on(EventType.AUDIO_PLAY, ({ currentText, remainingCount }) => {console.log('正在播放:', currentText);console.log('剩余数量:', remainingCount);
});
// 监听播放结束
tts.on(EventType.AUDIO_END, ({ finishedText }) => {console.log('播放完成:', finishedText);
});
// 监听错误
tts.on(EventType.ERROR, ({ error }) => {console.error('发生错误:', error);
});
2. 暂停和恢复
// 暂停播放
tts.pause();
// 恢复播放
tts.resume();
// 切换播放/暂停状态
tts.togglePlay();
3. 长文本分段处理
// 自动按标点符号分段处理长文本
await tts.processText('这是第一句话。这是第二句话！这是第三句话？');
// 强制处理剩余未播放的文本
await tts.flushRemainingText();
// 重置文本处理器
tts.resetTextProcessor();
4. 状态管理
// 获取当前状态
const state = tts.getState();
console.log('是否正在播放:', state.isPlaying);
console.log('是否已暂停:', state.isPaused);
// 重置所有状态
tts.reset();
API 文档
构造函数选项
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| API_KEY | string | 是 | Minimax API密钥 |
| GroupId | string | 是 | Minimax 组ID |
| MAX_QUEUE_LENGTH | number | 否 | 音频队列最大长度，默认为3 |
| modelConfig | object | 否 | 合成语音配置，参考minimaxi |
事件类型
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| SYNTHESIS_START | 开始合成 | { text: string } |
| SYNTHESIS_END | 合成结束 | { text: string } |
| AUDIO_PLAY | 开始播放 | { currentText: string, remainingCount: number } |
| AUDIO_END | 播放结束 | { finishedText: string } |
| PAUSE | 暂停播放 | - |
| RESUME | 恢复播放 | - |
| ERROR | 发生错误 | { error: Error } |
主要方法
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| textToSpeech | 文本转语音 | text: string | Promise |
| processText | 处理长文本 | text: string | Promise |
| pause | 暂停播放 | - | void |
| resume | 恢复播放 | - | void |
| togglePlay | 切换播放状态 | - | void |
| reset | 重置所有状态 | - | void |
| on | 添加事件监听 | event: EventType, callback: Function | void |
| off | 移除事件监听 | event: EventType, callback: Function | void |
注意事项
- 需要先在 Minimax 申请 API_KEY 和 GroupId
- 文本会自动按标点符号分段处理，支持的标点符号优先级：
- 高优先级：。！？
- 中优先级：；：
- 低优先级：，、
- 音频队列最大长度默认为3，可以通过构造函数参数修改
- 播放失败时会自动重试，如需手动触发可调用 manualPlay 方法
完整的示例代码
<template><div class="speech-container"><!-- 文本输入区域 --><textarea v-model="inputText" placeholder="请输入要转换的文本":disabled="isProcessing"></textarea><!-- 控制按钮区域 --><div class="control-panel"><button @click="startPlayback" :disabled="isProcessing || !inputText">{{ isProcessing ? '处理中...' : '开始播放' }}</button><button @click="handlePlayPause" :disabled="!canTogglePlay">{{ isPaused ? '继续' : '暂停' }}</button><button @click="handleStop" :disabled="!isPlaying && !isPaused">停止</button></div><!-- 状态显示区域 --><div class="status-panel"><div class="status-item"><span>状态:</span><span :class="statusClass">{{ status }}</span></div><div class="status-item"><span>进度:</span><div class="progress-bar"><div class="progress-fill" :style="{ width: `${progress}%` }"></div><span>{{ progress }}%</span></div></div></div><!-- 错误信息显示 --><div v-if="errorMessage" class="error-message">{{ errorMessage }}</div></div>
</template><script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import SpeechSynthesisUtil, { EventType } from 'uniapp-text-to-speech';// 响应式状态
const inputText = ref('');
const isProcessing = ref(false);
const isPaused = ref(false);
const isPlaying = ref(false);
const status = ref('就绪');
const progress = ref(0);
const errorMessage = ref('');// 计算属性
const canTogglePlay = computed(() => {return isPlaying.value || isPaused.value;
});const statusClass = computed(() => {return {'status-ready': status.value === '就绪','status-playing': status.value === '播放中','status-paused': status.value === '已暂停','status-error': status.value.includes('错误')};
});// 初始化语音工具
const speechUtil = new SpeechSynthesisUtil({API_KEY: 'your_api_key',GroupId: 'your_group_id'
});// 设置事件监听
const setupEventListeners = () => {// 状态变化监听speechUtil.on(EventType.STATE_CHANGE, ({ newState }) => {isPaused.value = newState.isPaused;isPlaying.value = newState.isPlaying;status.value = newState.isPlaying ? '播放中' : newState.isPaused ? '已暂停' : newState.isError ? '错误' : '就绪';});// 进度监听speechUtil.on(EventType.PROGRESS, ({ currentIndex, totalChunks }) => {progress.value = Math.round(((currentIndex + 1) / totalChunks) * 100);});// 错误监听speechUtil.on(EventType.ERROR, ({ error }) => {errorMessage.value = error.message;status.value = '错误';});// 播放结束监听speechUtil.on(EventType.AUDIO_END, () => {if (progress.value === 100) {resetState();}});
};// 开始播放
const startPlayback = async () => {if (!inputText.value) return;isProcessing.value = true;errorMessage.value = '';try {await speechUtil.processText(inputText.value);await speechUtil.flushRemainingText();} catch (error) {errorMessage.value = `处理失败: ${error.message}`;} finally {isProcessing.value = false;}
};// 处理播放/暂停
const handlePlayPause = () => {speechUtil.togglePlay();
};// 处理停止
const handleStop = () => {speechUtil.reset();resetState();
};// 重置状态
const resetState = () => {isProcessing.value = false;isPaused.value = false;isPlaying.value = false;status.value = '就绪';progress.value = 0;errorMessage.value = '';
};// 生命周期钩子
onMounted(() => {setupEventListeners();
});onBeforeUnmount(() => {speechUtil.reset();
});
</script><style scoped>
.speech-container {padding: 20px;max-width: 600px;margin: 0 auto;
}textarea {width: 100%;height: 150px;padding: 10px;margin-bottom: 20px;border: 1px solid #ddd;border-radius: 4px;resize: vertical;
}.control-panel {display: flex;gap: 10px;margin-bottom: 20px;
}button {padding: 8px 16px;border: none;border-radius: 4px;background-color: #4CAF50;color: white;cursor: pointer;
}button:disabled {background-color: #cccccc;cursor: not-allowed;
}.status-panel {background-color: #f5f5f5;padding: 15px;border-radius: 4px;
}.status-item {display: flex;align-items: center;margin-bottom: 10px;
}.progress-bar {flex: 1;height: 20px;background-color: #ddd;border-radius: 10px;overflow: hidden;margin-left: 10px;position: relative;
}.progress-fill {height: 100%;background-color: #4CAF50;transition: width 0.3s ease;
}.error-message {margin-top: 20px;padding: 10px;background-color: #ffebee;color: #c62828;border-radius: 4px;
}.status-ready { color: #2196F3; }
.status-playing { color: #4CAF50; }
.status-paused { color: #FF9800; }
.status-error { color: #F44336; }
</style>
许可证
MIT
作者
乔振 qiaozhenleve@gmail.com