mARTin-B78
f871486635
- Settings: flat section layout with consistent 32px padding, groups with inline title+subtitle, clean accordion details with chevron, focus rings - Replace all remaining emoji (⏰ ⭐ 💾 🌙 ☀️ ⚠ ✓ ↓ ★) with MDI icons - s-studio.html: globe emoji → mdi-earth, star filter → mdi-star-outline Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
141 lines
7.5 KiB
HTML
141 lines
7.5 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>
|
|
|
|
<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"><option value="all">Source: all</option></select>
|
|
<select id="getvoices-language-filter"><option value="all">Language: all</option></select>
|
|
<select id="getvoices-gender-filter"><option value="all">Sex: all</option></select>
|
|
<select id="getvoices-filetype-filter"><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 -->
|