Merhaba,


Bu yazıda JavaScript ile sesi yazıya çevirme (speech to text) işleminden bahsedeceğim.


Bu işlem için JavaScript'de bulunan SpeechRecognition özelliğinden faydalanacağız. Örnek olarak şöyle bir uygulama yapacağız:

  • Bir Html dosyası açıp ekrana boş bir img öğesi koyacağız.
  • İsim (name) ve resim (image) nesnelerini (objects) barındıran bir dizi (array) oluşturacağız.
  • Söylediğimiz kelimeye göre (ör: araba), dizinin içinde o kelimeye karşılık gelen resmi ekrandaki img içerisine bastıracağız.


Ekrandaki img öğemiz şu şekilde olsun:

<img class="image" src="">


Dizimizi tanımlayalım:

let array = [
    {
        image: 'https://www.61saat.com/images/haberler/2019/08/internet_uzerinden_sahibinden_araba_ilani_nasil_verilir_h666524_78224.png',
        name: 'araba'
    },
    {
        image: 'https://www.ikranurprefabrik.com/wp-content/uploads/2018/05/ayder-prefabrik-ev-9-670x478.png',
        name: 'ev'
    },
    {
        image: 'https://ichef.bbci.co.uk/news/410/cpsprodpb/16FA9/production/_92712149_gettyimages-480164327.jpg',
        name: 'kedi'
    }
];


SpeechRecognition'ı tanımlayıp dil olarak Türkçe'yi belirtelim:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.lang = 'tr-TR';


Ekrandaki img öğemize erişelim:

const image = document.querySelector('.image');


Ses tanıma işlemini başlatmak ve gelen sonucu dinlemek için eventListener'ları oluşturalım. Gelen sonucu konsola bastıralım:

recognition.addEventListener('end', recognition.start);
recognition.start();

recognition.addEventListener('result', e => {
    console.log(e);
});    


Sayfayı çalıştırıp mikrofona izin verdikten sonra konuşalım ve konsoldaki çıktıya bakalım:


Bu çıktıdan söylediğimiz kelimeye ulaşmak için şöyle bir işlem yapalım:

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
      .map(result => result[0])
      .map(result => result.transcript)
      .join('');
});   


Son olarak da söylediğimiz kelimeye, tanımladığımız dizide karşılık gelen resmi ekrandaki img öğesinin içine bastıralım:

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
      .map(result => result[0])
      .map(result => result.transcript)
      .join('');

  var index = array.findIndex(x => x.name === transcript);
  image.src = array[index].image;
});


Html dosyamızın tam hali aşağıdaki gibi olacaktır:

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Speech to text</title>
</head>

<body>
  <img class="image" src="">

  <script>
    let array = [
        {
            image: 'https://www.61saat.com/images/haberler/2019/08/internet_uzerinden_sahibinden_araba_ilani_nasil_verilir_h666524_78224.png',
            name: 'araba'
        },
        {
            image: 'https://www.ikranurprefabrik.com/wp-content/uploads/2018/05/ayder-prefabrik-ev-9-670x478.png',
            name: 'ev'
        },
        {
            image: 'https://ichef.bbci.co.uk/news/410/cpsprodpb/16FA9/production/_92712149_gettyimages-480164327.jpg',
            name: 'kedi'
        }
    ];

    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  
    const recognition = new SpeechRecognition();
    recognition.lang = 'tr-TR';
  
    const image = document.querySelector('.image');

    recognition.addEventListener('end', recognition.start);
    recognition.start();
  
    recognition.addEventListener('result', e => {
      const transcript = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join('');
  
      var index = array.findIndex(x => x.name === transcript);
      image.src = array[index].image;
    });      
  </script>  
</body>

</html>


Sayfayı çalıştırdıktan sonraki sonucu görmek için Youtube'daki video anlatımımdan faydalanabilirsiniz: Link


Umarım yararlı olmuştur.


İyi çalışmalar.