You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
591 lines
13 KiB
591 lines
13 KiB
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
<text class="title">文字转语音示例</text>
|
|
</view>
|
|
|
|
<view class="form-section">
|
|
<!-- 文本输入 -->
|
|
<view class="form-item">
|
|
<text class="label">输入文本：</text>
|
|
<textarea
|
|
v-model="formData.text"
|
|
placeholder="请输入要转换的文本内容"
|
|
class="textarea"
|
|
maxlength="500"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 音色选择 -->
|
|
<view class="form-item">
|
|
<text class="label">音色：</text>
|
|
<picker
|
|
@change="onVoiceTypeChange"
|
|
:value="voiceTypeIndex"
|
|
:range="voiceTypeList"
|
|
range-key="name"
|
|
>
|
|
<view class="picker">
|
|
{{ voiceTypeList[voiceTypeIndex]?.name || '请选择音色' }}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 语速调节 -->
|
|
<view class="form-item">
|
|
<text class="label">语速：{{ formData.speed }}</text>
|
|
<slider
|
|
v-model="formData.speed"
|
|
:min="-2"
|
|
:max="6"
|
|
:step="1"
|
|
show-value
|
|
class="slider"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 音量调节 -->
|
|
<view class="form-item">
|
|
<text class="label">音量：{{ formData.volume }}</text>
|
|
<slider
|
|
v-model="formData.volume"
|
|
:min="-10"
|
|
:max="10"
|
|
:step="1"
|
|
show-value
|
|
class="slider"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 音频格式选择 -->
|
|
<view class="form-item">
|
|
<text class="label">音频格式：</text>
|
|
<radio-group @change="onCodecChange" class="radio-group">
|
|
<label class="radio-item" v-for="codec in codecList" :key="codec.value">
|
|
<radio :value="codec.value" :checked="formData.codec === codec.value" />
|
|
<text>{{ codec.name }}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="button-section">
|
|
<button
|
|
@click="loadVoiceTypes"
|
|
:disabled="loading"
|
|
class="btn btn-secondary"
|
|
>
|
|
{{ loading ? '加载中...' : '加载音色列表' }}
|
|
</button>
|
|
|
|
<button
|
|
@click="convertToVoice"
|
|
:disabled="!formData.text || converting"
|
|
class="btn btn-primary"
|
|
>
|
|
{{ converting ? '转换中...' : '开始转换' }}
|
|
</button>
|
|
|
|
<button
|
|
@click="playAudio"
|
|
:disabled="!audioUrl || playing"
|
|
class="btn btn-success"
|
|
>
|
|
{{ playing ? '播放中...' : '播放音频' }}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 结果显示 -->
|
|
<view class="result-section" v-if="audioUrl">
|
|
<text class="result-title">转换结果：</text>
|
|
<view class="audio-info">
|
|
<text>音频大小：{{ audioSize }}</text>
|
|
<text>转换耗时：{{ convertTime }}秒</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 表单数据
|
|
formData: {
|
|
text: '你好，这是一个文字转语音的测试。',
|
|
speed: 0,
|
|
volume: 0,
|
|
codec: 'wav'
|
|
},
|
|
|
|
// 音色相关
|
|
voiceTypeList: [],
|
|
voiceTypeIndex: 0,
|
|
|
|
// 音频格式选项
|
|
codecList: [
|
|
{ name: 'WAV', value: 'wav' },
|
|
{ name: 'MP3', value: 'mp3' },
|
|
{ name: 'PCM', value: 'pcm' }
|
|
],
|
|
|
|
// 状态控制
|
|
loading: false,
|
|
converting: false,
|
|
playing: false,
|
|
|
|
// 结果数据
|
|
audioUrl: '',
|
|
audioSize: '',
|
|
convertTime: 0,
|
|
|
|
// 音频上下文
|
|
audioContext: null
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
// 页面加载时自动获取音色列表
|
|
this.loadVoiceTypes();
|
|
|
|
// 获取用户信息（如果需要记录日志）
|
|
this.getUserInfo();
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 获取用户信息
|
|
*/
|
|
getUserInfo() {
|
|
// 这里可以从缓存或登录状态获取用户ID
|
|
// 示例：从本地存储获取
|
|
const userInfo = uni.getStorageSync('userInfo');
|
|
if (userInfo && userInfo.id) {
|
|
this.userId = userInfo.id;
|
|
} else {
|
|
// 如果没有用户信息，可以生成一个临时ID
|
|
this.userId = 'temp_' + Date.now();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 加载音色列表
|
|
*/
|
|
async loadVoiceTypes() {
|
|
this.loading = true;
|
|
|
|
try {
|
|
const response = await this.request({
|
|
url: '/appletApi/tts/list',
|
|
method: 'GET'
|
|
});
|
|
|
|
if (response.success && response.result) {
|
|
this.voiceTypeList = response.result;
|
|
if (this.voiceTypeList.length > 0) {
|
|
this.voiceTypeIndex = 0;
|
|
}
|
|
|
|
uni.showToast({
|
|
title: '音色列表加载成功',
|
|
icon: 'success'
|
|
});
|
|
} else {
|
|
throw new Error(response.message || '加载音色列表失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('加载音色列表失败:', error);
|
|
uni.showToast({
|
|
title: '加载音色列表失败',
|
|
icon: 'error'
|
|
});
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 音色选择变化
|
|
*/
|
|
onVoiceTypeChange(e) {
|
|
this.voiceTypeIndex = e.detail.value;
|
|
},
|
|
|
|
/**
|
|
* 音频格式选择变化
|
|
*/
|
|
onCodecChange(e) {
|
|
this.formData.codec = e.detail.value;
|
|
},
|
|
|
|
/**
|
|
* 文字转语音
|
|
*/
|
|
async convertToVoice() {
|
|
if (!this.formData.text.trim()) {
|
|
uni.showToast({
|
|
title: '请输入要转换的文本',
|
|
icon: 'error'
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.converting = true;
|
|
const startTime = Date.now();
|
|
|
|
try {
|
|
// 构建请求参数
|
|
const params = {
|
|
text: this.formData.text,
|
|
speed: this.formData.speed,
|
|
voiceType: this.voiceTypeList[this.voiceTypeIndex]?.id || 0,
|
|
volume: this.formData.volume,
|
|
codec: this.formData.codec,
|
|
};
|
|
|
|
// 发起请求
|
|
const response = await this.requestBinary({
|
|
url: '/appletApi/tts/textToVoice',
|
|
method: 'GET',
|
|
data: params,
|
|
responseType: 'arraybuffer'
|
|
});
|
|
|
|
if (response) {
|
|
// 计算转换耗时
|
|
this.convertTime = ((Date.now() - startTime) / 1000).toFixed(2);
|
|
|
|
// 创建音频文件
|
|
await this.createAudioFile(response, this.formData.codec);
|
|
|
|
// 计算文件大小
|
|
this.audioSize = this.formatFileSize(response.byteLength);
|
|
|
|
uni.showToast({
|
|
title: '转换成功',
|
|
icon: 'success'
|
|
});
|
|
} else {
|
|
throw new Error('转换失败，未返回音频数据');
|
|
}
|
|
} catch (error) {
|
|
console.error('文字转语音失败:', error);
|
|
uni.showToast({
|
|
title: '转换失败: ' + error.message,
|
|
icon: 'error'
|
|
});
|
|
} finally {
|
|
this.converting = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 创建音频文件
|
|
*/
|
|
async createAudioFile(arrayBuffer, codec) {
|
|
return new Promise((resolve, reject) => {
|
|
// 将ArrayBuffer转换为Base64
|
|
const uint8Array = new Uint8Array(arrayBuffer);
|
|
let binary = '';
|
|
for (let i = 0; i < uint8Array.length; i++) {
|
|
binary += String.fromCharCode(uint8Array[i]);
|
|
}
|
|
const base64 = btoa(binary);
|
|
|
|
// 创建临时文件
|
|
const fileName = `tts_${Date.now()}.${codec}`;
|
|
const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`;
|
|
|
|
// 写入文件
|
|
wx.getFileSystemManager().writeFile({
|
|
filePath: filePath,
|
|
data: arrayBuffer,
|
|
success: () => {
|
|
this.audioUrl = filePath;
|
|
resolve(filePath);
|
|
},
|
|
fail: (error) => {
|
|
console.error('创建音频文件失败:', error);
|
|
reject(error);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 播放音频
|
|
*/
|
|
playAudio() {
|
|
if (!this.audioUrl) {
|
|
uni.showToast({
|
|
title: '没有可播放的音频',
|
|
icon: 'error'
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.playing = true;
|
|
|
|
// 创建音频上下文
|
|
if (this.audioContext) {
|
|
this.audioContext.destroy();
|
|
}
|
|
|
|
this.audioContext = wx.createInnerAudioContext();
|
|
this.audioContext.src = this.audioUrl;
|
|
|
|
// 监听播放事件
|
|
this.audioContext.onPlay(() => {
|
|
console.log('开始播放');
|
|
});
|
|
|
|
this.audioContext.onEnded(() => {
|
|
console.log('播放结束');
|
|
this.playing = false;
|
|
});
|
|
|
|
this.audioContext.onError((error) => {
|
|
console.error('播放失败:', error);
|
|
this.playing = false;
|
|
uni.showToast({
|
|
title: '播放失败',
|
|
icon: 'error'
|
|
});
|
|
});
|
|
|
|
// 开始播放
|
|
this.audioContext.play();
|
|
},
|
|
|
|
/**
|
|
* 格式化文件大小
|
|
*/
|
|
formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
},
|
|
|
|
/**
|
|
* 通用请求方法
|
|
*/
|
|
request(options) {
|
|
return new Promise((resolve, reject) => {
|
|
uni.request({
|
|
url: this.getApiUrl(options.url),
|
|
method: options.method || 'GET',
|
|
data: options.data || {},
|
|
header: {
|
|
'Content-Type': 'application/json',
|
|
// 如果需要token认证，在这里添加
|
|
// 'Authorization': 'Bearer ' + uni.getStorageSync('token')
|
|
},
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
resolve(res.data);
|
|
} else {
|
|
reject(new Error(`HTTP ${res.statusCode}: ${res.data?.message || '请求失败'}`));
|
|
}
|
|
},
|
|
fail: (error) => {
|
|
reject(error);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 二进制数据请求方法
|
|
*/
|
|
requestBinary(options) {
|
|
return new Promise((resolve, reject) => {
|
|
uni.request({
|
|
url: this.getApiUrl(options.url),
|
|
method: options.method || 'GET',
|
|
data: options.data || {},
|
|
responseType: 'arraybuffer',
|
|
header: {
|
|
// 如果需要token认证，在这里添加
|
|
// 'Authorization': 'Bearer ' + uni.getStorageSync('token')
|
|
},
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
resolve(res.data);
|
|
} else {
|
|
reject(new Error(`HTTP ${res.statusCode}: 请求失败`));
|
|
}
|
|
},
|
|
fail: (error) => {
|
|
reject(error);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 获取完整的API地址
|
|
*/
|
|
getApiUrl(path) {
|
|
// 这里配置你的后端API地址
|
|
const baseUrl = 'http://localhost:8080'; // 开发环境
|
|
// const baseUrl = 'https://your-domain.com'; // 生产环境
|
|
return baseUrl + path;
|
|
}
|
|
},
|
|
|
|
onUnload() {
|
|
// 页面卸载时销毁音频上下文
|
|
if (this.audioContext) {
|
|
this.audioContext.destroy();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20rpx;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.form-section {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.form-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
min-height: 120rpx;
|
|
padding: 20rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.picker {
|
|
padding: 20rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 8rpx;
|
|
background-color: #fafafa;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.slider {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.button-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.btn {
|
|
padding: 24rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007aff;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-secondary:disabled {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-success:disabled {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.result-section {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.audio-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.audio-info text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
</style>
|