mARTin-B78
40e42590cc
Cast: card/list views, sort & filter, online voice picker, "Hear a line" sample button, AI character notes, import auto-save. Platform: WCAG 2.1 AA accessibility pass; German UI translation + language picker; installable PWA with offline shell; GZip + content-visibility virtualization + lazy images + Rehearser PCM memory cap (mobile stability); Playwright suite (desktop + iPhone); opt-in minified bundle build. Fixes: screenplay parser false characters; Fish-Speech inline-tag tones; narrator/voice pickers list full library; clone GUI rework; fish.audio import dedup; voice-ID rename; bulk-delete modal. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
246 lines
14 KiB
HTML
246 lines
14 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon"><span class="mdi mdi-earth"></span></span>
|
|
<div class="section-title">
|
|
<h2>Get Voices Online</h2>
|
|
<p>Browse public voice clip sources, preview direct audio files, and import voices from the web.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source selector — show one library at a time to keep things tidy -->
|
|
<div class="gvo-tabs" id="gvo-tabs" role="tablist">
|
|
<button class="gvo-tab active" data-src="direct" role="tab"><span class="mdi mdi-link-variant"></span> Direct sources <span class="gvo-tab-sub">scrape URLs</span></button>
|
|
<button class="gvo-tab" data-src="fish" role="tab"><span class="mdi mdi-fishbowl-outline"></span> Fish.audio <span class="gvo-tab-sub">2M+ clonable</span></button>
|
|
<button class="gvo-tab" data-src="eleven" role="tab"><span class="gvo-eleven-logo">11</span> ElevenLabs <span class="gvo-tab-sub">12k shared</span></button>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-getvoices">
|
|
<div class="card">
|
|
<h2>Get voices</h2>
|
|
<p class="card-subtitle">Scrape public voice clip sources, filter by language or gender, then import any direct audio file into your Clone library.</p>
|
|
<div class="getvoices-source-editor">
|
|
<textarea id="getvoices-sources" spellcheck="false" aria-label="Voice source URLs"></textarea>
|
|
<div class="getvoices-source-buttons">
|
|
<button class="btn-primary" id="getvoices-refresh-btn">Scrape sources</button>
|
|
<button class="btn-secondary" id="getvoices-reset-sources-btn">Reset list</button>
|
|
<span id="getvoices-status" class="note">Not scraped yet.</span>
|
|
</div>
|
|
</div>
|
|
<div class="getvoices-toolbar">
|
|
<input type="search" id="getvoices-search" placeholder="Search voices, languages, datasets..." autocomplete="off">
|
|
<select id="getvoices-source-filter" aria-label="Filter by source"><option value="all">Source: all</option></select>
|
|
<select id="getvoices-language-filter" aria-label="Filter by language"><option value="all">Language: all</option></select>
|
|
<select id="getvoices-gender-filter" aria-label="Filter by sex"><option value="all">Sex: all</option></select>
|
|
<select id="getvoices-filetype-filter" aria-label="Filter by file type"><option value="all">Filetype: all</option></select>
|
|
<label style="font-size:14px;color:var(--subtext);display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap">
|
|
<input type="checkbox" id="getvoices-direct-only"> Direct audio only
|
|
</label>
|
|
</div>
|
|
<p class="note">Edit the source list one URL per line. External sources may block scraping; source errors are shown without hiding successful results. Check each source page for license, consent, and usage rights before importing or publishing a voice.</p>
|
|
</div>
|
|
<div class="getvoices-summary" id="getvoices-summary"></div>
|
|
<div class="getvoices-grid" id="getvoices-list">
|
|
<div class="card"><p class="note">Click <strong>Scrape sources</strong> to fetch Aiartes VoiceAI clips, yaph/tts-samples MP3 files, and the jim-schwoebel voice dataset index.</p></div>
|
|
</div>
|
|
</div><!-- /tab-getvoices -->
|
|
|
|
<!-- ElevenLabs Voice Library Browser -->
|
|
<div class="card el-browser" id="el-browser-card">
|
|
|
|
<!-- Header: brand + API key -->
|
|
<div class="el-head">
|
|
<div class="el-brand">
|
|
<span class="el-brand-logo">11</span>
|
|
<div>
|
|
<h2>ElevenLabs Voice Library</h2>
|
|
<p class="note">Browse 12 000+ shared voices and import previews directly into Clone. <a href="https://elevenlabs.io/voice-library" target="_blank" rel="noopener">elevenlabs.io ↗</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="el-key-row">
|
|
<div class="el-key-field">
|
|
<input type="password" id="el-api-key" placeholder="ElevenLabs API key (free — unlocks full library)…" autocomplete="new-password">
|
|
<button class="btn-primary el-key-btn" id="el-key-save">Save key</button>
|
|
</div>
|
|
<span class="el-key-status" id="el-key-status">No key — max 3 results</span>
|
|
<a class="note" href="https://elevenlabs.io/api" target="_blank" rel="noopener">Get free key ↗</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category pills -->
|
|
<div class="el-cats" id="el-cats">
|
|
<button class="el-cat active" data-el-use_case="" data-el-featured="" data-el-category="">All</button>
|
|
<button class="el-cat" data-el-featured="true"><span class="mdi mdi-star-outline"></span> Featured</button>
|
|
<button class="el-cat" data-el-category="professional">Professional</button>
|
|
<button class="el-cat" data-el-use_case="narration">Narration</button>
|
|
<button class="el-cat" data-el-use_case="conversational">Conversational</button>
|
|
<button class="el-cat" data-el-use_case="news">News</button>
|
|
<button class="el-cat" data-el-use_case="characters_animation">Characters</button>
|
|
<button class="el-cat" data-el-use_case="meditation">Meditation</button>
|
|
<button class="el-cat" data-el-use_case="gaming">Gaming</button>
|
|
<button class="el-cat" data-el-use_case="training">Training</button>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="el-filters">
|
|
<input type="search" class="el-search" id="el-search" placeholder="Search voices…" autocomplete="off">
|
|
<select id="el-lang" title="Language">
|
|
<option value="">All languages</option>
|
|
<option value="en">English</option>
|
|
<option value="de">German</option>
|
|
<option value="fr">French</option>
|
|
<option value="es">Spanish</option>
|
|
<option value="it">Italian</option>
|
|
<option value="pt">Portuguese</option>
|
|
<option value="nl">Dutch</option>
|
|
<option value="pl">Polish</option>
|
|
<option value="sv">Swedish</option>
|
|
<option value="da">Danish</option>
|
|
<option value="no">Norwegian</option>
|
|
<option value="fi">Finnish</option>
|
|
<option value="cs">Czech</option>
|
|
<option value="sk">Slovak</option>
|
|
<option value="hu">Hungarian</option>
|
|
<option value="ro">Romanian</option>
|
|
<option value="hr">Croatian</option>
|
|
<option value="bg">Bulgarian</option>
|
|
<option value="el">Greek</option>
|
|
<option value="uk">Ukrainian</option>
|
|
<option value="ru">Russian</option>
|
|
<option value="tr">Turkish</option>
|
|
<option value="ca">Catalan</option>
|
|
<option value="ar">Arabic</option>
|
|
<option value="hi">Hindi</option>
|
|
<option value="zh">Chinese</option>
|
|
<option value="ja">Japanese</option>
|
|
<option value="ko">Korean</option>
|
|
</select>
|
|
<select id="el-gender" title="Gender">
|
|
<option value="">Any gender</option>
|
|
<option value="male">Male</option>
|
|
<option value="female">Female</option>
|
|
</select>
|
|
<select id="el-age" title="Age">
|
|
<option value="">Any age</option>
|
|
<option value="young">Young</option>
|
|
<option value="middle_aged">Middle aged</option>
|
|
<option value="old">Old</option>
|
|
</select>
|
|
<button class="btn-primary" id="el-fetch">Browse</button>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="el-status-bar" id="el-status-bar" hidden>
|
|
<span id="el-status-text"></span>
|
|
</div>
|
|
|
|
<!-- Voice grid -->
|
|
<div class="el-grid" id="el-grid">
|
|
<div class="el-idle">Use the filters above and click <strong>Browse</strong> — or enter your API key for full access to 12 000+ voices.</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="el-pager" id="el-pager" hidden>
|
|
<button class="btn-secondary" id="el-prev" disabled>← Prev</button>
|
|
<span class="el-pager-info" id="el-pager-info">Page 1</span>
|
|
<button class="btn-secondary" id="el-next">Next →</button>
|
|
</div>
|
|
|
|
</div><!-- /el-browser-card -->
|
|
|
|
<!-- ── Fish.audio public voice library ──────────────────────────────── -->
|
|
<div class="card el-browser" id="fa-browser-card">
|
|
<div class="el-head">
|
|
<div class="el-brand">
|
|
<span class="el-brand-logo" style="background:#0ea5e9">🐟</span>
|
|
<div>
|
|
<h2>Fish.audio Voice Library</h2>
|
|
<p class="note">Browse 2 million+ public voices and import a clonable sample (MP3 + transcript) straight into your library. <a href="https://fish.audio/" target="_blank" rel="noopener">fish.audio ↗</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fa-toolbar">
|
|
<div class="fa-search-wrap">
|
|
<span class="mdi mdi-magnify fa-search-icon"></span>
|
|
<input type="search" class="fa-search-big" id="fa-search" placeholder="Search voices…" autocomplete="off">
|
|
</div>
|
|
<select id="fa-lang" class="fa-pill-select" title="Language">
|
|
<option value="">🌐 All languages</option>
|
|
<option value="en">🇬🇧 English</option><option value="de">🇩🇪 German</option>
|
|
<option value="fr">🇫🇷 French</option><option value="es">🇪🇸 Spanish</option>
|
|
<option value="it">🇮🇹 Italian</option><option value="pt">🇵🇹 Portuguese</option>
|
|
<option value="nl">🇳🇱 Dutch</option><option value="ja">🇯🇵 Japanese</option>
|
|
<option value="zh">🇨🇳 Chinese</option><option value="ko">🇰🇷 Korean</option>
|
|
<option value="ru">🇷🇺 Russian</option><option value="ar">🇸🇦 Arabic</option>
|
|
</select>
|
|
<select id="fa-sort" class="fa-pill-select" title="Sort by">
|
|
<option value="score">Recommended</option>
|
|
<option value="task_count">Most used</option>
|
|
<option value="created_at">Newest</option>
|
|
</select>
|
|
<div class="fa-filter-anchor">
|
|
<button class="fa-filter-btn" id="fa-filter-btn" title="Filters"><span class="mdi mdi-tune-variant"></span><span class="fa-filter-badge" id="fa-filter-badge" hidden>0</span></button>
|
|
<div class="fa-filter-pop" id="fa-filter-pop" hidden>
|
|
<div class="fa-pop-head"><strong>Filter</strong><button class="fa-pop-reset" id="fa-filter-reset"><span class="mdi mdi-restore"></span> Reset</button><button class="fa-pop-close" id="fa-filter-close" title="Close"><span class="mdi mdi-close"></span></button></div>
|
|
<div class="fa-pop-group">
|
|
<label>Gender</label>
|
|
<div class="fa-pchips" data-group="gender">
|
|
<button class="fa-pchip active" data-val="">Any</button>
|
|
<button class="fa-pchip" data-val="male">Male</button>
|
|
<button class="fa-pchip" data-val="female">Female</button>
|
|
<button class="fa-pchip" data-val="neutral">Neutral</button>
|
|
</div>
|
|
</div>
|
|
<div class="fa-pop-group">
|
|
<label>Age</label>
|
|
<div class="fa-pchips" data-group="age">
|
|
<button class="fa-pchip active" data-val="">Any</button>
|
|
<button class="fa-pchip" data-val="young">Young</button>
|
|
<button class="fa-pchip" data-val="middle-aged">Middle aged</button>
|
|
<button class="fa-pchip" data-val="old">Old</button>
|
|
</div>
|
|
</div>
|
|
<div class="fa-pop-group">
|
|
<label>Use case</label>
|
|
<div class="fa-pchips fa-pchips-multi" data-group="tag">
|
|
<button class="fa-pchip" data-val="conversational">Conversational</button>
|
|
<button class="fa-pchip" data-val="narration">Narration</button>
|
|
<button class="fa-pchip" data-val="character-voice">Character</button>
|
|
<button class="fa-pchip" data-val="social-media">Social media</button>
|
|
<button class="fa-pchip" data-val="education">Education</button>
|
|
<button class="fa-pchip" data-val="advertising">Advertising</button>
|
|
<button class="fa-pchip" data-val="audiobook">Audiobook</button>
|
|
<button class="fa-pchip" data-val="gaming">Gaming</button>
|
|
</div>
|
|
</div>
|
|
<div class="fa-pop-group">
|
|
<label>Voice quality</label>
|
|
<div class="fa-pchips fa-pchips-multi" data-group="tag">
|
|
<button class="fa-pchip" data-val="deep">Deep</button>
|
|
<button class="fa-pchip" data-val="high">High</button>
|
|
<button class="fa-pchip" data-val="soft">Soft</button>
|
|
<button class="fa-pchip" data-val="bright">Bright</button>
|
|
<button class="fa-pchip" data-val="warm">Warm</button>
|
|
<button class="fa-pchip" data-val="calm">Calm</button>
|
|
<button class="fa-pchip" data-val="energetic">Energetic</button>
|
|
<button class="fa-pchip" data-val="raspy">Raspy</button>
|
|
</div>
|
|
</div>
|
|
<div class="fa-pop-group">
|
|
<label>Custom tag</label>
|
|
<input type="text" id="fa-tag" class="fa-pop-tag" placeholder="e.g. announcer, whisper…" autocomplete="off">
|
|
</div>
|
|
<button class="btn-primary fa-pop-apply" id="fa-filter-apply">Apply filters</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary fa-browse-btn" id="fa-fetch">Browse</button>
|
|
</div>
|
|
<div class="el-status-bar" id="fa-status-bar" hidden><span id="fa-status-text"></span></div>
|
|
<div class="el-grid" id="fa-grid">
|
|
<div class="el-idle">Search or filter, then click <strong>Browse</strong> to load voices from fish.audio.</div>
|
|
</div>
|
|
<div class="el-pager" id="fa-pager" hidden>
|
|
<button class="btn-secondary" id="fa-prev" disabled>← Prev</button>
|
|
<span class="el-pager-info" id="fa-pager-info">Page 1</span>
|
|
<button class="btn-secondary" id="fa-next">Next →</button>
|
|
</div>
|
|
</div><!-- /fa-browser-card -->
|