tts-vue là công cụ tổng hợp giọng nói Microsoft được xây dựng trên nền tảng Electron, Vue, ElementPlus và Vite. Bài viết này hướng dẫn chi tiết cách quản lý và sử dụng các gói giọng nói ngoại tuyến của tts-vue, giúp người dùng tận hưởng trải nghiệm tổng hợp giọng nói chất lượng cao ngay cả khi không có kết nối mạng.

Nguyên lý quản lý gói giọng nói ngoại tuyến

Chức năng quản lý giọng nói của tts-vue được triển khai thông qua tệp src/global/voices.ts, nơi định nghĩa tất cả thông tin về các gói giọng nói được hỗ trợ. Mỗi gói giọng nói chứa các thuộc tính chính như mã định danh duy nhất, ngôn ngữ khu vực và loại giọng nói, tạo nền tảng dữ liệu cho việc sử dụng ngoại tuyến.

Cấu trúc cốt lõi của gói giọng nói

Trong tệp src/components/main/options-config.ts, danh sách gói giọng nói được tạo ra bằng cách xử lý mảng voices. Mỗi gói giọng nói bao gồm:

• Tên giọng nói và mã định danh duy nhất
• Ngôn ngữ khu vực (ví dụ: zh-CN, en-US)
• Loại giọng nói (ví dụ: StandardVoice)
• URL mẫu âm thanh (để xem trước)

Cấu hình gói giọng nói ngoại tuyến từ đầu

1. Chuẩn bị dự án và môi trường

Trước tiên, lấy mã nguồn của dự án tts-vue bằng lệnh sau:

git clone https://gitcode.com/gh_mirrors/tt/tts-vue

2. Khởi tạo dữ liệu gói giọng nói

Khi dự án khởi động, dữ liệu giọng nói được khởi tạo qua tệp src/global/initLocalStore.ts. Tệp này kiểm tra danh sách giọng nói trong bộ nhớ cục bộ, nếu không tồn tại thì tải từ mảng voices đã định nghĩa sẵn và lưu vào bộ nhớ.

Đoạn mã quan trọng:

const msVoicesList = await ipcRenderer.invoke('voices')
if (!localStorage.getItem('msVoicesList')) {
  localStorage.setItem('msVoicesList', JSON.stringify(voices))
}

3. Chọn và áp dụng gói giọng nói

Trong giao diện ứng dụng, người dùng có thể chọn gói giọng nói khác nhau thông qua bộ chọn giọng nói (được điều khiển bởi formConfig.voiceSelect trong src/store/store.ts). Sau khi chọn, hệ thống sẽ áp dụng cấu hình giọng nói hiện tại vào công cụ tổng hợp.

Mẹo nâng cao: Tối ưu hóa trải nghiệm sử dụng gói giọng nói ngoại tuyến

Lọc gói giọng nói theo ngôn ngữ khu vực

Trong src/components/main/options-config.ts, chức năng lọc giọng nói theo ngôn ngữ khu vực được triển khai, giúp người dùng nhanh chóng tìm đúng gói giọng nói mong muốn:

const filteredVoices = voicesList.filter((item: any) => item.locale == localeName)

Tùy chỉnh phong cách giọng nói

Ngoài việc chọn gói giọng nói khác nhau, tts-vue còn hỗ trợ điều chỉnh phong cách giọng nói. Thông qua cấu hình voiceStyleSelect trong src/store/store.ts, người dùng có thể chọn các phong cách như mặc định, cảm xúc, v.v.

Khắc phục sự cố thường gặp

Gói giọng nói không tải được?

Nếu gặp vấn đề với việc tải gói giọng nói, hãy kiểm tra dữ liệu msVoicesList trong localStorage có chính xác không. Nếu dữ liệu bị hỏng, xóa bộ nhớ cục bộ và khởi động lại ứng dụng để tải lại các gói giọng nói mặc định.

Làm thế nào để thêm gói giọng nói tùy chỉnh?

Để thêm gói giọng nói tùy chỉnh, cần sửa tệp src/global/voices.ts, thêm mục giọng nói mới theo định dạng hiện có và đảm bảo đường dẫn tệp âm thanh chính xác.