{"id":8963,"date":"2025-01-08T08:30:13","date_gmt":"2025-01-08T05:30:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/"},"modified":"2025-01-08T08:30:13","modified_gmt":"2025-01-08T05:30:13","slug":"html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/","title":{"rendered":"HTML, CSS &#038; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131"},"content":{"rendered":"<p><body><\/p>\n<p>HTML, CSS &#038; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131<\/p>\n<p>Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim.  Bu uygulama, kullan\u0131c\u0131n\u0131n konu\u015fmas\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek, modern web uygulamalar\u0131nda kullan\u0131labilecek g\u00fc\u00e7l\u00fc bir \u00f6zellik sunuyor.  \u00d6ncelikle temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Daha sonra, CSS ile uygulamam\u0131za g\u00f6rsellik kataca\u011f\u0131z ve son olarak da JavaScript&#8217;in g\u00fcc\u00fcyle ses tan\u0131ma i\u015flemini hayata ge\u00e7irece\u011fiz.  Haz\u0131rsan\u0131z ba\u015flayal\u0131m!<\/p>\n<h2>Temel HTML Yap\u0131s\u0131<\/h2>\n<p>\u0130lk ad\u0131m\u0131m\u0131z, uygulamam\u0131z\u0131n temel yap\u0131s\u0131n\u0131 olu\u015fturmak.  Bunun i\u00e7in basit bir HTML dosyas\u0131 olu\u015fturaca\u011f\u0131z.  Bu dosya, ses kayd\u0131n\u0131 ba\u015flatmak i\u00e7in bir d\u00fc\u011fme ve d\u00f6n\u00fc\u015ft\u00fcr\u00fclen metnin g\u00f6r\u00fcnt\u00fclenece\u011fi bir alan i\u00e7erecektir.  A\u015fa\u011f\u0131daki kodu inceleyin:<\/p>\n<pre><code class=\"language-html\">\n&lt;div id=\"container\"&gt;\n  &lt;button id=\"startButton\"&gt;Kayd\u0131 Ba\u015flat&lt;\/button&gt;\n  &lt;textarea id=\"output\" readonly&gt;&lt;\/textarea&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi,  <code>container<\/code> ad\u0131nda bir div i\u00e7inde,  <code>startButton<\/code> adl\u0131 bir d\u00fc\u011fme ve  <code>output<\/code> adl\u0131 bir metin alan\u0131 olu\u015fturduk.  Metin alan\u0131,  <code>readonly<\/code> \u00f6zelli\u011fi sayesinde kullan\u0131c\u0131n\u0131n do\u011frudan yazmas\u0131n\u0131 engelleyecektir.  Bu, yaln\u0131zca uygulama taraf\u0131ndan doldurulaca\u011f\u0131 anlam\u0131na gelir.  \u015eimdi,  CSS ile uygulamam\u0131za biraz stil katman\u0131n zaman\u0131 geldi.<\/p>\n<h2>CSS ile G\u00f6rsel D\u00fczenleme<\/h2>\n<p>Uygulamam\u0131za g\u00f6rsel bir \u00e7ekicilik katmak i\u00e7in CSS kullanaca\u011f\u0131z.  Bu ad\u0131m, tamamen zevkinize ve tercihlerinize kalm\u0131\u015f olsa da,  benim \u00f6nerdi\u011fim birka\u00e7 stil kodu a\u015fa\u011f\u0131dad\u0131r:<\/p>\n<pre><code class=\"language-css\">\n#container {\n  width: 500px;\n  margin: 0 auto;\n  text-align: center;\n}\n\n#startButton {\n  padding: 10px 20px;\n  font-size: 16px;\n}\n\n#output {\n  width: 100%;\n  height: 200px;\n  padding: 10px;\n  font-size: 14px;\n}\n<\/code><\/pre>\n<p>Bu CSS kodlar\u0131, uygulamam\u0131z\u0131n daha d\u00fczenli ve kullan\u0131c\u0131 dostu g\u00f6r\u00fcnmesini sa\u011flayacakt\u0131r.  \u00d6rne\u011fin,  <code>#container<\/code>  s\u0131n\u0131f\u0131,  uygulaman\u0131n merkezde ve belirli bir geni\u015flikte g\u00f6r\u00fcnmesini sa\u011flar.  \u015eimdi en \u00f6nemli k\u0131sma, JavaScript koduna ge\u00e7iyoruz.<\/p>\n<h2>JavaScript ile Ses Tan\u0131ma<\/h2>\n<p>\u0130\u015fte i\u015fin as\u0131l \u00f6z\u00fcn\u00fcn bulundu\u011fu k\u0131s\u0131m.  JavaScript kullanarak ses tan\u0131ma \u00f6zelli\u011fini aktif hale getirece\u011fiz.  Bu \u00f6zellik,  modern taray\u0131c\u0131larda yerle\u015fik olarak bulunan Web Speech API&#8217;sini kullan\u0131yor.  A\u015fa\u011f\u0131daki JavaScript koduna dikkatlice bak\u0131n:<\/p>\n<pre><code class=\"language-javascript\">\nlet recognition = new webkitSpeechRecognition(); \/\/ veya SpeechRecognition\nrecognition.lang = 'tr-TR'; \/\/ T\u00fcrk\u00e7e dil deste\u011fi\nlet startButton = document.getElementById('startButton');\nlet output = document.getElementById('output');\n\nstartButton.addEventListener('click', () => {\n  recognition.start();\n});\n\nrecognition.onresult = (event) => {\n  let transcript = event.results[0][0].transcript;\n  output.value += transcript;\n};\n\nrecognition.onerror = (event) => {\n  console.error(\"Hata olu\u015ftu: \", event.error);\n};\n<\/code><\/pre>\n<p>Bu kod, \u00f6ncelikle bir ses tan\u0131ma nesnesi olu\u015fturuyor ve dil olarak T\u00fcrk\u00e7e&#8217;yi se\u00e7iyor.  Daha sonra, ba\u015flatma d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda ses tan\u0131may\u0131 ba\u015flat\u0131yor ve sonu\u00e7lar\u0131 metin alan\u0131na yazd\u0131r\u0131yor.  Hata durumlar\u0131nda ise konsola hata mesaj\u0131 yazd\u0131r\u0131yor.  Bu kodu HTML dosyan\u0131z\u0131n i\u00e7ine ekledi\u011finizde, uygulaman\u0131z \u00e7al\u0131\u015fmaya haz\u0131r olacakt\u0131r.  Unutmay\u0131n ki, bu kodun d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131 i\u00e7in taray\u0131c\u0131n\u0131z\u0131n Web Speech API&#8217;sini desteklemesi gerekmektedir.<\/p>\n<h2>Geli\u015fmi\u015f \u00d6zellikler<\/h2>\n<p>Bu temel uygulamaya,  ek \u00f6zellikler ekleyerek daha da geli\u015ftirebilirsiniz.  \u00d6rne\u011fin;  ses tan\u0131ma do\u011frulu\u011funu art\u0131rmak i\u00e7in,  farkl\u0131 dil deste\u011fi ekleyebilir veya  yaz\u0131m hatalar\u0131n\u0131 d\u00fczeltmek i\u00e7in bir algoritma kullanabilirsiniz. Ayr\u0131ca,  kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in,  ses kayd\u0131 s\u0131ras\u0131nda bir g\u00f6rsel geri bildirim sa\u011flayabilirsiniz.  Bu geli\u015fmi\u015f \u00f6zellikleri ekleyerek,  daha g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturabilirsiniz.  Bu konuda daha fazla bilgi edinmek i\u00e7in,  <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Speech_API\" target=\"_blank\">MDN Web Docs<\/a>  sitesini ziyaret edebilirsiniz.<\/p>\n<p>Ayr\u0131ca,  kendi web sitenizde bu tarz uygulamalar geli\u015ftirmek i\u00e7in daha fazla ipucu ve bilgi almak isterseniz,  benim web sitemi ziyaret etmeyi unutmay\u0131n: <a href=\"https:\/\/fatihsoysal.com\" target=\"_blank\">fatihsoysal.com<\/a><\/p>\n<p>Umar\u0131m bu makale,  sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturman\u0131zda yard\u0131mc\u0131 olmu\u015ftur.  Herhangi bir sorunuz veya \u00f6neriniz olursa, l\u00fctfen bana bildirin.<\/p>\n<p>#Etiketler: sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme, speech-to-text, HTML, CSS, JavaScript, voice recognition, web uygulamas\u0131, programlama, kodlama, tutorial, rehber, Web Speech API, Fatih Soysal<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"HTML, CSS &#038; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131 Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8963","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML, CSS &amp; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, kullan\u0131c\u0131n\u0131n konu\u015fmas\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek, modern web uygulamalar\u0131nda kullan\u0131labilecek g\u00fc\u00e7l\u00fc bir \u00f6zellik sunuyor. \u00d6ncelikle temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Daha sonra, CSS ile uygulamam\u0131za g\u00f6rsellik kataca\u011f\u0131z ve son olarak da JavaScript&#039;in g\u00fcc\u00fcyle ses tan\u0131ma i\u015flemini hayata ge\u00e7irece\u011fiz. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML, CSS &amp; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, kullan\u0131c\u0131n\u0131n konu\u015fmas\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek, modern web uygulamalar\u0131nda kullan\u0131labilecek g\u00fc\u00e7l\u00fc bir \u00f6zellik sunuyor. \u00d6ncelikle temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Daha sonra, CSS ile uygulamam\u0131za g\u00f6rsellik kataca\u011f\u0131z ve son olarak da JavaScript&#039;in g\u00fcc\u00fcyle ses tan\u0131ma i\u015flemini hayata ge\u00e7irece\u011fiz. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-08T05:30:13+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML, CSS &#038; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131\",\"datePublished\":\"2025-01-08T05:30:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/\"},\"wordCount\":672,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/\",\"name\":\"HTML, CSS & JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-01-08T05:30:13+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, kullan\u0131c\u0131n\u0131n konu\u015fmas\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek, modern web uygulamalar\u0131nda kullan\u0131labilecek g\u00fc\u00e7l\u00fc bir \u00f6zellik sunuyor. \u00d6ncelikle temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Daha sonra, CSS ile uygulamam\u0131za g\u00f6rsellik kataca\u011f\u0131z ve son olarak da JavaScript'in g\u00fcc\u00fcyle ses tan\u0131ma i\u015flemini hayata ge\u00e7irece\u011fiz. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML, CSS &#038; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML, CSS & JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, kullan\u0131c\u0131n\u0131n konu\u015fmas\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek, modern web uygulamalar\u0131nda kullan\u0131labilecek g\u00fc\u00e7l\u00fc bir \u00f6zellik sunuyor. \u00d6ncelikle temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Daha sonra, CSS ile uygulamam\u0131za g\u00f6rsellik kataca\u011f\u0131z ve son olarak da JavaScript'in g\u00fcc\u00fcyle ses tan\u0131ma i\u015flemini hayata ge\u00e7irece\u011fiz. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML, CSS & JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131","og_description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, kullan\u0131c\u0131n\u0131n konu\u015fmas\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek, modern web uygulamalar\u0131nda kullan\u0131labilecek g\u00fc\u00e7l\u00fc bir \u00f6zellik sunuyor. \u00d6ncelikle temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Daha sonra, CSS ile uygulamam\u0131za g\u00f6rsellik kataca\u011f\u0131z ve son olarak da JavaScript'in g\u00fcc\u00fcyle ses tan\u0131ma i\u015flemini hayata ge\u00e7irece\u011fiz. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-01-08T05:30:13+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"4 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML, CSS &#038; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131","datePublished":"2025-01-08T05:30:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/"},"wordCount":672,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/","url":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/","name":"HTML, CSS & JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-01-08T05:30:13+00:00","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere HTML, CSS ve JavaScript kullanarak geli\u015fmi\u015f bir sesli yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrme uygulamas\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu uygulama, kullan\u0131c\u0131n\u0131n konu\u015fmas\u0131n\u0131 ger\u00e7ek zamanl\u0131 olarak yaz\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek, modern web uygulamalar\u0131nda kullan\u0131labilecek g\u00fc\u00e7l\u00fc bir \u00f6zellik sunuyor. \u00d6ncelikle temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Daha sonra, CSS ile uygulamam\u0131za g\u00f6rsellik kataca\u011f\u0131z ve son olarak da JavaScript'in g\u00fcc\u00fcyle ses tan\u0131ma i\u015flemini hayata ge\u00e7irece\u011fiz. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-css-javascript-ile-gelismis-sesli-yaziya-donusturme-uygulamasi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML, CSS &#038; JavaScript ile Geli\u015fmi\u015f Sesli Yaz\u0131ya D\u00f6n\u00fc\u015ft\u00fcrme Uygulamas\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=8963"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8963\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=8963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=8963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=8963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}