|
@@ -0,0 +1,532 @@
|
|
|
|
|
+import { Component, EventEmitter, Input, Output, OnChanges, SimpleChanges } from '@angular/core';
|
|
|
|
|
+import { CommonModule } from '@angular/common';
|
|
|
|
|
+import { FormsModule } from '@angular/forms';
|
|
|
|
|
+import { HttpClient } from '@angular/common/http';
|
|
|
|
|
+
|
|
|
|
|
+/** 官方音色库条目 */
|
|
|
|
|
+export interface OfficialVoice {
|
|
|
|
|
+ voiceType: string; // 火山 voice_type（如 zh_male_sunwukong_uranus_bigtts）
|
|
|
|
|
+ name: string; // 显示名
|
|
|
|
|
+ scene: string; // 场景分组
|
|
|
|
|
+ language: string; // 语种
|
|
|
|
|
+ tags?: string[]; // 特殊标签（抖音同款、剪映同款 等）
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/** 已复刻音色条目（与 app.ts 中 vsClonedTimbreList 类型一致） */
|
|
|
|
|
+export interface ClonedTimbre {
|
|
|
|
|
+ objectId: string;
|
|
|
|
|
+ name: string;
|
|
|
|
|
+ speakerId: string;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/** 选择结果，向外抛 */
|
|
|
|
|
+export interface VoiceSelection {
|
|
|
|
|
+ source: 'official' | 'cloned';
|
|
|
|
|
+ name: string;
|
|
|
|
|
+ /** source=official 时为 voiceType；source=cloned 时为 objectId */
|
|
|
|
|
+ id: string;
|
|
|
|
|
+ /** 仅 official 时有值 */
|
|
|
|
|
+ voiceType?: string;
|
|
|
|
|
+ /** 仅 cloned 时有值 */
|
|
|
|
|
+ timbreId?: string;
|
|
|
|
|
+ speakerId?: string;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/** 精选官方音色库（首批 25 个，覆盖 6 个场景） */
|
|
|
|
|
+export const OFFICIAL_VOICE_LIBRARY: OfficialVoice[] = [
|
|
|
|
|
+ // 通用场景
|
|
|
|
|
+ { voiceType: 'zh_female_vv_uranus_bigtts', name: 'Vivi 2.0', scene: '通用', language: '中文/日文/印尼/西语' },
|
|
|
|
|
+ { voiceType: 'zh_female_sophie_uranus_bigtts', name: '魅力苏菲 2.0', scene: '通用', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_female_qingxinnvsheng_uranus_bigtts', name: '清新女声 2.0', scene: '通用', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_male_m191_uranus_bigtts', name: '云舟 2.0', scene: '通用', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_male_taocheng_uranus_bigtts', name: '小天 2.0', scene: '通用', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_female_xiaohe_uranus_bigtts', name: '小何 2.0', scene: '通用', language: '中文' },
|
|
|
|
|
+
|
|
|
|
|
+ // 角色扮演
|
|
|
|
|
+ { voiceType: 'zh_female_cancan_uranus_bigtts', name: '知性灿灿 2.0', scene: '角色扮演', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_female_sajiaoxuemei_uranus_bigtts', name: '撒娇学妹 2.0', scene: '角色扮演', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_male_silang_uranus_bigtts', name: '四郎 2.0', scene: '角色扮演', language: '中文', tags: ['抖音同款','剪映同款'] },
|
|
|
|
|
+ { voiceType: 'zh_male_qingcang_uranus_bigtts', name: '擎苍 2.0', scene: '角色扮演', language: '中文', tags: ['番茄同款','抖音同款'] },
|
|
|
|
|
+ { voiceType: 'zh_male_xionger_uranus_bigtts', name: '熊二 2.0', scene: '角色扮演', language: '中文', tags: ['剪映同款'] },
|
|
|
|
|
+
|
|
|
|
|
+ // 有声阅读
|
|
|
|
|
+ { voiceType: 'zh_male_baqiqingshu_uranus_bigtts', name: '霸气青叔 2.0', scene: '有声阅读', language: '中文', tags: ['番茄同款'] },
|
|
|
|
|
+ { voiceType: 'zh_male_xuanyijieshuo_uranus_bigtts', name: '悬疑解说 2.0', scene: '有声阅读', language: '中文', tags: ['抖音同款'] },
|
|
|
|
|
+ { voiceType: 'zh_female_xiaoxue_uranus_bigtts', name: '儿童绘本 2.0', scene: '有声阅读', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_female_shaoergushi_uranus_bigtts', name: '少儿故事 2.0', scene: '有声阅读', language: '中文' },
|
|
|
|
|
+
|
|
|
|
|
+ // 视频配音
|
|
|
|
|
+ { voiceType: 'zh_male_sunwukong_uranus_bigtts', name: '猴哥 2.0', scene: '视频配音', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_female_peiqi_uranus_bigtts', name: '佩奇猪 2.0', scene: '视频配音', language: '中文', tags: ['抖音同款','剪映同款'] },
|
|
|
|
|
+ { voiceType: 'zh_male_dayi_uranus_bigtts', name: '大壹 2.0', scene: '视频配音', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_male_ruyayichen_uranus_bigtts', name: '儒雅逸辰 2.0', scene: '视频配音', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_male_cixingjieshuonan_uranus_bigtts', name: '磁性解说 Morgan 2.0', scene: '视频配音', language: '中文', tags: ['抖音同款'] },
|
|
|
|
|
+
|
|
|
|
|
+ // 客服场景
|
|
|
|
|
+ { voiceType: 'zh_female_kefunvsheng_uranus_bigtts', name: '暖阳女声 2.0', scene: '客服', language: '中文' },
|
|
|
|
|
+ { voiceType: 'zh_female_yingyujiaoxue_uranus_bigtts', name: 'Tina老师 2.0', scene: '客服', language: '中文/英语' },
|
|
|
|
|
+
|
|
|
|
|
+ // 多语种
|
|
|
|
|
+ { voiceType: 'en_male_tim_uranus_bigtts', name: 'Tim', scene: '多语种', language: '美式英语' },
|
|
|
|
|
+ { voiceType: 'en_female_dacey_uranus_bigtts', name: 'Dacey', scene: '多语种', language: '美式英语' },
|
|
|
|
|
+ { voiceType: 'en_female_stokie_uranus_bigtts', name: 'Stokie', scene: '多语种', language: '美式英语' },
|
|
|
|
|
+];
|
|
|
|
|
+
|
|
|
|
|
+const VOICE_LIBRARY_SCENES = ['全部', '通用', '角色扮演', '有声阅读', '视频配音', '客服', '多语种'];
|
|
|
|
|
+
|
|
|
|
|
+/** 用于试听的固定文本 */
|
|
|
|
|
+const PREVIEW_TEXT = '青山依旧在，几度夕阳红。';
|
|
|
|
|
+
|
|
|
|
|
+/** TTS 代理（与 vsStartSynthesize 保持一致） */
|
|
|
|
|
+const TTS_API_URL = 'https://server.fmode.cn/api/volcengine/tts/unidirectional';
|
|
|
|
|
+const TTS_TOKEN = 'Bearer r:f0333969e312a40e4703e8fe4ed1c600';
|
|
|
|
|
+
|
|
|
|
|
+@Component({
|
|
|
|
|
+ selector: 'app-voice-picker',
|
|
|
|
|
+ standalone: true,
|
|
|
|
|
+ imports: [CommonModule, FormsModule],
|
|
|
|
|
+ template: `
|
|
|
|
|
+ <div class="vp-mask" *ngIf="open" (click)="onMaskClick($event)">
|
|
|
|
|
+ <div class="vp-modal" (click)="$event.stopPropagation()">
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 头部：Tabs -->
|
|
|
|
|
+ <header class="vp-header">
|
|
|
|
|
+ <div class="vp-tabs">
|
|
|
|
|
+ <button type="button" class="vp-tab"
|
|
|
|
|
+ [class.is-active]="activeTab === 'library'"
|
|
|
|
|
+ (click)="activeTab = 'library'">音色库</button>
|
|
|
|
|
+ <button type="button" class="vp-tab"
|
|
|
|
|
+ [class.is-active]="activeTab === 'mine'"
|
|
|
|
|
+ (click)="activeTab = 'mine'">
|
|
|
|
|
+ 我的音色
|
|
|
|
|
+ <span class="vp-tab-badge" *ngIf="clonedList?.length">{{clonedList.length}}</span>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <button type="button" class="vp-close" (click)="emitClose()" title="关闭">✕</button>
|
|
|
|
|
+ </header>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 场景筛选 + 搜索（仅音色库 Tab） -->
|
|
|
|
|
+ <div class="vp-toolbar" *ngIf="activeTab === 'library'">
|
|
|
|
|
+ <div class="vp-scenes">
|
|
|
|
|
+ <button type="button"
|
|
|
|
|
+ *ngFor="let s of scenes"
|
|
|
|
|
+ class="vp-scene-chip"
|
|
|
|
|
+ [class.is-active]="sceneFilter === s"
|
|
|
|
|
+ (click)="sceneFilter = s">{{s}}</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <input class="vp-search" type="text" placeholder="搜索音色名称/语种..."
|
|
|
|
|
+ [(ngModel)]="searchKeyword">
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 内容区 -->
|
|
|
|
|
+ <div class="vp-body">
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 音色库 -->
|
|
|
|
|
+ <div *ngIf="activeTab === 'library'">
|
|
|
|
|
+ <div class="vp-grid" *ngIf="filteredLibrary.length > 0">
|
|
|
|
|
+ <article class="vp-card"
|
|
|
|
|
+ *ngFor="let v of filteredLibrary"
|
|
|
|
|
+ [class.is-selected]="isSelected('official', v.voiceType)"
|
|
|
|
|
+ (click)="onPick('official', v)">
|
|
|
|
|
+ <div class="vp-card-head">
|
|
|
|
|
+ <div class="vp-avatar" [class.vp-avatar--male]="isMale(v.voiceType)">
|
|
|
|
|
+ {{v.name.charAt(0)}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <button type="button" class="vp-play"
|
|
|
|
|
+ [class.is-loading]="previewLoadingKey === 'official:' + v.voiceType"
|
|
|
|
|
+ (click)="$event.stopPropagation(); preview('official', v.voiceType, v.name)"
|
|
|
|
|
+ title="试听">
|
|
|
|
|
+ <span *ngIf="previewLoadingKey !== 'official:' + v.voiceType">▶</span>
|
|
|
|
|
+ <span *ngIf="previewLoadingKey === 'official:' + v.voiceType" class="vp-spin">⟳</span>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="vp-card-name" [title]="v.name">{{v.name}}</div>
|
|
|
|
|
+ <div class="vp-card-meta">
|
|
|
|
|
+ <span class="vp-tag vp-tag--scene">{{v.scene}}</span>
|
|
|
|
|
+ <span class="vp-tag vp-tag--lang">{{v.language}}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="vp-card-tags" *ngIf="v.tags?.length">
|
|
|
|
|
+ <span class="vp-tag vp-tag--special" *ngFor="let t of v.tags">{{t}}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </article>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="vp-empty" *ngIf="filteredLibrary.length === 0">
|
|
|
|
|
+ 没有匹配的音色，换个关键词试试
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 我的音色 -->
|
|
|
|
|
+ <div *ngIf="activeTab === 'mine'">
|
|
|
|
|
+ <div class="vp-grid" *ngIf="clonedList && clonedList.length > 0">
|
|
|
|
|
+ <article class="vp-card"
|
|
|
|
|
+ *ngFor="let t of clonedList"
|
|
|
|
|
+ [class.is-selected]="isSelected('cloned', t.objectId)"
|
|
|
|
|
+ (click)="onPickCloned(t)">
|
|
|
|
|
+ <div class="vp-card-head">
|
|
|
|
|
+ <div class="vp-avatar vp-avatar--mine">{{(t.name || '?').charAt(0)}}</div>
|
|
|
|
|
+ <button type="button" class="vp-play"
|
|
|
|
|
+ [class.is-loading]="previewLoadingKey === 'cloned:' + t.objectId"
|
|
|
|
|
+ (click)="$event.stopPropagation(); preview('cloned', t.objectId, t.name)"
|
|
|
|
|
+ title="试听">
|
|
|
|
|
+ <span *ngIf="previewLoadingKey !== 'cloned:' + t.objectId">▶</span>
|
|
|
|
|
+ <span *ngIf="previewLoadingKey === 'cloned:' + t.objectId" class="vp-spin">⟳</span>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="vp-card-name" [title]="t.name || t.objectId">{{t.name || t.objectId}}</div>
|
|
|
|
|
+ <div class="vp-card-meta">
|
|
|
|
|
+ <span class="vp-tag vp-tag--mine">我的复刻</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="vp-card-id" [title]="t.objectId">ID: {{t.objectId}}</div>
|
|
|
|
|
+ </article>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="vp-empty" *ngIf="!clonedList || clonedList.length === 0">
|
|
|
|
|
+ 你还没有复刻音色，先去左侧"音色复刻"训练一个吧
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 试听报错提示 -->
|
|
|
|
|
+ <div class="vp-error" *ngIf="previewError">{{previewError}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 底部：当前选中 + 操作 -->
|
|
|
|
|
+ <footer class="vp-footer">
|
|
|
|
|
+ <div class="vp-selected">
|
|
|
|
|
+ <span class="vp-selected-label">当前选择：</span>
|
|
|
|
|
+ <span class="vp-selected-name" *ngIf="pendingSelection">
|
|
|
|
|
+ {{pendingSelection.name}}
|
|
|
|
|
+ <small class="vp-selected-src">
|
|
|
|
|
+ ({{pendingSelection.source === 'official' ? '音色库' : '我的音色'}})
|
|
|
|
|
+ </small>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span class="vp-selected-empty" *ngIf="!pendingSelection">未选择</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="vp-actions">
|
|
|
|
|
+ <button type="button" class="vp-btn vp-btn--ghost" (click)="emitClose()">取消</button>
|
|
|
|
|
+ <button type="button" class="vp-btn vp-btn--primary"
|
|
|
|
|
+ [disabled]="!pendingSelection"
|
|
|
|
|
+ (click)="confirm()">使用此音色</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </footer>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 隐藏 audio 元素用于播放 -->
|
|
|
|
|
+ <audio #previewAudio style="display:none" preload="auto"></audio>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ `,
|
|
|
|
|
+ styles: [`
|
|
|
|
|
+ :host { --vp-primary: #6366f1; --vp-primary-hover: #4f46e5; }
|
|
|
|
|
+ .vp-mask {
|
|
|
|
|
+ position: fixed; inset: 0; z-index: 9999;
|
|
|
|
|
+ background: rgba(15, 23, 42, 0.55);
|
|
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
|
|
+ padding: 24px; backdrop-filter: blur(4px);
|
|
|
|
|
+ animation: vp-fade-in 160ms ease-out;
|
|
|
|
|
+ }
|
|
|
|
|
+ @keyframes vp-fade-in { from { opacity: 0 } to { opacity: 1 } }
|
|
|
|
|
+ .vp-modal {
|
|
|
|
|
+ width: min(960px, 100%); max-height: 88vh;
|
|
|
|
|
+ background: #fff; border-radius: 16px;
|
|
|
|
|
+ box-shadow: 0 24px 60px rgba(15,23,42,0.25);
|
|
|
|
|
+ display: flex; flex-direction: column; overflow: hidden;
|
|
|
|
|
+ animation: vp-pop-in 200ms cubic-bezier(.2,.9,.3,1.2);
|
|
|
|
|
+ }
|
|
|
|
|
+ @keyframes vp-pop-in { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }
|
|
|
|
|
+
|
|
|
|
|
+ .vp-header {
|
|
|
|
|
+ display: flex; align-items: center; justify-content: space-between;
|
|
|
|
|
+ padding: 14px 20px; border-bottom: 1px solid #e5e7eb;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-tabs { display: flex; gap: 4px; }
|
|
|
|
|
+ .vp-tab {
|
|
|
|
|
+ background: transparent; border: none; padding: 8px 16px;
|
|
|
|
|
+ font-size: 15px; font-weight: 600; color: #64748b;
|
|
|
|
|
+ border-radius: 8px; cursor: pointer; transition: all .15s;
|
|
|
|
|
+ display: inline-flex; align-items: center; gap: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-tab:hover { background: #f1f5f9; color: #334155; }
|
|
|
|
|
+ .vp-tab.is-active { background: #eef2ff; color: var(--vp-primary); }
|
|
|
|
|
+ .vp-tab-badge {
|
|
|
|
|
+ background: var(--vp-primary); color: #fff; font-size: 11px;
|
|
|
|
|
+ padding: 1px 7px; border-radius: 10px; line-height: 1.4;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-close {
|
|
|
|
|
+ background: transparent; border: none; font-size: 18px;
|
|
|
|
|
+ width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
|
|
|
|
|
+ color: #64748b; transition: all .15s;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-close:hover { background: #f1f5f9; color: #ef4444; }
|
|
|
|
|
+
|
|
|
|
|
+ .vp-toolbar {
|
|
|
|
|
+ display: flex; align-items: center; gap: 12px;
|
|
|
|
|
+ padding: 12px 20px; border-bottom: 1px solid #f1f5f9;
|
|
|
|
|
+ background: #fafbfc;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-scenes { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
|
|
|
|
|
+ .vp-scene-chip {
|
|
|
|
|
+ background: #fff; border: 1px solid #e2e8f0; color: #64748b;
|
|
|
|
|
+ padding: 5px 12px; border-radius: 16px; font-size: 13px;
|
|
|
|
|
+ cursor: pointer; transition: all .15s;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-scene-chip:hover { border-color: var(--vp-primary); color: var(--vp-primary); }
|
|
|
|
|
+ .vp-scene-chip.is-active {
|
|
|
|
|
+ background: var(--vp-primary); border-color: var(--vp-primary); color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-search {
|
|
|
|
|
+ width: 200px; padding: 6px 12px; border: 1px solid #e2e8f0;
|
|
|
|
|
+ border-radius: 16px; font-size: 13px; outline: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-search:focus { border-color: var(--vp-primary); }
|
|
|
|
|
+
|
|
|
|
|
+ .vp-body { flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 320px; }
|
|
|
|
|
+ .vp-grid {
|
|
|
|
|
+ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-card {
|
|
|
|
|
+ background: #fff; border: 2px solid #e5e7eb; border-radius: 12px;
|
|
|
|
|
+ padding: 12px; cursor: pointer; transition: all .15s;
|
|
|
|
|
+ display: flex; flex-direction: column; gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-card:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(99,102,241,.1); }
|
|
|
|
|
+ .vp-card.is-selected {
|
|
|
|
|
+ border-color: var(--vp-primary);
|
|
|
|
|
+ background: linear-gradient(135deg, #eef2ff 0%, #fff 100%);
|
|
|
|
|
+ box-shadow: 0 0 0 3px rgba(99,102,241,.15);
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-card-head { display: flex; justify-content: space-between; align-items: center; }
|
|
|
|
|
+ .vp-avatar {
|
|
|
|
|
+ width: 36px; height: 36px; border-radius: 50%;
|
|
|
|
|
+ background: linear-gradient(135deg, #f472b6, #ec4899);
|
|
|
|
|
+ color: #fff; display: flex; align-items: center; justify-content: center;
|
|
|
|
|
+ font-weight: 700; font-size: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-avatar--male { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
|
|
|
|
|
+ .vp-avatar--mine { background: linear-gradient(135deg, #34d399, #10b981); }
|
|
|
|
|
+ .vp-play {
|
|
|
|
|
+ background: #f3f4f6; border: none; border-radius: 50%;
|
|
|
|
|
+ width: 32px; height: 32px; cursor: pointer; font-size: 13px;
|
|
|
|
|
+ color: var(--vp-primary); transition: all .15s;
|
|
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-play:hover { background: var(--vp-primary); color: #fff; }
|
|
|
|
|
+ .vp-play.is-loading { background: #e0e7ff; }
|
|
|
|
|
+ .vp-spin { display: inline-block; animation: vp-spin 1s linear infinite; }
|
|
|
|
|
+ @keyframes vp-spin { to { transform: rotate(360deg); } }
|
|
|
|
|
+
|
|
|
|
|
+ .vp-card-name {
|
|
|
|
|
+ font-weight: 600; font-size: 14px; color: #1e293b;
|
|
|
|
|
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-card-meta { display: flex; gap: 4px; flex-wrap: wrap; }
|
|
|
|
|
+ .vp-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
|
|
|
|
|
+ .vp-card-id {
|
|
|
|
|
+ font-size: 11px; color: #94a3b8; overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis; white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-tag {
|
|
|
|
|
+ font-size: 11px; padding: 2px 8px; border-radius: 10px; line-height: 1.4;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-tag--scene { background: #ede9fe; color: #7c3aed; }
|
|
|
|
|
+ .vp-tag--lang { background: #dbeafe; color: #1d4ed8; }
|
|
|
|
|
+ .vp-tag--special { background: #fef3c7; color: #b45309; }
|
|
|
|
|
+ .vp-tag--mine { background: #d1fae5; color: #047857; }
|
|
|
|
|
+
|
|
|
|
|
+ .vp-empty {
|
|
|
|
|
+ text-align: center; color: #94a3b8; padding: 60px 20px; font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-error {
|
|
|
|
|
+ margin-top: 12px; padding: 8px 12px; background: #fef2f2; color: #b91c1c;
|
|
|
|
|
+ border-radius: 8px; font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .vp-footer {
|
|
|
|
|
+ display: flex; align-items: center; justify-content: space-between;
|
|
|
|
|
+ padding: 14px 20px; border-top: 1px solid #e5e7eb; background: #fafbfc;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-selected { font-size: 13px; color: #475569; overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
+ .vp-selected-label { color: #94a3b8; }
|
|
|
|
|
+ .vp-selected-name { color: #1e293b; font-weight: 600; }
|
|
|
|
|
+ .vp-selected-src { color: #94a3b8; font-weight: 400; font-size: 12px; }
|
|
|
|
|
+ .vp-selected-empty { color: #94a3b8; }
|
|
|
|
|
+
|
|
|
|
|
+ .vp-actions { display: flex; gap: 8px; }
|
|
|
|
|
+ .vp-btn {
|
|
|
|
|
+ padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
|
|
|
|
|
+ cursor: pointer; border: none; transition: all .15s;
|
|
|
|
|
+ }
|
|
|
|
|
+ .vp-btn--ghost { background: #fff; border: 1px solid #e2e8f0; color: #64748b; }
|
|
|
|
|
+ .vp-btn--ghost:hover { border-color: #cbd5e1; color: #334155; }
|
|
|
|
|
+ .vp-btn--primary { background: var(--vp-primary); color: #fff; }
|
|
|
|
|
+ .vp-btn--primary:hover:not(:disabled) { background: var(--vp-primary-hover); }
|
|
|
|
|
+ .vp-btn--primary:disabled { background: #cbd5e1; cursor: not-allowed; }
|
|
|
|
|
+ `]
|
|
|
|
|
+})
|
|
|
|
|
+export class VoicePickerComponent implements OnChanges {
|
|
|
|
|
+ /** 是否打开 */
|
|
|
|
|
+ @Input() open: boolean = false;
|
|
|
|
|
+
|
|
|
|
|
+ /** 用户的已复刻音色列表（外部传入） */
|
|
|
|
|
+ @Input() clonedList: ClonedTimbre[] = [];
|
|
|
|
|
+
|
|
|
|
|
+ /** 当前已选（用于回显高亮），可选 */
|
|
|
|
|
+ @Input() currentSelection: VoiceSelection | null = null;
|
|
|
|
|
+
|
|
|
|
|
+ /** 用户点"使用此音色"或双击时抛出 */
|
|
|
|
|
+ @Output() select = new EventEmitter<VoiceSelection>();
|
|
|
|
|
+
|
|
|
|
|
+ /** 用户点关闭/取消/遮罩时抛出 */
|
|
|
|
|
+ @Output() close = new EventEmitter<void>();
|
|
|
|
|
+
|
|
|
|
|
+ readonly officialLibrary = OFFICIAL_VOICE_LIBRARY;
|
|
|
|
|
+ readonly scenes = VOICE_LIBRARY_SCENES;
|
|
|
|
|
+
|
|
|
|
|
+ activeTab: 'library' | 'mine' = 'library';
|
|
|
|
|
+ sceneFilter: string = '全部';
|
|
|
|
|
+ searchKeyword: string = '';
|
|
|
|
|
+
|
|
|
|
|
+ /** 暂存选择（在用户点"使用此音色"前不真正提交） */
|
|
|
|
|
+ pendingSelection: VoiceSelection | null = null;
|
|
|
|
|
+
|
|
|
|
|
+ /** 试听音频缓存：key = source:id，value = audio url（dataURL 或 http url） */
|
|
|
|
|
+ private previewCache = new Map<string, string>();
|
|
|
|
|
+ previewLoadingKey: string = '';
|
|
|
|
|
+ previewError: string = '';
|
|
|
|
|
+ private currentAudio: HTMLAudioElement | null = null;
|
|
|
|
|
+
|
|
|
|
|
+ constructor(private http: HttpClient) {}
|
|
|
|
|
+
|
|
|
|
|
+ ngOnChanges(changes: SimpleChanges): void {
|
|
|
|
|
+ // 弹窗每次打开时根据已选项回显，并默认聚焦相应 Tab
|
|
|
|
|
+ if (changes['open'] && this.open) {
|
|
|
|
|
+ this.pendingSelection = this.currentSelection ? { ...this.currentSelection } : null;
|
|
|
|
|
+ this.previewError = '';
|
|
|
|
|
+ if (this.pendingSelection?.source === 'cloned') {
|
|
|
|
|
+ this.activeTab = 'mine';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.activeTab = 'library';
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ // 关闭时停掉正在播放的试听
|
|
|
|
|
+ if (changes['open'] && !this.open) {
|
|
|
|
|
+ this.stopCurrentAudio();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ get filteredLibrary(): OfficialVoice[] {
|
|
|
|
|
+ const kw = this.searchKeyword.trim().toLowerCase();
|
|
|
|
|
+ return this.officialLibrary.filter(v => {
|
|
|
|
|
+ if (this.sceneFilter !== '全部' && v.scene !== this.sceneFilter) return false;
|
|
|
|
|
+ if (kw) {
|
|
|
|
|
+ const hay = `${v.name} ${v.language} ${v.voiceType}`.toLowerCase();
|
|
|
|
|
+ if (!hay.includes(kw)) return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ return true;
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ isSelected(source: 'official' | 'cloned', id: string): boolean {
|
|
|
|
|
+ return this.pendingSelection?.source === source && this.pendingSelection?.id === id;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ isMale(voiceType: string): boolean {
|
|
|
|
|
+ return /(_male_)/.test(voiceType);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ onPick(source: 'official', v: OfficialVoice): void {
|
|
|
|
|
+ this.pendingSelection = {
|
|
|
|
|
+ source: 'official',
|
|
|
|
|
+ name: v.name,
|
|
|
|
|
+ id: v.voiceType,
|
|
|
|
|
+ voiceType: v.voiceType
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ onPickCloned(t: ClonedTimbre): void {
|
|
|
|
|
+ this.pendingSelection = {
|
|
|
|
|
+ source: 'cloned',
|
|
|
|
|
+ name: t.name || t.objectId,
|
|
|
|
|
+ id: t.objectId,
|
|
|
|
|
+ timbreId: t.objectId,
|
|
|
|
|
+ speakerId: t.speakerId
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ confirm(): void {
|
|
|
|
|
+ if (!this.pendingSelection) return;
|
|
|
|
|
+ this.stopCurrentAudio();
|
|
|
|
|
+ this.select.emit(this.pendingSelection);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ emitClose(): void {
|
|
|
|
|
+ this.stopCurrentAudio();
|
|
|
|
|
+ this.close.emit();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ onMaskClick(_e: MouseEvent): void {
|
|
|
|
|
+ this.emitClose();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /** 试听：内存缓存命中直接播；否则调 TTS 合成 */
|
|
|
|
|
+ preview(source: 'official' | 'cloned', id: string, name: string): void {
|
|
|
|
|
+ const key = `${source}:${id}`;
|
|
|
|
|
+ this.previewError = '';
|
|
|
|
|
+
|
|
|
|
|
+ const cached = this.previewCache.get(key);
|
|
|
|
|
+ if (cached) {
|
|
|
|
|
+ this.playAudio(cached);
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (this.previewLoadingKey) return; // 已在合成另一条，避免并发
|
|
|
|
|
+ this.previewLoadingKey = key;
|
|
|
|
|
+
|
|
|
|
|
+ const body: any = {
|
|
|
|
|
+ token: TTS_TOKEN,
|
|
|
|
|
+ text: PREVIEW_TEXT,
|
|
|
|
|
+ isStream: false,
|
|
|
|
|
+ audio_params: { format: 'mp3', sample_rate: 24000 }
|
|
|
|
|
+ };
|
|
|
|
|
+ if (source === 'official') {
|
|
|
|
|
+ // _uranus_bigtts 后缀是豆包语音合成模型 2.0，必须使用 seed-tts-2.0 资源。
|
|
|
|
|
+ // 其它后缀后续可扩展（如 1.0 模型可能需 seed-tts-1.0）。
|
|
|
|
|
+ body.volcengine_voice_type = id;
|
|
|
|
|
+ body.x_api_resource_id = id.includes('_uranus_bigtts') ? 'seed-tts-2.0' : 'seed-tts-1.0';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ body.timbreId = id;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ this.http.post<any>(TTS_API_URL, body).subscribe({
|
|
|
|
|
+ next: (res) => {
|
|
|
|
|
+ this.previewLoadingKey = '';
|
|
|
|
|
+ if (res?.code === 200 && res?.data?.audioUrl) {
|
|
|
|
|
+ this.previewCache.set(key, res.data.audioUrl);
|
|
|
|
|
+ this.playAudio(res.data.audioUrl);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.previewError = `试听 "${name}" 失败：${res?.error?.message || res?.message || '未知错误'}`;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ error: (err) => {
|
|
|
|
|
+ this.previewLoadingKey = '';
|
|
|
|
|
+ this.previewError = `试听 "${name}" 请求失败：${err?.error?.message || err?.message || '网络错误'}`;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private playAudio(url: string): void {
|
|
|
|
|
+ this.stopCurrentAudio();
|
|
|
|
|
+ const audio = new Audio(url);
|
|
|
|
|
+ audio.play().catch(e => {
|
|
|
|
|
+ this.previewError = `音频播放失败：${e?.message || e}`;
|
|
|
|
|
+ });
|
|
|
|
|
+ this.currentAudio = audio;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private stopCurrentAudio(): void {
|
|
|
|
|
+ if (this.currentAudio) {
|
|
|
|
|
+ try { this.currentAudio.pause(); } catch {}
|
|
|
|
|
+ this.currentAudio = null;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
