HTML Web Sitesi Metinden Sese Dönüştürme — Yapay Zeka Seslendirmesini Gömme
HTML entegrasyonu
HTML web sitelerine metinden sese dönüştürme — tek bir komut dosyasıyla yapay zeka sesini entegre edin.
Geliştiriciler ve ekipler çalışıyor. özel HTMLStatik siteler veya WordPress dışı CMS sistemleri de bu kapsamda değerlendirilebilir. TTS betiğini yerleştir bir kez ve doğal olarak teslim et özel site yapay zeka sesi 'da GSpeechOynatma ve sentezleme işlemleri şu şekilde gerçekleşir: GSpeech Bulut Konsolu - API Anahtarı GerekmiyorSunucu tarafında metin okuma (TTS) yığınına gerek yok ve ek barındırma yükü de yok.
Bu kılavuz nasıl yapılacağını gösterir HTML web sitesine metinden sese dönüştürme özelliği ekleme: Tek satırlık bağlantı kodunu önce yapıştırın Tam Sayfa / Düğme / Daire oyuncularını Özel HTML bağlantılarıyla yerleştirin, ardından haritalayın. İçerik Seçici hem de İşleme Öğesi Düzenleme sınıflarınıza ve kimliklerinize.
Tek satırlık yerleştirme — önce yapıştırın Herhangi bir özel yığın veya statik sitede.
Bulut Ses Üretimi — Bir kez sentezleyin, önbelleğe alın ve ziyaretler boyunca tekrar oynatın.
API Anahtarı Gerekmiyor — Tek bir konsoldan gelen sesler ve oyuncular.
Seçici tabanlı eşleme — Herhangi bir makaleyi, ana sayfayı veya özel düzen şablonunu hedefleyin.
En iyi: Geliştiriciler, statik oluşturucular ve HTML'i kontrol ettiğiniz ve özel düzenler için tek bir yerleştirme ve CSS seçicileri istediğiniz özel CMS temaları.
HTML kodunu kopyalayın - açık Entegrasyonlar → HTML Web Sitesi ve bağlantı kodunu kopyalayın.
Yapıştırmadan önce — Kodu şablonunuza kapanış etiketinden önce ekleyin. Etiketleyin, ardından dağıtın.
Bağlantı kodu yükleniyor GSpeech Bulunduğu her sayfada. Oyuncular yalnızca yerleştirme yaptığınız alanlarda/özel HTML'de ve yalnızca ilgili widget yayınlanıp yapılandırıldığında görünür.
Haritalama modeli
Özel HTML için gömme komut dosyası, bağlama noktaları ve seçici eşleme.
Özel bir HTML sitesinde, tek bir yerleştirme motoru yükler. Ardından her bir widget, kendi sınıflarınızı ve kimliklerinizi bir bağlama noktasına eşler; böylece anlatım Cloud Console'da kalırken düzenin tam kontrolü sizde olur:
1Bağlantı kodu
Motoru önceden yükler Onsuz, montaj parçaları hiçbir işe yaramaz.
2Özel widget
Kontrol paneli yapılandırması: ses, dil, tasarım, içerik ayarları, herhangi bir rota veya şablon için URL kuralları.
3Bağla / Özel HTML
Sayfa HTML'nizde bir işaretleyici (örneğin) .gsp_full_playerOyuncu arayüzünün göründüğü yer.
4İçerik eşleme
İçerik Seçici = Ne okumalı. İşleme Öğesi = oyuncunun göründüğü yer. Hariç Tut / Başlık / URL'ler eşleşmeyi iyileştirir.
Sınırsız widget — Farklı düzenler, diller veya tasarımlar için ayrı Tam Sayfa, Düğme veya Daire widget'ları.
Her widget için sınırsız sayıda oyuncu. — Yayınlanan tek bir widget, Render Element + URL kuralları tarafından izin verilen her eşleşen montajı destekleyebilir.
Özel HTML bağlantıları — HTML sitelerinde bağlantı şu şekilde görünür: <div class="gsp_full_player"></div>WordPress'te aynı fikir, aşağıdaki gibi kısa kodlar kullanılarak uygulanır: [gspeech].
Varsayılan ayarlar vs. gelişmiş ayarlar — Varsayılan montajlar hızlı çalışır. Benzersiz özel düzenler, hassas İçerik Seçici / Oluşturma Öğesi değerleri gerektirir.
Oyuncular
Özel HTML ile oyuncu ekleyin
Oyuncunun sayfada görünmesi gereken yere bu bineklerden herhangi birini yerleştirin. Kopyalamak için bir karta tıklayın. Ardından widget'ı ayarlayın. İşleme Öğesi aynı sınıfa.
Widget'ta İçerik Sekme, nokta seçicileri makaleye, ana sayfaya veya sahip olduğunuz özel sarmalayıcılara yönlendirin; işaretlemenizin ortaya koyduğu herhangi bir CSS seçicisini kullanın.
id → # — HTML id="main" → yaz #main.
sınıf → . — HTML class="post-content" → yaz .post-content.
Parçaları bir araya getirin — İçerik Seçici, virgülle ayrılmış birden fazla hedef kabul eder: #intro,.body,#summary.
Kırpma parçaları — Hariç Tutma Listesi aynı yöntemi kullanır # / . + virgüller: #comments,.ads,.share-buttons.
Değerleri bulun — Canlı sayfada sağ tıklayın → İncele. Başlangıç seviyesi için kapsamlı rehber: HTML değerleri (# / .).
CS
İçerik Seçici
tanımlar Hangi metin okunuyor?. CSS seçicilerini virgülle ayırarak kullanın (içeriği parçalar halinde birleştirin). Örnekler:
göre, .post-content, #ana, .özel-düzen — bu unsurları okuyun (# = kimlik, . = sınıf).
makale,bölüm,#kimliğim,.sınıfım — Tek bir alanda birden fazla hedef (parçalar tek bir anlatımda birleştirilmiş).
ebeveyn_sınıfı — Bağlantı öğesinin üst sarmalayıcısını okuyun (içerik bloğu içindeki özel HTML için kullanışlıdır).
self_class — Montaj aparatının içinde bulunduğu ambalajı okuyun.
Kullanıyorsanız boş bırakın. İçerik Metni Bunun yerine (sabit metin, DOM içeriği değil).
RE
İşleme Öğesi
tanımlar oyuncu arayüzünün eklendiği yerSayfadaki gerçek bir öğeyle eşleşmelidir.
Özel HTML bağlantıları için, bunu bağlantı sınıfına ayarlayın: .gsp_full_player, .gsp_button_playerya da .gsp_circle_player.
Ayrıca aşağıdaki gibi düzen kapsayıcılarını da hedefleyebilirsiniz: vücut, #mutluya da .makale-başlığı Özel bir montaj aparatı kullanmadığınızda.
İçerik Seçici doğru olmasına rağmen hiçbir şey görünmüyorsa, genellikle o sayfada Oluşturulacak Öğe yanlış veya eksiktir.
RP
Oluşturma Konumu
Oyuncuyu yerleştirir önce or Sonra Render Element içeriği. Özel bir mount div için, After/Before genellikle o düğüme göre çalışmaya devam eder; mount div'i boş bırakın ve widget'ın onu doldurmasına izin verin.
EX
Listeyi Hariç Tut
Seçicilerin olması gerekenler değil İçerik Seçici'nin içinde olsalar bile, aynı şekilde konuşulabilirler. # / . Kurallar, virgülle ayrılmış olarak. Örnek: #comments,.sidebar,.ads,.no-speech.
TT
Başlık Seçici / Başlık Metni
Başlık Seçici — Sayfadan dinamik başlık (örnek: h1).
Başlık Metni — Oynatıcıda gösterilen sabit başlık. Başlık Metni kullanırken Başlık Seçici alanını boş bırakın.
CT
İçerik Metni
İsteğe bağlı sabit anlatım metni. Kullanıldığında, İçerik Seçici boş kalabilir. DOM içeriğinin sesi yönlendirmemesi gereken statik tanıtım blokları için kullanışlıdır.
HTML siteleri için genel kural: İçerik Seçici, kontrol ettiğiniz sarmalayıcıyı işaret eder (örneğin). article.post or #main), Render Element, bağlantı noktasına işaret eder ve Exclude List, gezinme menüsünü, reklamları ve yorumları atlar.
Örnekler
Özel HTML düzenleri için pratik eşleme örnekleri
Örnek A
Tam Sayfa Oynatıcılı Özel Düzen Makalesi
Statik veya CMS şablonunuz bir makale ve bir bağlantı içerir:
Kullanım self_class Metnin anlatılması gereken kısmı, montaj dosyasının kendisinde yer aldığında.
Örnek C
Tek bir Düğme widget'ı içeren statik site şablonları
yer .gsp_button_player Birçok statik şablonda. Render Element içeren Tek Düğmeli Oynatıcı widget'ı. .gsp_button_player Hepsini çalıştırabilir. Yalnızca ses, tasarım, seçiciler veya URL kurallarının farklı olması gerektiğinde ek widget'lar oluşturun.
widget'lar
Sitenize özel yapay zeka sesli widget'ları oluşturun.
Yayınla ve dinle — Durumu Yayınlandı olarak ayarlayın, canlı sayfayı yenileyin, oynatmayı test edin.
Sayfa metni değiştiğinde, Akıllı Ses Senkronizasyonu arka planda anlatımı yeniden oluşturabilir. Eşleme alanları yine de karar verir. hangi metin ve nerede Oyuncu hayatta kalıyor.
SSS
Sıkça Sorulan Sorular: HTML web sitesi metinden sese dönüştürme özelliği
Bir HTML web sitesi, GSpeech ile metinden sese dönüştürmeyi ve yapay zekâ seslerini destekliyor mu?
Evet. GSpeech Herhangi bir HTML sitesinde, statik içerik oluşturucuda veya komut dosyasını yapıştırabileceğiniz özel bir CMS'de çalışır. Sunucu tarafında metin okuma (TTS) hattı oluşturmanıza gerek kalmadan doğal yapay zeka sesleri ve modern oyuncular elde edersiniz.
GSpeech TTS betiğini özel bir siteye nasıl yerleştirebilirim?
Entegrasyonlar → HTML Web Sitesi bölümünden bağlantı kodunu kopyalayın. Paylaşılan şablonunuzda bir kez yapıştırın. ve dağıtın. Ardından, aşağıdaki gibi bir bağlama noktası ekleyin. <div class="gsp_full_player"></div> Oyuncunun görünmesi gereken yerleşim düzeninde, Render Element özelliğini o sınıfa ayarlayın.
Özel bir HTML sitesinde İçerik Seçici (Content Selector) ve Oluşturma Öğesi (Render Element) arasındaki fark nedir?
İçerik Seçici Seslendirilmesini istediğiniz metin için herhangi bir CSS seçici kullanabilirsiniz — örneğin #main, article.postveya içerik yönetim sisteminizden bir sınıf. İşleme Öğesi Oyuncu arayüzünün eklendiği yer burasıdır; genellikle binek sınıfınızdır. İşaretlemeyi kontrol ettiğiniz için, herhangi bir özel düzeni tam olarak eşleştirebilirsiniz.
GSpeech ses teknolojisi HTML veya statik sitemin performansını yavaşlatır mı?
Hayır. Sentez ve önbellekleme şu aşamada gerçekleşir: GSpeech Bulut tabanlıdır. Gömülü kod, hafif bir istemci betiğidir ve oyuncular yalnızca bineklerin bulunduğu yerlerde yüklenir. Barındırma hizmetiniz normal HTML, CSS ve JS içeriklerini sunmaya devam ederken, ziyaretçiler isteğe bağlı olarak dinleyebilirler.
Özel site yapay zeka sesini entegre etmek için API anahtarlarına ihtiyacım var mı?
Hayır. GSpeech is API Anahtarı Gerekmiyor HTML siteleri için. Gömülü kodu yapıştırın, Cloud Console'da widget'ları yapılandırın ve yayınlayın. Sesler ve oynatıcılar, kod tabanınızda üçüncü taraf TTS anahtarları olmadan tek bir hesaptan yönetilir.
Destek
Özel bir tema veya oluşturucu düzeni için seçiciler bulma konusunda yardıma mı ihtiyacınız var?
GSpeech destek ekibiyle iletişime geçin.Sayfa URL'sini gönderin, İçerik Seçici / Oluşturma Öğesi eşleştirmesinde size yardımcı olalım.
