JavaScript ile sesi yazıya çevirme (speech to text) işlemi

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.

Yusuf Borucu

Yazılımı iş ve hobi olarak yapan bir insan evladıyım. Yazılıma yönelik uğraştığım ve ilgi duyduğum teknolojiler; Laravel, Android (Kotlin & Java), Vue.js ve Node.js. Her geçen gün kendimi geliştirmeye gayret gösteriyorum....

"JavaScript ile sesi yazıya çevirme (speech to text) işlemi" için hiç yorum yapılmadı.

Henüz yorum yapılmamış.

Yorum yap * E-posta adresiniz yayınlanmayacak.