englishread-admin/uniapp-tts-example.vue

<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>