API JavaScript

Web Sayfasına Metin Okuma Özelliği Nasıl Eklenir?

Metin-konuşma(text-to-speech) özelliği bir aygıtta görüntülenen metni okuyarak seslendirilmesine denir. Günümüzde dizüstü bilgisayarlar, tabletler ve cep telefonları gibi cihazların zaten bu özelliği olduğunu biliyoruz. Bu aygıtlarda çalışan bir web tarayıcısı gibi herhangi bir uygulamada bu özelliği kullanabilir ve işlevselliğini genişletebiliriz. Anlatım özelliği, web sitesinde uzun metin görüntüleyen bir uygulamada ziyaretçilere dinleme seçeneği sunmasıyla oldukça kullanışlı olacak niteliktedir.

Web Speech API

Web Speech JavaScript API web tarayıcısı tarafından Metin Okuma özelliğine erişmek için kullanılan geçittir. Bu kullanışlı API’yi uzun metinlere sahip bir web sayfasında metin okuma işlevselliğini kazandırmak ve okuyucularınızın içeriği dinlemesine izin vermek veya daha spesifik olmak için  SpeechSynthesis arayüzünü kullanabilirsiniz.

Ön kod & Destek kontrolü

Başlamak için anlatılacak örnek metni ve üç button(Play, Pause, Stop) içeren bir web sayfası oluşturalım.

Düğmeler anlatımı kontrol etmemizi sağlayacaktır. Şimdi UA(User Agent)’nın SpeechSynthesis arayüzünü destekleyip desteklemediğinden emin olmamız gerekiyor.

User Agent’e örnek

Webmaster-Kitchen-UserAgent

Bunu yapmak için window nesnesinin 'speechSynthesis' özelliğine sahip olup olmadığını hızlı bir şekilde JavaScript ile kontrol ediyoruz.

Eğer SpeechSynthesis mevcutsa öncelikle synth değişkenine speechSynthesis‘ı referans olarak atıyoruz. Bunun yanında flag değişkeni oluşturup değerini false olarak belirliyoruz.(amacını ilerleyen aşamalarda göreceğiz) ve üç button için de referans ve tıklama(references & click event) olaylarını oluşturuyoruz (Play, Pause, Stop).

Kullanıcı button’lardan herbirine tıklandığında ilgili işlevler(onClickPlay(), onClickPause(), onClickStop()) çağrılır.

Özel işlevler oluştur

Şimdi olay işleyicileri tarafından çağrılacak üç adet birbirinden ayrı button’nun tıklama işlevlerini oluşturalım.

1. Play/Resume

Play button’nu tıklandığında önce flag değişkenini kontrol ediyoruz. Eğer false olursa onu true olarak ayarlıyoruz bu nedenle play button daha sonra tıklandığında ilk durumunda yer alan kod yürütülemez. Aslında burda flag değişkenin görevi bir kontrol yapısı gibi düşünebiliriz.

Ardından konuşma hakkında okunacak metinin belirlenmesi, ses düzeyi, konuşulan ses, konuşmanın hızı ve konuşma dili gibi konularla ilgili bilgileri tutan SpeechSynthesisUtterance arayüzünün yeni bir örneğini oluşturuyoruz.

Kullanıcının cihazında bulunan seslerden konuşma için bir ses belirlemek için SpeechSynthesis.getVoices() yöntemini kullanırız. Bu yöntem bir cihazdaki tüm mevcut ses seçeneklerinden oluşan bir dizi döndürdüğünden mevcut ilk cihaz sesini utterance.voice = synth.getVoices()[0]; alacaktır.

Onend özelliği konuşma tamamlandığında yürütülen bir olay işleyicisini temsil eder. İçinde button’a tekrar tıklattığınızda konuşmayı başlatan kodun çalıştırılabilmesi için flag değişkeninin değerini false olarak değiştiriyoruz.[ if(!flag) şartının sağlanması için]

Daha sonra anlatımı başlatmak için SpeechSynthesis.speak() yöntemini çağırırız. Ayrıca salt okunur SpeechSynthesis.paused özelliğini kullandığımız anlatımın duraklatılıp bırakılmadığını kontrol etmeliyiz. Anlatım duraklatıldıysa SpeechSynthesis.resume() yöntemini kullanarak elde edebileceğimiz button’a basarak anlatımını sürdürmeliyiz.

2. Pause

Anlatımın devam etmesi ve duraklatılmadığını ilk kontrol ettiğimiz onClickPause() işlevini oluşturduk. Bu koşulları SpeechSynthesis.speaking ve SpeechSynthesis.paused özelliklerini kullanarak test edebiliriz. Her iki koşulda sağlanırsa onClickPause() işlevi SpeechSynthesis.pause() yöntemini çağırarak konuşmayı duraklatır.

3. Stop

OnClickStop() işlevi onClickPause() işlevine benzer şekilde oluşturulmuştur. Konuşma devam ediyorsa tüm konuşmaları kaldıran SpeechSynthesis.cancel() yöntemini çağırarak durdururuz.

Tarayıcı Desteği

Modern tarayıcıların tüm son sürümlerinde speech synthesis API‘si için tam veya kısmi destek olduğunu göz önünde bulundurmakta fayda var. Çalışmalarımızı bu yönde yaparsak daha verimli çalışabiliriz.

Demo

See the Pen Metin Okuma Özelliği by Fatih (@fatihozel) on CodePen.

Umarım faideli olmuştur. Herkese verimli ve iyi çalışmalar diliyorum.

İşin mutfağını öğrenmek herkesin hakkı.. Webmaster Mutfakta işin mutfağını öğrenin.  ?



Yazar hakkında

Fatih Özel

Developer Teknovol | Çırak JavaScript Engineering

Yorumlar

2 Yorumlar

Bir yorum yaz