{"id":31989,"date":"2025-10-16T11:31:35","date_gmt":"2025-10-16T08:31:35","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-morse-kodu-next-js-15-ve-web-audio-api-neden-onemli\/"},"modified":"2025-10-16T11:31:35","modified_gmt":"2025-10-16T08:31:35","slug":"temel-kavramlar-morse-kodu-next-js-15-ve-web-audio-api-neden-onemli","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/temel-kavramlar-morse-kodu-next-js-15-ve-web-audio-api-neden-onemli\/","title":{"rendered":"Temel Kavramlar: Morse Kodu, Next.js 15 ve Web Audio API Neden \u00d6nemli?"},"content":{"rendered":"

Morse kodunun zamana meydan okuyan gizemini, modern web teknolojileriyle birle\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Dijital \u00e7a\u011fda, anl\u0131k mesajla\u015fma ve video konferanslarla dolu ileti\u015fim d\u00fcnyas\u0131nda, geleneksel y\u00f6ntemlerin de kendine \u00f6zg\u00fc bir \u00e7ekicili\u011fi ve hatta pratik faydalar\u0131 olabilece\u011fini ke\u015ffetmek olduk\u00e7a ilgin\u00e7 olabilir. Bu makalede, Next.js 15’in g\u00fcc\u00fcn\u00fc ve Web Audio API’nin sundu\u011fu esnekli\u011fi kullanarak, metni sesli Morse koduna \u00e7evirebilen interaktif bir ara\u00e7 geli\u015ftirmeyi ad\u0131m ad\u0131m inceleyece\u011fiz. Hem performansl\u0131 bir kullan\u0131c\u0131 deneyimi sunacak hem de taray\u0131c\u0131 \u00fczerinden do\u011frudan ses sentezi yapabilen bu projeyi in\u015fa ederken, modern web geli\u015ftirme pratiklerini de yak\u0131ndan tan\u0131ma f\u0131rsat\u0131 bulacaks\u0131n\u0131z.<\/p>\n

\u0130leti\u015fim, insanl\u0131k tarihi boyunca s\u00fcrekli evrim ge\u00e7iren bir alan olmu\u015ftur. Telgraf\u0131n icad\u0131yla birlikte hayat\u0131m\u0131za giren ve basit ama etkili bir ileti\u015fim arac\u0131 olan Morse kodu, \u00f6zellikle k\u0131s\u0131tl\u0131 bant geni\u015fli\u011fi veya zorlu ko\u015fullarda bile bilginin aktar\u0131labilmesini sa\u011flam\u0131\u015ft\u0131r. Nokta (.) ve \u00e7izgi (-) kombinasyonlar\u0131ndan olu\u015fan bu sistem, her harfe ve say\u0131ya \u00f6zel bir temsil atayarak metin tabanl\u0131 ileti\u015fimi ses veya \u0131\u015f\u0131k sinyallerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Basitli\u011fi ve evrenselli\u011fi sayesinde amat\u00f6r telsizcilikten acil durum ileti\u015fimine kadar pek \u00e7ok alanda hala kullan\u0131lmaktad\u0131r. Bir Morse kodu \u00e7evirici in\u015fa etmek, bu tarihi ileti\u015fim y\u00f6ntemini modern web teknolojileriyle bulu\u015fturman\u0131n heyecan verici bir yoludur. Peki, bu projede neden Next.js 15 ve Web Audio API gibi \u00e7a\u011fda\u015f ara\u00e7lar\u0131 tercih ediyoruz?<\/p>\n

Next.js, React tabanl\u0131 bir framework olup, \u00f6zellikle performans ve geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan sundu\u011fu avantajlarla pop\u00fclerli\u011fini s\u00fcrd\u00fcrmektedir. Next.js 15 (veya en g\u00fcncel s\u00fcr\u00fcm\u00fcn getirdi\u011fi yenilikler), App Router mimarisi ve React Server Components (RSC) gibi \u00f6zellikleriyle, istemci taraf\u0131 ile sunucu taraf\u0131 aras\u0131ndaki ayr\u0131m\u0131 daha net hale getirerek, daha h\u0131zl\u0131 y\u00fcklenen ve daha etkili \u00e7al\u0131\u015fan uygulamalar geli\u015ftirmemize olanak tan\u0131r. Uygulaman\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131n sunucuda olu\u015fturulmas\u0131, ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcrelerini k\u0131salt\u0131rken, yaln\u0131zca etkile\u015fimli bile\u015fenlerin istemcide \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu sayede, a\u011f\u0131r JavaScript paketlerinin \u00f6n\u00fcne ge\u00e7ilir ve \u00f6zellikle mobil cihazlarda bile ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunulur. Ayr\u0131ca, geli\u015fmi\u015f veri getirme (data fetching) stratejileri ve optimize edilmi\u015f g\u00f6rseller gibi \u00f6zellikler de Next.js’in bu t\u00fcr projeler i\u00e7in ideal bir se\u00e7im olmas\u0131n\u0131 sa\u011flar.<\/p>\n

Di\u011fer yandan, Web Audio API, taray\u0131c\u0131da karma\u015f\u0131k ses i\u015flemleri yapmam\u0131z\u0131 sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript API’sidir. Ses dosyalar\u0131n\u0131 \u00e7almaktan \u00e7ok daha fazlas\u0131n\u0131 sunar; do\u011frudan ses dalgalar\u0131 sentezleyebilir, ses efektleri uygulayabilir, hatta canl\u0131 ses giri\u015flerini i\u015fleyebilir. Bir Morse kodu \u00e7eviricisi i\u00e7in, metni do\u011frudan ses sinyallerine d\u00f6n\u00fc\u015ft\u00fcrmek amac\u0131yla AudioContext<\/code>, OscillatorNode<\/code> ve GainNode<\/code> gibi temel yap\u0131 ta\u015flar\u0131n\u0131 kullanmam\u0131z gerekecek. OscillatorNode<\/code> belirli bir frekansta ses dalgalar\u0131 \u00fcretirken, GainNode<\/code> sesin \u015fiddetini kontrol etmemizi sa\u011flar. Bu API sayesinde, standart ses dosyalar\u0131na ba\u011fl\u0131 kalmadan, dinamik ve \u00f6zelle\u015ftirilebilir Morse kodu sesleri \u00fcretebiliriz. Bu, uygulaman\u0131n esnekli\u011fini art\u0131r\u0131rken, kullan\u0131c\u0131n\u0131n sesin frekans\u0131 veya h\u0131z\u0131 gibi parametreleri de\u011fi\u015ftirebilmesine olanak tan\u0131r. K\u0131sacas\u0131, Next.js 15 modern ve performansl\u0131 bir aray\u00fcz sa\u011flarken, Web Audio API taray\u0131c\u0131 i\u00e7inde kusursuz bir ses deneyimi sunar, bu da Morse kodu \u00e7evirici projemizi hem g\u00fc\u00e7l\u00fc hem de etkile\u015fimli k\u0131lar.<\/p>\n

\n Uzman \u0130pucu: Next.js’in App Router yap\u0131s\u0131, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin (\u00f6rn. metin giri\u015fi ve ses \u00e7\u0131k\u0131\u015f\u0131) sunucu veya istemci bile\u015fenleri olarak optimize edilmesine olanak tan\u0131r. Web Audio API’nin do\u011frudan taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 unutmay\u0131n, bu y\u00fczden ses \u00fcretim mant\u0131\u011f\u0131n\u0131n mutlaka bir “use client” direktifi i\u00e7eren bir istemci bile\u015feninde yer almas\u0131 gerekecektir. Bu ayr\u0131m, hem performans hem de geli\u015ftirme verimlili\u011fi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.\n<\/div>\n

Projemizi Ba\u015flatmak: Next.js 15 Ortam\u0131n\u0131 Nas\u0131l Kurar\u0131z?<\/h2>\n

Herhangi bir modern web uygulamas\u0131 geli\u015ftirme s\u00fcrecinde ilk ad\u0131m, uygun bir proje ortam\u0131 kurmakt\u0131r. Next.js 15 ile \u00e7al\u0131\u015fmaya ba\u015flamak da olduk\u00e7a basittir, zira g\u00fc\u00e7l\u00fc CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) ara\u00e7lar\u0131 bu s\u00fcreci b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r. Projemizi ba\u015flatmak i\u00e7in terminalimizi a\u00e7\u0131p a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rmam\u0131z yeterli olacakt\u0131r:<\/p>\n

