Herhangi Bir Web Sayfasına Metinden Konuşmaya Özellik Nasıl Eklenir

konuşma metni özellik bir metnin sözlü anlatımı bir cihazda görüntüleniyor. Şu anda, dizüstü bilgisayarlar, tabletler ve cep telefonları gibi cihazlar zaten bu özelliğe sahip. Web tarayıcısı gibi bu cihazlarda çalışan herhangi bir uygulama faydalanmak, ve işlevselliğini genişletmek. Anlatım özelliği, bir uygulama için uygun bir yardımcı olabilir. bol miktarda metin görüntüler, onun gibi dinleme seçeneği sunar web sitesi ziyaretçilerine.

Web Konuşma API'si

Web Konuşma JavaScript API'si ağ geçidi Metin Okuma özelliğine bir web tarayıcısından erişme. Bu nedenle, metin ağırlıklı bir web sayfasında metinden sese işlevini tanıtmak ve okuyucularınızın içeriği dinlemesine izin vermek istiyorsanız, bu kullanışlı API’yı kullanabilir veya daha spesifik Konuşma sentezi arayüzey.

İlk kod ve destek kontrolü

Başlamak için bir web sayfası oluşturalım. bana anlatılacak örnek metin, ve üç düğme.

 
    
 
 
Birçok Arkadaşla Tavşan
  
Bir tavşan çok popülerdi… 
 
Ama reddetti, şunu belirterek… 
  
Hikayeden çıkarılacak ders… 
 
 

Düğmeler olacak anlatı için kontroller. Şimdi emin olmak gerekir UA destekler Konuşma sentezi arayüz. Bunu yapmak için hızlı bir şekilde JavaScript’i kontrol ediyoruz. pencere nesnenin 'konuşma sentezi' özellik, ya da değil.

 onload = function () if (pencerede 'speechSynthesis')) / * konuşma sentezi desteklenir * / else / * konuşma sentezi desteklenmez * / 

Eğer konuşma sentezi kullanılabilir, önce biz başvuru oluşturmak konuşma sentezi biz atadığımız synth değişken. Ayrıca biz bayrak başlatmak ile yanlış değer (amacını yazının ilerleyen bölümlerinde göreceğiz) ve referanslar oluşturun ve olay işleyicileri tıklayın Üç düğme için de (Çal, Duraklat, Durdur).

Kullanıcı düğmelerden birini tıkladığında, ilgili işlevonClickPlay (), onClickPause (), onClickStop ()) Aranacak.

 if (pencerede 'speechSynthesis') var synth = speechSynthesis; var bayrağı = yanlış; / * düğmelerine referanslar * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * * / playEle.addEventListener düğmeleri için olay işleyicilerini tıklatın ('click', onClickPlay); pauseEle.addEventListener ('tıklayın', onClickPause); stopEle.addEventListener ('tıklayın', onClickStop); function onClickPlay ()  işlev onClickPause ()  işlev onClickStop ()  

Özel işlevler oluşturun

Şimdi hadi tıklama işlevlerini oluşturmak olay işleyicileri tarafından çağrılacak üç ayrı düğmenin listesi.

1. Oynat / Devam Et

Oynat düğmesine tıklandığında, önce biz kontrol et bayrak. Eğer öyleyse yanlış, ayarladık doğru, Bu nedenle, herhangi bir zamanda düğmeye daha sonra tıklanırsa, kodun içindeki ilk Eğer koşul yürütülmeyecek (bayrak olana kadar olmaz yanlış tekrar).

Sonra biz yeni bir örneğini oluşturmak SpeechSynthesisUtterance konuşma hakkında okunacak metin, konuşma ses seviyesi, konuşulan ses, konuşma hızı, ses tonu ve dili hakkında bilgiler içeren arabirim. Makale metni ekleriz yapıcının parametresi olarak, ve onu atama söyleyiş değişken.

 işlevi onClickPlay () if (! flag) flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector ('makale'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (ifade);  if (synth.paused) / * unpause / devam eden anlatımı * / synth.resume ();  

Kullanıyoruz SpeechSynthesis.getVoices () yöntem konuşma için ses belirlemek kullanıcının cihazında bulunan seslerden Bu yöntem bir cihazda mevcut tüm ses seçeneklerinin bir dizisini döndürdüğü için, kullanılabilir ilk cihaz sesini ata kullanarak utterance.voice = synth.getVoices () [0]; Beyan.

onend özellik, olay işleyicisini temsil eder. konuşma bittiğinde yürütülür. Bunun içinde değerini değiştiririz bayrak değişken false dön konuşmayı başlatan kod idam edilebilir düğme olduğunda tekrar tıklandı.

Öyleyse biz SpeechSynthesis.speak () yöntemi için anlatıma başla. Ayrıca kontrol etmemiz gerek eğer anlatım duraklatılmışsa, bunun için salt okunur kullanıyoruz SpeechSynthesis.paused özelliği. Anlatım duraklatılırsa, yapmamız gerekir. anlatıya devam et düğmesini kullanarak, SpeechSynthesis.resume () yöntem.

2. Duraklat

Şimdi yaratalım onClickPause () ilk kontrol ettiğimiz fonksiyon anlatım devam ediyorsa ve duraklatılmadıysa. Bu koşulları kullanarak test edebiliriz. SpeechSynthesis.speaking ve SpeechSynthesis.paused özellikleri. Her iki koşul da doğruysa, bizim onClickPause () fonksiyon konuşmayı duraklatır arayarak SpeechSynthesis.pause () yöntem.

 işlevi onClickPause () if (synth.speaking &&! synth.paused) / * anlatımı duraklat * / synth.pause ();  

3. Durdur

onClickStop () işlevi benzer şekilde inşa onClickPause (). Konuşma devam ederse, biz durdur şunu arayarak SpeechSynthesis.cancel () Bu yöntem tüm kelimeleri kaldırır.

 işlevi onClickStop () if (synth.speaking) / * anlatımı durdur * / / * safari için * / flag = false; synth.cancel ();  

Konuşmanın iptali üzerine onend olay otomatik olarak ateşlenir, ve içine zaten sıfırlama kodunu ekledik. ancak, Safari tarayıcısında bir hata var bu olayın gerçekleşmesini önler, bu nedenle onClickStop () işlevi. Safari’yi desteklemek istemiyorsanız, yapmak zorunda değilsiniz..

Tarayıcı desteği

Modern tarayıcıların tüm son sürümleri tam veya kısmi desteğe sahip olmak Konuşma sentezi API'si için. Webkit tarayıcıları çoklu sekmelerden konuşma yapmıyor, duraklatma aracı (çalışıyor ama buggy) ve kullanıcı sayfayı Webkit tarayıcılarına yeniden yüklediğinde konuşma sıfırlanmadı.

Çalışma demosu

Aşağıdaki canlı demoya bir göz atın veya Github’ın tam kodunu inceleyin.

Kaleme bakın à ??  ° Ã… ¸â ??  ?? Ã' £ Konuşma Metni - JavaScript by HONGKIAT (@hkdc) CodePen'de.