Websitenizdeki Yazıları Sesli Okuma Kodu

heRanarchy

Yeni Üye
Yönetici
#1

[font=-apple-system, BlinkMacSystemFont,]Sitenize eklemek için aşağıdaki kodları kullanabilirsiniz.
Demo için aşağıdaki adrese gözatabilirsiniz.[/font]


[font=-apple-system, BlinkMacSystemFont,]" Demoya bakmak için tıklayınız... "[/font]


Kod:
<div class="entry-voice">
	<span>Sesli okuma özelliği ile bu yazıyı sesli olarak dinleyebilrisiniz.</span>
	<a href="javascript:sesli_oku()">SESLİ OKU</a>
	<a href="javascript:sesli_durdur()">SESLİ OKUMA DURDUR</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<script>
	function sesli_oku() {
		var text = $('.entry-content').text();
		responsiveVoice.speak("" + text +"","Turkish Female");
	}
	
	function sesli_durdur() {
		responsiveVoice.cancel();
	}
</script>

<style type="text/css" id="wp-custom-css">
.entry-voice {width:100%; float:left; margin:15px 0; background:#333333; color:#fff; font-size:13px; box-sizing:border-box; padding:15px; box-sizing:border-box; text-align:center;}
.entry-voice span {float:left; font-size:13px; text-align:center; width:100%; margin-bottom:10px;}
.entry-voice a {color:#fff; text-decoration:none; padding:10px 15px; border:1px solid #fff; margin-right:10px; border-radius:3px; transition:all 0.5s; display:inline-block;}
.entry-voice a:hover {background:#fff; color:#000;}		
</style>