Web Sitenizde Yazılarınızı/Makalelerinizi Ziyaretçilerinize Sesli Dinletin

Blog yazılarınızı ziyaretçilerinize dinletebilirsiniz. Bunun için aşağıda 2 farklı seçenekli kod vereceğim. Yapmanız gereken kodu <body> sonrasına eklemek. Bu kod tüm sitelerde çalışır.

Kodu Blogger Temasına Ekleme

Blogger Yönetim Paneline Giriş: Blogger hesabınıza giriş yapın ve blogunuzu seçin.
Tema Düzenleme: Sol menüden "Tema" seçeneğini tıklayın ve ardından "HTML'yi Düzenle" butonuna tıklayın.
Kodu Ekleme: Açılan HTML düzenleyicide, <body> etiketinin en altına yukarıdaki JavaScript kodunu ekleyin.

Kod 1 - Tek butonla dinle durdur

<script>
  let isPlaying = false;
  let utterance = null;

  function toggleSpeech(text) {
    if ('speechSynthesis' in window) {
      if (!isPlaying) {
        utterance = new SpeechSynthesisUtterance(text);
        window.speechSynthesis.speak(utterance);
        isPlaying = true;
      } else {
        window.speechSynthesis.cancel();
        isPlaying = false;
      }
    } else {
      alert("Tarayıcınız metin-ses dönüştürmeyi desteklemiyor.");
    }
  }

  document.addEventListener('DOMContentLoaded', function() {
    const posts = document.querySelectorAll('.post-body');
    posts.forEach(post => {
      const text = post.innerText;
      const button = document.createElement('button');
      button.innerText = 'Play';
      button.style.marginBottom = '10px';
      button.style.padding = '10px 20px';
      button.style.backgroundColor = '#4CAF50';
      button.style.color = 'white';
      button.style.border = 'none';
      button.style.borderRadius = '5px';
      button.style.cursor = 'pointer';
      button.style.fontSize = '16px';
      button.addEventListener('click', () => {
        toggleSpeech(text);
        button.innerText = isPlaying ? 'Pause' : 'Play';
        button.style.backgroundColor = isPlaying ? '#f44336' : '#4CAF50';
      });
      post.insertBefore(button, post.firstChild);
    });
  });
</script>

Kod 2 - Dinle ve Durdur için iki ayrı buton

<script>
  let isPlaying = false;
  let utterance = null;

  function playSpeech(text) {
    if ('speechSynthesis' in window) {
      utterance = new SpeechSynthesisUtterance(text);
      window.speechSynthesis.speak(utterance);
      isPlaying = true;
    } else {
      alert("Tarayıcınız metin-ses dönüştürmeyi desteklemiyor.");
    }
  }

  function stopSpeech() {
    if (isPlaying) {
      window.speechSynthesis.cancel();
      isPlaying = false;
    }
  }

  document.addEventListener('DOMContentLoaded', function() {
    const posts = document.querySelectorAll('.post-body');
    posts.forEach(post => {
      const text = post.innerText;
      const dinleButton = document.createElement('button');
      dinleButton.innerText = 'Dinle';
      dinleButton.style.marginBottom = '10px';
      dinleButton.style.padding = '10px 20px';
      dinleButton.style.backgroundColor = '#4CAF50';
      dinleButton.style.color = 'white';
      dinleButton.style.border = 'none';
      dinleButton.style.borderRadius = '5px';
      dinleButton.style.cursor = 'pointer';
      dinleButton.style.fontSize = '16px';
      dinleButton.style.marginRight = '10px';
      dinleButton.addEventListener('click', () => playSpeech(text));

      const durdurButton = document.createElement('button');
      durdurButton.innerText = 'Durdur';
      durdurButton.style.marginBottom = '10px';
      durdurButton.style.padding = '10px 20px';
      durdurButton.style.backgroundColor = '#f44336';
      durdurButton.style.color = 'white';
      durdurButton.style.border = 'none';
      durdurButton.style.borderRadius = '5px';
      durdurButton.style.cursor = 'pointer';
      durdurButton.style.fontSize = '16px';
      durdurButton.addEventListener('click', stopSpeech);

      const buttonContainer = document.createElement('div');
      buttonContainer.appendChild(dinleButton);
      buttonContainer.appendChild(durdurButton);
      post.insertBefore(buttonContainer, post.firstChild);
    });
  });
</script>

Örnek Kullanım

<body>
  <!-- Diğer içerikler -->

  <script>
    let isPlaying = false;
    let utterance = null;

    function playSpeech(text) {
      if ('speechSynthesis' in window) {
        utterance = new SpeechSynthesisUtterance(text);
        window.speechSynthesis.speak(utterance);
        isPlaying = true;
      } else {
        alert("Tarayıcınız metin-ses dönüştürmeyi desteklemiyor.");
      }
    }

    function stopSpeech() {
      if (isPlaying) {
        window.speechSynthesis.cancel();
        isPlaying = false;
      }
    }

    document.addEventListener('DOMContentLoaded', function() {
      const posts = document.querySelectorAll('.post-body');
      posts.forEach(post => {
        const text = post.innerText;
        const dinleButton = document.createElement('button');
        dinleButton.innerText = 'Dinle';
        dinleButton.style.marginBottom = '10px';
        dinleButton.style.padding = '10px 20px';
        dinleButton.style.backgroundColor = '#4CAF50';
        dinleButton.style.color = 'white';
        dinleButton.style.border = 'none';
        dinleButton.style.borderRadius = '5px';
        dinleButton.style.cursor = 'pointer';
        dinleButton.style.fontSize = '16px';
        dinleButton.style.marginRight = '10px';
        dinleButton.addEventListener('click', () => playSpeech(text));

        const durdurButton = document.createElement('button');
        durdurButton.innerText = 'Durdur';
        durdurButton.style.marginBottom = '10px';
        durdurButton.style.padding = '10px 20px';
        durdurButton.style.backgroundColor = '#f44336';
        durdurButton.style.color = 'white';
        durdurButton.style.border = 'none';
        durdurButton.style.borderRadius = '5px';
        durdurButton.style.cursor = 'pointer';
        durdurButton.style.fontSize = '16px';
        durdurButton.addEventListener('click', stopSpeech);

        const buttonContainer = document.createElement('div');
        buttonContainer.appendChild(dinleButton);
        buttonContainer.appendChild(durdurButton);
        post.insertBefore(buttonContainer, post.firstChild);
      });
    });
  </script>
</body>