HTML, CSS & JavaScript ile Gelişmiş Sesli Yazıya Dönüştürme Uygulaması

HTML, CSS & JavaScript ile Gelişmiş Sesli Yazıya Dönüştürme Uygulaması

Merhaba! Fatih Soysal olarak, bugün sizlere HTML, CSS ve JavaScript kullanarak gelişmiş bir sesli yazıya dönüştürme uygulaması oluşturmayı adım adım göstereceğim. Bu uygulama, kullanıcının konuşmasını gerçek zamanlı olarak yazıya dönüştürerek, modern web uygulamalarında kullanılabilecek güçlü bir özellik sunuyor. Öncelikle temel HTML yapısını oluşturalım. Daha sonra, CSS ile uygulamamıza görsellik katacağız ve son olarak da JavaScript’in gücüyle ses tanıma işlemini hayata geçireceğiz. Hazırsanız başlayalım!

Temel HTML Yapısı

İlk adımımız, uygulamamızın temel yapısını oluşturmak. Bunun için basit bir HTML dosyası oluşturacağız. Bu dosya, ses kaydını başlatmak için bir düğme ve dönüştürülen metnin görüntüleneceği bir alan içerecektir. Aşağıdaki kodu inceleyin:

<div id="container">
  <button id="startButton">Kaydı Başlat</button>
  <textarea id="output" readonly></textarea>
</div>

Gördüğünüz gibi, container adında bir div içinde, startButton adlı bir düğme ve output adlı bir metin alanı oluşturduk. Metin alanı, readonly özelliği sayesinde kullanıcının doğrudan yazmasını engelleyecektir. Bu, yalnızca uygulama tarafından doldurulacağı anlamına gelir. Şimdi, CSS ile uygulamamıza biraz stil katmanın zamanı geldi.

CSS ile Görsel Düzenleme

Uygulamamıza görsel bir çekicilik katmak için CSS kullanacağız. Bu adım, tamamen zevkinize ve tercihlerinize kalmış olsa da, benim önerdiğim birkaç stil kodu aşağıdadır:

#container {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

#startButton {
  padding: 10px 20px;
  font-size: 16px;
}

#output {
  width: 100%;
  height: 200px;
  padding: 10px;
  font-size: 14px;
}

Bu CSS kodları, uygulamamızın daha düzenli ve kullanıcı dostu görünmesini sağlayacaktır. Örneğin, #container sınıfı, uygulamanın merkezde ve belirli bir genişlikte görünmesini sağlar. Şimdi en önemli kısma, JavaScript koduna geçiyoruz.

JavaScript ile Ses Tanıma

İşte işin asıl özünün bulunduğu kısım. JavaScript kullanarak ses tanıma özelliğini aktif hale getireceğiz. Bu özellik, modern tarayıcılarda yerleşik olarak bulunan Web Speech API’sini kullanıyor. Aşağıdaki JavaScript koduna dikkatlice bakın:

let recognition = new webkitSpeechRecognition(); // veya SpeechRecognition
recognition.lang = 'tr-TR'; // Türkçe dil desteği
let startButton = document.getElementById('startButton');
let output = document.getElementById('output');

startButton.addEventListener('click', () => {
  recognition.start();
});

recognition.onresult = (event) => {
  let transcript = event.results[0][0].transcript;
  output.value += transcript;
};

recognition.onerror = (event) => {
  console.error("Hata oluştu: ", event.error);
};

Bu kod, öncelikle bir ses tanıma nesnesi oluşturuyor ve dil olarak Türkçe’yi seçiyor. Daha sonra, başlatma düğmesine tıklandığında ses tanımayı başlatıyor ve sonuçları metin alanına yazdırıyor. Hata durumlarında ise konsola hata mesajı yazdırıyor. Bu kodu HTML dosyanızın içine eklediğinizde, uygulamanız çalışmaya hazır olacaktır. Unutmayın ki, bu kodun düzgün çalışması için tarayıcınızın Web Speech API’sini desteklemesi gerekmektedir.

Gelişmiş Özellikler

Bu temel uygulamaya, ek özellikler ekleyerek daha da geliştirebilirsiniz. Örneğin; ses tanıma doğruluğunu artırmak için, farklı dil desteği ekleyebilir veya yazım hatalarını düzeltmek için bir algoritma kullanabilirsiniz. Ayrıca, kullanıcı deneyimini iyileştirmek için, ses kaydı sırasında bir görsel geri bildirim sağlayabilirsiniz. Bu gelişmiş özellikleri ekleyerek, daha güçlü ve kullanışlı bir sesli yazıya dönüştürme uygulaması oluşturabilirsiniz. Bu konuda daha fazla bilgi edinmek için, MDN Web Docs sitesini ziyaret edebilirsiniz.

Ayrıca, kendi web sitenizde bu tarz uygulamalar geliştirmek için daha fazla ipucu ve bilgi almak isterseniz, benim web sitemi ziyaret etmeyi unutmayın: fatihsoysal.com

Umarım bu makale, sizlere HTML, CSS ve JavaScript kullanarak gelişmiş bir sesli yazıya dönüştürme uygulaması oluşturmanızda yardımcı olmuştur. Herhangi bir sorunuz veya öneriniz olursa, lütfen bana bildirin.

#Etiketler: sesli yazıya dönüştürme, speech-to-text, HTML, CSS, JavaScript, voice recognition, web uygulaması, programlama, kodlama, tutorial, rehber, Web Speech API, Fatih Soysal