Mintik
3 yıl önce

JSpeaker

sitedeki yazıları okuyan robot

Daha önceleri bir yerde buna  benzer bir uygulama ile karşılaşmıştım. Makalenin hemen yanındaki hoparlör ikonuna tıklayınca yazıyı baştan sona tekrar eden bir örnekti. Hangi web sitesi olduğunu şu an için hatırlamıyorum ama sanırım bir haber sitesiydi. Ayrıca Google translatede de bu özelliğin aynısı var. Türkçe yazdığınız  cümlenin okunuşunu mikrofon ikonuna tıkladığınızda Türkçe sesli olarak size cümleyi okuyan bir robot sesi duyarsınız. Aynı şekilde başka dile çevirmiş olduğunuz  cümlenin tercümesinin de nasıl söylendiğini dinleyebilirsiniz.

jQuery jSpeaker uygulaması web sitenizdeki makaleyi sesli okuyabilen bir robot özelliğindedir. Bunu  kullanarak dilden dile çeviri yapabilen bir sözlük sitesi yapıp yapamayacağınız hakkında bir şey söyleyemem fakat sitenizdeki yazıları görme sorunu olan kişilerin daha rahat okumalarını (dinlemelerini) sağlayabilirsiniz. jSpeaker’in kötü tarafı şuan için sadece bir kaç dili destekliyor olması. İspanyolca, İngilizce, Almanca ve Hollandaca dillerini destekliyor şimdilik.  Türkçe makaleyi İngilizce şivesinde okuduğu  zaman çok komik oluyor. Umarım  Daantje Eeltink  ilerde Türkçe dilini de ekler jSpeaker uygulamasına. 

  • Download
  • Demo

Az önce jSpeaker’in kodlarına baktım da Google translate ile birlikte çalıştığını fark ettim. Yani Google translatedeki robotun sesi ile çalışan bir uygulama. Bu da demek oluyor ki yazılarınıza Türkçe’yi düzgün bir şekilde okuyan robot eklemeniz mümkün.

jSpeaker.js dosyasında şöyle bir kod gördüm.

	$.fn._jSpeakerSay = function(){
		$('#jSpeaker_player_holder').jPlayer("setMedia", {
			mp3: "https://translate.google.com/translate_tts?tl=" + settings['lang'] + "&q=" + escape($.trim(jSpeakerLines[jSpeakerLine]))
		}).jPlayer("play");
		jSpeakerLine++;

Bu kodun anlamı şudur : https://translate.google.com/translate_tts?tl= adresinden sonra = lang = seçmiş olduğunuz dilin şivesi ile yazılar okunsun.

Ayrıca jSpeaker.js dosyasının en üstünde de lang kelimesine eşit olan değeri ekleyebileceğiniz bir bölüm var. Buradaki lang: “en” kodunu tr ile değiştirdiğinizde Google translatede Türkçe şivesi ile konuşan robotun ses dosyası ile eşleşiyor. Tr olarak değiştirdiğiniz zaman Çok düzgün bir şekilde yazıları Türkçe okuyabiliyor. Yanlız bir kusuru var.Türkçe karakterlerde ı, ş, ğ, ü, ç gibi kelimeleri okurken biraz sorunlu. Mesela “ı” harfi html olarak %0131 gibi  bir numaraya eşit oluyor. Bu yüzden ı diyeceğine %0131 numarasını okuyor. Sanırım  bunu düzeltmek için Jplayer.swf dosyasının düzeltilmesi gerek. ı, ş, ğ, ü gibi harflerin yerine  i, s, g, u harfleri kullanılması gerekiyor.

	var settings = {
		swfPath: "jQuery.jPlayer.2.0.0",
		lang: "en",
		line: false
	}

Ayrıca jSpeaker uygulaması jPlayer ile birlikte çalışıyor. jPlayer dosyaları olmadan kullanamıyorsunuz. Sırf deneme amaçlı bir kaç tane küfürlü kelime yazdım. Gerçekten iyi  sövüyor.

Kullanım

  • Head etiketleri arasına eklemeniz  gereken bölümler.

Js dosya adresleri :

<script src="jquery-1.5.2.min.js"></script>
<script src="jQuery.jPlayer.2.0.0/jquery.jplayer.min.js"></script>
<script src="jSpeaker.js"></script>

JavaScript :

<script>
	$(document).ready(function(){
		$('a.en').click(function(){
			$('#en').jSpeaker();
	});

	//dutch
	$('a.nl').click(function(){
		$('#nl').jSpeaker({lang:'nl'});
	});
});
</script>
  • Body etiketleri arasına eklenmesi gereken bölüm.

Html :

Hollanda ve İngilizce lisanları.

		<div id="en">
			Hello World, this is a jSpeaker sample!<br />
			I'm a robot voice.
		</div>

		<a href="#" class="en">speak!</a>

		<a href="#" class="nl">Lees voor!</a>
Mintik senin düşüncelerini merak ediyor. Bir yorum yaz