Genel bir blog sitem var, can sıkıtısından bir şeyler eklemek istedim, araştırma yaparken ResponsiveVoice.Js isimli bir kütüphane buldum, kücük bir kod hazırladım, işine yarayacak arkadaşlar çıkabilir.

Jquery selectorunde yer alan .entry-content kısmını kendinize göre düzenlemeniz gerekiyor.

Sitenize eklemek için aşağıdaki kodları kullanabilirsiniz. Demo için aşağıdaki adrese gözatabilirsiniz.

http://jsbin.com/qogicicadi/1/edit?html,output

<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>