\n  npx create-next-app@latest morse-translator-app\n<\/pre>\n
<\/code><\/p>\n
Bu komut, morse-translator-app<\/code> ad\u0131nda yeni bir Next.js projesi olu\u015fturacakt\u0131r. npx create-next-app@latest<\/code> ifadesi, Next.js'in mevcut en son kararl\u0131 s\u00fcr\u00fcm\u00fcn\u00fc (bu durumda 15 veya en yak\u0131n g\u00fcncel s\u00fcr\u00fcm\u00fcn\u00fc) kullanarak bir proje olu\u015fturulmas\u0131n\u0131 sa\u011flar. Kurulum sihirbaz\u0131 size TypeScript, ESLint, Tailwind CSS ve App Router gibi se\u00e7enekleri soracakt\u0131r. Bu projede, tip g\u00fcvenli\u011fi i\u00e7in TypeScript'i, kod kalitesi i\u00e7in ESLint'i ve h\u0131zl\u0131 stil olu\u015fturma i\u00e7in Tailwind CSS'i tercih etmek, geli\u015ftirme s\u00fcrecinizi olduk\u00e7a verimli hale getirecektir. App Router ise Next.js 13 ve sonras\u0131 s\u00fcr\u00fcmlerde gelen modern bir y\u00f6nlendirme ve veri getirme (data fetching) \u00e7\u00f6z\u00fcm\u00fcd\u00fcr ve bu projemizde de temel mimariyi olu\u015fturacakt\u0131r.<\/p>\n
Proje ba\u015far\u0131yla olu\u015fturulduktan sonra, olu\u015fturulan dizine ge\u00e7i\u015f yapmam\u0131z ve geli\u015ftirme sunucusunu ba\u015flatmam\u0131z gerekecek:<\/p>\n
\n  cd morse-translator-app\n  npm run dev\n<\/pre>\n
<\/code><\/p>\n
Bu komutlarla, uygulaman\u0131z http:\/\/localhost:3000<\/code> adresinde \u00e7al\u0131\u015fmaya ba\u015flayacakt\u0131r. Taray\u0131c\u0131n\u0131zda bu adrese giderek Next.js'in varsay\u0131lan kar\u015f\u0131lama sayfas\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\n
Proje yap\u0131s\u0131na gelince, App Router mimarisi app<\/code> dizini etraf\u0131nda \u015fekillenir. Temel olarak, bu dizinin alt\u0131nda yer alan her klas\u00f6r bir rotay\u0131 temsil eder ve i\u00e7erisindeki page.tsx<\/code> dosyas\u0131 o rotan\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc tan\u0131mlar. layout.tsx<\/code> dosyas\u0131 ise belirli bir rota segmenti veya t\u00fcm uygulama i\u00e7in payla\u015f\u0131lan bir d\u00fczeni belirler. Bizim projemizde, ana sayfam\u0131z i\u00e7in app\/page.tsx<\/code> dosyas\u0131n\u0131 kullanaca\u011f\u0131z. Ayr\u0131ca, Morse kodu \u00e7evirme mant\u0131\u011f\u0131 ve ses \u00fcretimini ayr\u0131 ayr\u0131 mod\u00fcllere ay\u0131rarak projemizin daha d\u00fczenli ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. \u00d6rne\u011fin, lib<\/code> veya utils<\/code> ad\u0131nda klas\u00f6rler olu\u015fturarak Morse kodu s\u00f6zl\u00fc\u011f\u00fcn\u00fc, metni Morse'a \u00e7evirme fonksiyonunu ve ses \u00e7alma fonksiyonlar\u0131n\u0131 burada tutabiliriz. components<\/code> klas\u00f6r\u00fc ise kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenlerimizi bar\u0131nd\u0131racakt\u0131r, \u00f6rne\u011fin bir metin giri\u015f alan\u0131 ve \u00e7eviri sonucunu g\u00f6steren bir bile\u015fen gibi.<\/p>\n
Bu yap\u0131 sayesinde, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini birbirinden ba\u011f\u0131ms\u0131z olarak geli\u015ftirebilir ve y\u00f6netebiliriz. Next.js 15'in sundu\u011fu Server Components ve Client Components ayr\u0131m\u0131 da burada devreye girer. Kullan\u0131c\u0131 etkile\u015fimi gerektiren (input alanlar\u0131, buton t\u0131klamalar\u0131 gibi) veya taray\u0131c\u0131ya \u00f6zg\u00fc API'leri (Web Audio API gibi) kullanan bile\u015fenlerin ba\u015f\u0131na 'use client'<\/code> y\u00f6nergesini eklememiz gerekecek. Aksi takdirde, Next.js varsay\u0131lan olarak bu bile\u015fenleri Server Component olarak kabul edecek ve taray\u0131c\u0131ya uygun \u015fekilde render etmeyebilir. Projemizin temel iskeleti bu \u015fekilde kuruldu\u011funda, art\u0131k Morse kodu mant\u0131\u011f\u0131n\u0131 geli\u015ftirmeye ve Web Audio API ile ses \u00fcretimine ge\u00e7ebiliriz.<\/p>\n
Morse Kodu Mant\u0131\u011f\u0131: Metin Nas\u0131l Ses Dalgalar\u0131na D\u00f6n\u00fc\u015f\u00fcr?<\/h2>\n
Bir metin dizgisini sesli Morse koduna d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in \u00f6ncelikle metni Morse koduna kar\u015f\u0131l\u0131k gelen noktalara ve \u00e7izgilere \u00e7evirmemiz gerekir. Bu s\u00fcre\u00e7, temelde bir harita \u00e7\u0131karma (mapping) i\u015flemidir. Her harfin, rakam\u0131n ve baz\u0131 \u00f6zel karakterlerin Morse kodunda belirli bir kar\u015f\u0131l\u0131\u011f\u0131 vard\u0131r. Bu kar\u015f\u0131l\u0131klar\u0131 i\u00e7eren bir JavaScript objesi veya Map yap\u0131s\u0131 olu\u015fturmak, \u00e7eviri mant\u0131\u011f\u0131m\u0131z\u0131n ilk ad\u0131m\u0131n\u0131 olu\u015fturur.<\/p>\n
\u00d6rne\u011fin, 'A' harfi '.-', 'B' harfi '-...' ve '1' rakam\u0131 '.----' \u015feklinde temsil edilir. Bo\u015fluklar da Morse kodunda \u00f6nemlidir; kelimeler aras\u0131 bo\u015fluklar ve karakterler aras\u0131 bo\u015fluklar, sesin ritmini ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 sa\u011flar. Standart Morse kodu kurallar\u0131na g\u00f6re:<\/p>\n
*   Bir nokta (dit) temel zaman birimidir.
\n*   Bir \u00e7izgi (dah) \u00fc\u00e7 nokta uzunlu\u011fundad\u0131r.
\n*   Ayn\u0131 karakter i\u00e7indeki noktalar ve \u00e7izgiler aras\u0131ndaki bo\u015fluk bir nokta uzunlu\u011fundad\u0131r.
\n*   Karakterler aras\u0131ndaki bo\u015fluk \u00fc\u00e7 nokta uzunlu\u011fundad\u0131r.
\n*   Kelimeler aras\u0131ndaki bo\u015fluk yedi nokta uzunlu\u011fundad\u0131r.<\/p>\n
Bu kurallar, sesi do\u011fru zamanlama ile \u00fcretebilmemiz i\u00e7in kritik \u00f6neme sahiptir. \u015eimdi, bu s\u00f6zl\u00fc\u011f\u00fc ve \u00e7eviri mant\u0131\u011f\u0131n\u0131 utils\/morse.ts<\/code> gibi bir dosyada tan\u0131mlayal\u0131m.<\/p>\n
\n  \/\/ utils\/morse.ts\n\n  interface MorseDictionary {\n    [key: string]: string;\n  }\n\n  export const morseDictionary: MorseDictionary = {\n    'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.', 'F': '..-.',\n    'G': '--.', 'H': '....', 'I': '..', 'J': '.---', 'K': '-.-', 'L': '.-..',\n    'M': '--', 'N': '-.', 'O': '---', 'P': '.--.', 'Q': '--.-', 'R': '.-.',\n    'S': '...', 'T': '-', 'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-',\n    'Y': '-.--', 'Z': '--..',\n    '0': '-----', '1': '.----', '2': '..---', '3': '...--', '4': '....-',\n    '5': '.....', '6': '-....', '7': '--...', '8': '---..', '9': '----.',\n    '.': '.-.-.-', ',': '--..--', '?': '..--..', '\/': '-..-.', '-': '-....-',\n    '(': '-.--.', ')': '-.--.-', '&': '.-...', ': '---...', ';': '-.-.-.',\n    '=': '-...-', '+': '.-.-.', '@': '.--.-.', '$': '...-..-', '!': '-.-.--',\n    ' ': ' ' \/\/ Kelime bo\u015flu\u011funu temsil etmek i\u00e7in \u00f6zel bir bo\u015fluk\n  };\n\n  export function textToMorse(text: string): string {\n    return text.toUpperCase().split('').map(char => {\n      \/\/ Karakter s\u00f6zl\u00fckte yoksa, tan\u0131ms\u0131z b\u0131rak veya hata ver.\n      \/\/ Basitlik i\u00e7in burada bo\u015fluk b\u0131rakal\u0131m.\n      return morseDictionary[char] || '';\n    }).join(' '); \/\/ Her karakterin Morse kar\u015f\u0131l\u0131\u011f\u0131 aras\u0131na bir bo\u015fluk koy.\n  }\n\n  \/\/ Morse kodunun zamanlama birimlerini de burada tan\u0131mlayabiliriz\n  export const MORSE_UNIT_DURATION_MS = 100; \/\/ 1 nokta (dit) 100 milisaniye\n\n  export const MORSE_TIMINGS = {\n    dit: MORSE_UNIT_DURATION_MS,\n    dah: MORSE_UNIT_DURATION_MS * 3,\n    intraCharSpace: MORSE_UNIT_DURATION_MS, \/\/ Ayn\u0131 karakter i\u00e7indeki nokta\/\u00e7izgi aras\u0131\n    charSpace: MORSE_UNIT_DURATION_MS * 3, \/\/ Karakterler aras\u0131 bo\u015fluk\n    wordSpace: MORSE_UNIT_DURATION_MS * 7, \/\/ Kelimeler aras\u0131 bo\u015fluk\n  };\n<\/pre>\n
<\/code><\/p>\n
textToMorse<\/code> fonksiyonu, ald\u0131\u011f\u0131 metni b\u00fcy\u00fck harflere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve her bir karakter i\u00e7in morseDictionary<\/code>'de arama yapar. Bulunan Morse kar\u015f\u0131l\u0131klar\u0131n\u0131 bir bo\u015flukla birle\u015ftirir. E\u011fer bir karakter s\u00f6zl\u00fckte yoksa, o karakterin yerine bo\u015f bir dize eklenir, bu da bilinmeyen karakterlerin atlanmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, \"Merhaba D\u00fcnya\" metni \"M E R H A B A   D \u00dc N Y A\" olarak \u00e7evrilir ve her harfin Morse kodu kar\u015f\u0131l\u0131\u011f\u0131 aras\u0131na standart bir bo\u015fluk eklenir.<\/p>\n
Bu metin tabanl\u0131 \u00e7eviri yap\u0131ld\u0131ktan sonra, ortaya \u00e7\u0131kan Morse kodunu (.-- . .-. .... .- .--. .--. . ... ...--<\/code>) tekrar ayr\u0131\u015ft\u0131rmam\u0131z ve her bir nokta, \u00e7izgi veya bo\u015fluk i\u00e7in Web Audio API'yi kullanarak belirli s\u00fcrelerde sesler \u00fcretmemiz gerekecektir. MORSE_UNIT_DURATION_MS<\/code> de\u011fi\u015fkeni, temel zaman birimini (bir noktan\u0131n s\u00fcresi) belirler ve di\u011fer t\u00fcm s\u00fcreler buna oranla hesaplan\u0131r. Bu, Morse kodunun h\u0131z\u0131n\u0131 ayarlamak istedi\u011fimizde sadece tek bir de\u011feri de\u011fi\u015ftirerek t\u00fcm zamanlamay\u0131 etkilememizi sa\u011flar. Bu \u015fekilde, metin girdi\u011fimizde, \u00f6ncelikle bu metni bir dizi Morse sembol\u00fcne \u00e7eviririz. Ard\u0131ndan, bu sembol dizisini okuyarak, her bir sembol i\u00e7in uygun sesleri ve sessizlikleri Web Audio API arac\u0131l\u0131\u011f\u0131yla s\u0131raya koyaca\u011f\u0131z. Bu yap\u0131, hem \u00e7eviri mant\u0131\u011f\u0131n\u0131 netle\u015ftirir hem de gelecekteki de\u011fi\u015fiklikler i\u00e7in esnek bir temel olu\u015fturur.<\/p>\n
Web Audio API ile Ses \u00dcretimi: Dot ve Dash Seslerini Nas\u0131l Olu\u015ftururuz?<\/h2>\n
Metin girdi\u011fimizi ve textToMorse<\/code> fonksiyonu ile Morse koduna \u00e7evirdi\u011fimizi varsayal\u0131m. \u015eimdi s\u0131ra, bu Morse kodunu ger\u00e7ek ses dalgalar\u0131na d\u00f6n\u00fc\u015ft\u00fcrmekte. \u0130\u015fte tam bu noktada Web Audio API devreye giriyor. Bu API, taray\u0131c\u0131da dinamik olarak ses \u00fcretmemizi ve kontrol etmemizi sa\u011flayan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bir Morse kodu \u00e7eviricisi i\u00e7in, belirli bir frekansta (genellikle 600-800 Hz aras\u0131) k\u0131sa s\u00fcreli sesler (noktalar) ve daha uzun s\u00fcreli sesler (\u00e7izgiler) \u00fcretmemiz gerekecek.<\/p>\n
\u00d6ncelikle, bir AudioContext<\/code> nesnesi olu\u015fturmam\u0131z gerekiyor. Bu nesne, t\u00fcm ses i\u015flemleri i\u00e7in bir ba\u011flam sa\u011flar ve Web Audio API'nin t\u00fcm di\u011fer d\u00fc\u011f\u00fcmlerinin (nodes) ba\u011flanaca\u011f\u0131 ana a\u011f ge\u00e7ididir. Taray\u0131c\u0131lar\u0131n otomatik oynatma politikalar\u0131 nedeniyle, AudioContext<\/code>'in genellikle bir kullan\u0131c\u0131 etkile\u015fimi (\u00f6rne\u011fin bir d\u00fc\u011fmeye t\u0131klama) sonucu ba\u015flat\u0131lmas\u0131 gerekti\u011fini unutmamal\u0131y\u0131z.<\/p>\n
\n  \/\/ utils\/audio.ts\n  'use client'; \/\/ Bu dosya istemci taraf\u0131nda \u00e7al\u0131\u015fmal\u0131d\u0131r\n\n  let audioContext: AudioContext | null = null;\n  const MORSE_FREQUENCY = 700; \/\/ Hz cinsinden Morse sesi frekans\u0131\n\n  function getAudioContext(): AudioContext {\n    if (!audioContext) {\n      audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();\n    }\n    return audioContext;\n  }\n\n  \/\/ Tek bir Morse sinyalini (nokta veya \u00e7izgi) \u00e7alan fonksiyon\n  function playSignal(duration: number, startTime: number): void {\n    const context = getAudioContext();\n    const oscillator = context.createOscillator();\n    const gainNode = context.createGain();\n\n    oscillator.type = 'sine'; \/\/ Sin\u00fcs dalgas\u0131 kullan\u0131yoruz, daha yumu\u015fak bir ses\n    oscillator.frequency.setValueAtTime(MORSE_FREQUENCY, context.currentTime); \/\/ Frekans ayar\u0131\n\n    gainNode.gain.setValueAtTime(0, startTime); \/\/ Sesi ba\u015fta s\u0131f\u0131rla\n    gainNode.gain.linearRampToValueAtTime(0.7, startTime + 0.01); \/\/ Yumu\u015fak y\u00fckseli\u015f (attack)\n    gainNode.gain.linearRampToValueAtTime(0, startTime + duration); \/\/ Yumu\u015fak ini\u015f (decay)\n\n    oscillator.connect(gainNode);\n    gainNode.connect(context.destination);\n\n    oscillator.start(startTime);\n    oscillator.stop(startTime + duration);\n  }\n\n  export async function playMorseSound(morseCode: string): Promise {\n    const context = getAudioContext();\n    let currentTime = context.currentTime; \/\/ Seslerin ba\u015flama zaman\u0131n\u0131 takip edece\u011fiz\n\n    const { dit, dah, intraCharSpace, charSpace, wordSpace } = await import('.\/morse').then(m => m.MORSE_TIMINGS);\n\n    for (const char of morseCode) {\n      if (char === '.') {\n        playSignal(dit \/ 1000, currentTime);\n        currentTime += (dit + intraCharSpace) \/ 1000;\n      } else if (char === '-') {\n        playSignal(dah \/ 1000, currentTime);\n        currentTime += (dah + intraCharSpace) \/ 1000;\n      } else if (char === ' ') {\n        \/\/ Kelimeler aras\u0131 bo\u015fluk i\u00e7in daha uzun bir duraklama\n        \/\/ Birden fazla bo\u015fluk gelirse sadece bir tanesini kelime bo\u015flu\u011fu olarak de\u011ferlendir.\n        if (morseCode.indexOf('  ') > -1 && char === ' ' && morseCode[morseCode.indexOf(char) - 1] === ' ') {\n             \/\/ Bu kontrol basit bir yakla\u015f\u0131md\u0131r, daha sa\u011flam bir ayr\u0131\u015ft\u0131rma gerekebilir\n             currentTime += wordSpace \/ 1000;\n        } else {\n             currentTime += charSpace \/ 1000;\n        }\n      }\n    }\n  }\n<\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki kod blo\u011funda, getAudioContext<\/code> fonksiyonu taray\u0131c\u0131da AudioContext<\/code> \u00f6rne\u011fini olu\u015fturur veya mevcut olan\u0131 d\u00f6nd\u00fcr\u00fcr. playSignal<\/code> fonksiyonu, belirli bir s\u00fcre (duration) ve ba\u015flang\u0131\u00e7 zaman\u0131 (startTime) i\u00e7in bir osilat\u00f6r (sin\u00fcs dalgas\u0131 \u00fcreten) ve bir gain (ses \u015fiddeti) d\u00fc\u011f\u00fcm\u00fc kullanarak tek bir ses sinyali \u00fcretir. GainNode<\/code> \u00fczerindeki linearRampToValueAtTime<\/code> metodlar\u0131, sesin aniden ba\u015flamak yerine yumu\u015fak bir y\u00fckseli\u015f (attack) ve ini\u015f (decay) yapmas\u0131n\u0131 sa\u011flayarak daha ho\u015f bir dinleme deneyimi sunar. Bu, \"t\u0131k\" seslerini engellemek i\u00e7in \u00f6nemlidir.<\/p>\n
playMorseSound<\/code> ana fonksiyonudur. Bu fonksiyon, textToMorse<\/code>'dan gelen Morse kodunu al\u0131r ve her bir karakteri (nokta, \u00e7izgi, bo\u015fluk) tek tek i\u015fler. Her sembol i\u00e7in playSignal<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r ve seslerin birbiri ard\u0131na do\u011fru zamanlamayla \u00e7al\u0131nmas\u0131n\u0131 sa\u011flamak i\u00e7in currentTime<\/code> de\u011fi\u015fkenini g\u00fcnceller. S\u00fcre de\u011ferlerini milisaniyeden saniyeye \u00e7evirmek i\u00e7in 1000'e b\u00f6ld\u00fc\u011f\u00fcm\u00fcze dikkat edin, zira Web Audio API zamanlamalar\u0131 saniye cinsinden bekler. Morse kodu zamanlamalar\u0131n\u0131 (MORSE_TIMINGS<\/code>) dinamik olarak import ederek, ba\u011f\u0131ml\u0131l\u0131klar\u0131 daha iyi y\u00f6netmi\u015f ve kodu mod\u00fcler hale getirmi\u015f oluyoruz.<\/p>\n
\u00d6nemli bir nokta, Web Audio API'nin zamanlamalar\u0131 AudioContext.currentTime<\/code> \u00fczerinden yapmas\u0131d\u0131r. setTimeout<\/code> kullanmak yerine bu yakla\u015f\u0131m\u0131 tercih etmek, seslerin taray\u0131c\u0131n\u0131n olay d\u00f6ng\u00fcs\u00fcnden ba\u011f\u0131ms\u0131z olarak daha hassas ve do\u011fru bir \u015fekilde senkronize edilmesini sa\u011flar. Bu, \u00f6zellikle karma\u015f\u0131k ses dizileri veya h\u0131zl\u0131 Morse kodlar\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu temel ses \u00fcretim mant\u0131\u011f\u0131 ile, art\u0131k kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturarak metin girdilerini al\u0131p bu sesleri tetikleyebiliriz.<\/p>\n
\n  Uzman \u0130pucu: Sesin \"t\u0131k\" yapmas\u0131n\u0131 \u00f6nlemek i\u00e7in GainNode<\/code>'un setValueAtTime<\/code> ve linearRampToValueAtTime<\/code> metodlar\u0131n\u0131 kullan\u0131n. Bu metodlar, ses seviyesinin aniden de\u011fi\u015fmesi yerine belirli bir zaman aral\u0131\u011f\u0131nda kademeli olarak de\u011fi\u015fmesini sa\u011flayarak, daha p\u00fcr\u00fczs\u00fcz bir ses ba\u015flang\u0131c\u0131 ve biti\u015fi sunar. Ayr\u0131ca, performans a\u00e7\u0131s\u0131ndan, AudioContext<\/code>'i her seferinde yeniden olu\u015fturmak yerine tek bir \u00f6rne\u011fini (singleton) kullanmaya \u00f6zen g\u00f6sterin.\n<\/div>\n
Kullan\u0131c\u0131 Aray\u00fcz\u00fc Geli\u015ftirme: Next.js ile Etkile\u015fimli Bir \u00c7evirici Nas\u0131l Yapar\u0131z?<\/h2>\n
Next.js projemizin temelini att\u0131k ve Morse kodu ile ses \u00fcretim mant\u0131\u011f\u0131n\u0131 olu\u015fturduk. \u015eimdi s\u0131ra, kullan\u0131c\u0131lar\u0131n metin girebilece\u011fi, \u00e7eviriyi ba\u015flatabilece\u011fi ve sesi dinleyebilece\u011fi etkile\u015fimli bir aray\u00fcz olu\u015fturmaya geldi. Bu aray\u00fcz\u00fc, Next.js'in App Router yap\u0131s\u0131 ve Client Components \u00f6zelliklerini kullanarak geli\u015ftirece\u011fiz. Kullan\u0131c\u0131 etkile\u015fimi gerektiren t\u00fcm bile\u015fenler use client<\/code> direktifi ile i\u015faretlenmelidir.<\/p>\n
components\/Translator.tsx<\/code> ad\u0131nda bir bile\u015fen olu\u015ftural\u0131m:<\/p>\n
\n  \/\/ components\/Translator.tsx\n  'use client';\n\n  import React, { useState } from 'react';\n  import { textToMorse } from '..\/utils\/morse';\n  import { playMorseSound } from '..\/utils\/audio';\n\n  export default function Translator() {\n    const [inputText, setInputText] = useState('');\n    const [morseOutput, setMorseOutput] = useState('');\n    const [isPlaying, setIsPlaying] = useState(false);\n\n    const handleTranslate = () => {\n      if (inputText.trim()) {\n        const morse = textToMorse(inputText);\n        setMorseOutput(morse);\n      } else {\n        setMorseOutput('');\n      }\n    };\n\n    const handlePlaySound = async () => {\n      if (morseOutput && !isPlaying) {\n        setIsPlaying(true);\n        try {\n          await playMorseSound(morseOutput);\n        } catch (error) {\n          console.error(\"Morse kodu sesi \u00e7al\u0131n\u0131rken bir hata olu\u015ftu:\", error);\n        } finally {\n          setIsPlaying(false);\n        }\n      }\n    };\n\n    return (\n      
\n        
Morse Kodu \u00c7evirici<\/h2>\n\n        
\n