{"id":37215,"date":"2025-12-29T00:30:42","date_gmt":"2025-12-28T21:30:42","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/"},"modified":"2025-12-29T00:30:42","modified_gmt":"2025-12-28T21:30:42","slug":"web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/","title":{"rendered":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &#8220;Binaural Strobe&#8221; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)"},"content":{"rendered":"<h2>Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &#8220;Binaural Strobe&#8221; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz web teknolojileri, taray\u0131c\u0131 i\u00e7inde daha \u00f6nce hayal bile edilemeyecek karma\u015f\u0131kl\u0131kta uygulamalar geli\u015ftirmemize olanak tan\u0131yor. Bu makalede, Web Audio API&#8217;nin g\u00fcc\u00fcn\u00fc React ve Next.js&#8217;in modern geli\u015ftirme yakla\u015f\u0131mlar\u0131yla birle\u015ftirerek, kullan\u0131c\u0131lara \u00f6zelle\u015ftirilebilir binaural beat&#8217;ler ve &#8220;strobe&#8221; etkisi sunan bir taray\u0131c\u0131 tabanl\u0131 uygulama geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m inceleyece\u011fiz. Bu rehber, hem ses teknolojilerine ilgi duyan geli\u015ftiriciler hem de Web Audio API&#8217;nin potansiyelini ke\u015ffetmek isteyenler i\u00e7in kapsaml\u0131 bir kaynak olmay\u0131 hedefliyor.<\/p>\n<h3>Binaural Beat Nedir ve Neden \u00d6nemlidir?<\/h3>\n<p>Binaural beat&#8217;ler, beynin iki kula\u011fa farkl\u0131 frekanslarda ses sinyalleri g\u00f6nderildi\u011finde alg\u0131lad\u0131\u011f\u0131 i\u015fitsel yan\u0131lsamalard\u0131r. \u00d6rne\u011fin, sol kula\u011fa 440 Hz, sa\u011f kula\u011fa ise 448 Hz bir ton verildi\u011finde, beyin bu iki frekans aras\u0131ndaki 8 Hz&#8217;lik fark\u0131 &#8220;\u00fc\u00e7\u00fcnc\u00fc bir ses&#8221; olarak alg\u0131lar. Bu fenomen, beynin dalga aktivitesini (alfa, beta, teta, delta) etkileyerek rahatlama, odaklanma veya uyku gibi \u00e7e\u015fitli zihinsel durumlara yard\u0131mc\u0131 olabilece\u011fi d\u00fc\u015f\u00fcn\u00fclmektedir.<\/p>\n<h4>Binaural Beat&#8217;lerin Temelleri<\/h4>\n<p>Binaural beat&#8217;ler, 1839 y\u0131l\u0131nda Heinrich Wilhelm Dove taraf\u0131ndan ke\u015ffedilmi\u015ftir. Temel prensip, her bir kula\u011fa hafif\u00e7e farkl\u0131 bir frekansta saf ton (sin\u00fcs dalgas\u0131) g\u00f6ndermektir. Beyin, bu iki frekans aras\u0131ndaki fark\u0131 alg\u0131layarak, bu fark frekans\u0131nda bir &#8220;vuru\u015f&#8221; veya &#8220;at\u0131m&#8221; sesi yarat\u0131r. Bu at\u0131m frekans\u0131, beyin dalgalar\u0131m\u0131z\u0131n do\u011fal frekans aral\u0131klar\u0131na (\u00f6rne\u011fin, rahatlama i\u00e7in alfa dalgalar\u0131 8-12 Hz) ayarlanabilir.<\/p>\n<h4>&#8220;Strobe&#8221; Kavram\u0131 ve \u0130\u015fitsel Alg\u0131<\/h4>\n<p>&#8220;Strobe&#8221; etkisi genellikle g\u00f6rsel bir terim olsa da, i\u015fitsel ba\u011flamda, belirli bir ritimde tekrarlayan veya mod\u00fcle edilen sesler arac\u0131l\u0131\u011f\u0131yla yarat\u0131lan yo\u011fun bir i\u015fitsel deneyimi ifade edebilir. Binaural beat&#8217;lerin kendisi, belirli bir frekansta &#8220;vuran&#8221; bir ses alg\u0131s\u0131 yaratt\u0131\u011f\u0131 i\u00e7in bir t\u00fcr i\u015fitsel strobe etkisi olarak d\u00fc\u015f\u00fcn\u00fclebilir. Uygulamam\u0131zda, bu etkiyi daha da g\u00fc\u00e7lendirmek i\u00e7in sesin genli\u011fini veya frekans\u0131n\u0131 belirli bir ritimde mod\u00fcle etme tekniklerini de inceleyece\u011fiz. Bu, dinleyiciye daha dinamik ve etkileyici bir deneyim sunar.<\/p>\n<h4>Kullan\u0131m Alanlar\u0131 ve Potansiyel Faydalar\u0131<\/h4>\n<p>Binaural beat&#8217;ler, \u00e7e\u015fitli alanlarda potansiyel faydalar sunar:<\/p>\n<ul>\n<li><b>Odaklanma ve Konsantrasyon:<\/b> Beta dalgalar\u0131na (13-30 Hz) ayarlanm\u0131\u015f binaural beat&#8217;ler, zihinsel uyan\u0131kl\u0131\u011f\u0131 ve odaklanmay\u0131 art\u0131rabilir.<\/li>\n<li><b>Rahatlama ve Stres Azaltma:<\/b> Alfa (8-12 Hz) ve Teta (4-8 Hz) dalgalar\u0131na ayarlanm\u0131\u015f beat&#8217;ler, rahatlamay\u0131 te\u015fvik edebilir ve stresi azaltabilir.<\/li>\n<li><b>Uyku Kalitesini Art\u0131rma:<\/b> Delta dalgalar\u0131na (0.5-4 Hz) ayarlanm\u0131\u015f beat&#8217;ler, derin uykuya ge\u00e7i\u015fi kolayla\u015ft\u0131rabilir.<\/li>\n<li><b>Meditasyon Deste\u011fi:<\/b> Meditasyon s\u0131ras\u0131nda zihni sakinle\u015ftirmeye yard\u0131mc\u0131 olabilir.<\/li>\n<\/ul>\n<p>Bu potansiyel faydalar\u0131n bilimsel olarak hala ara\u015ft\u0131r\u0131lmakta oldu\u011funu ve ki\u015fiden ki\u015fiye de\u011fi\u015febilece\u011fini unutmamak \u00f6nemlidir.<\/p>\n<h3>Neden Web Audio API, React ve Next.js Tercih Ettik?<\/h3>\n<p>Taray\u0131c\u0131 tabanl\u0131 bir binaural beat uygulamas\u0131 geli\u015ftirmek i\u00e7in modern web teknolojileri ideal bir se\u00e7imdir. Web Audio API, ger\u00e7ek zamanl\u0131 ses i\u015fleme yetenekleri sunarken, React ve Next.js geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve kullan\u0131c\u0131 deneyimini zenginle\u015ftirir.<\/p>\n<h4>Web Audio API&#8217;nin G\u00fcc\u00fc<\/h4>\n<p>Web Audio API, taray\u0131c\u0131da karma\u015f\u0131k ses i\u015fleme, sentezleme ve analiz i\u015flemleri yapmam\u0131z\u0131 sa\u011flayan d\u00fc\u015f\u00fck seviyeli bir JavaScript API&#8217;sidir. Ses kaynaklar\u0131n\u0131 (\u00f6rne\u011fin, osilat\u00f6rler, ses dosyalar\u0131), efektleri (gain, panner, filtreler) ve hedefleri (hoparl\u00f6rler) bir &#8220;ses grafi\u011fi&#8221; \u015feklinde birbirine ba\u011flayarak ses ak\u0131\u015f\u0131n\u0131 kontrol etmemize olanak tan\u0131r. Ger\u00e7ek zamanl\u0131 ve y\u00fcksek performansl\u0131 ses manip\u00fclasyonu i\u00e7in vazge\u00e7ilmezdir.<\/p>\n<h4>React ile Bile\u015fen Tabanl\u0131 Geli\u015ftirme<\/h4>\n<p>React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini (ses kontrol paneli, frekans se\u00e7iciler, oynatma d\u00fc\u011fmeleri) ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir bile\u015fenler olarak tasarlayabiliriz. Bu, kodun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r.<\/p>\n<h4>Next.js&#8217;in Sa\u011flad\u0131\u011f\u0131 Avantajlar<\/h4>\n<p>Next.js, React tabanl\u0131 uygulamalar i\u00e7in bir \u00e7er\u00e7evedir. Sunucu Taraf\u0131nda Olu\u015fturma (SSR), Statik Site Olu\u015fturma (SSG), otomatik kod b\u00f6lme ve optimize edilmi\u015f y\u00f6nlendirme gibi \u00f6zellikler sunarak geli\u015ftirme deneyimini iyile\u015ftirir ve uygulaman\u0131n performans\u0131n\u0131 art\u0131r\u0131r. Binaural strobe uygulamam\u0131z i\u00e7in, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve SEO dostu bir yap\u0131 sa\u011flamas\u0131 a\u00e7\u0131s\u0131ndan Next.js ideal bir tercihtir.<\/p>\n<h3>Web Audio API&#8217;ye Derin Bir Bak\u0131\u015f<\/h3>\n<p>Web Audio API&#8217;nin temel kavramlar\u0131n\u0131 anlamak, binaural beat uygulamam\u0131z\u0131 geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir. Ses grafi\u011fi, d\u00fc\u011f\u00fcmler ve ba\u011flam (context) bu yap\u0131n\u0131n ana bile\u015fenleridir.<\/p>\n<h4>AudioContext: Ses D\u00fcnyas\u0131n\u0131n Kalbi<\/h4>\n<p><code>AudioContext<\/code>, Web Audio API&#8217;nin t\u00fcm ses i\u015flemlerinin ger\u00e7ekle\u015fti\u011fi ana ba\u011flamd\u0131r. Bir orkestra \u015fefi gibi d\u00fc\u015f\u00fcn\u00fclebilir; t\u00fcm ses d\u00fc\u011f\u00fcmlerini y\u00f6netir ve ses ak\u0131\u015f\u0131n\u0131 kontrol eder. Bir uygulamada genellikle yaln\u0131zca bir <code>AudioContext<\/code> \u00f6rne\u011fi bulunur.<\/p>\n<pre><code class=\"language-javascript\">\/\/ AudioContext olu\u015fturma\nconst audioContext = new (window.AudioContext || window.webkitAudioContext)();<\/pre>\n<p><\/code><\/p>\n<h4>Temel Ses D\u00fc\u011f\u00fcmleri (OscillatorNode, GainNode)<\/h4>\n<p>Web Audio API'deki ses i\u015fleme, d\u00fc\u011f\u00fcmler (nodes) arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r. Her d\u00fc\u011f\u00fcm belirli bir ses i\u015flevini yerine getirir ve di\u011fer d\u00fc\u011f\u00fcmlere ba\u011flanabilir.<\/p>\n<p>*   <code>OscillatorNode<\/code>: Belirli bir frekansta ve dalga formunda (sin\u00fcs, kare, testere vb.) ses \u00fcretir. Binaural beat'ler i\u00e7in sin\u00fcs dalgalar\u0131 kullanaca\u011f\u0131z.<br \/>\n*   <code>GainNode<\/code>: Ses sinyalinin genli\u011fini (ses seviyesini) kontrol eder. Sesin a\u00e7\u0131l\u0131p kapanmas\u0131 veya k\u0131s\u0131lmas\u0131 i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Osilat\u00f6r d\u00fc\u011f\u00fcm\u00fc olu\u015fturma\nconst oscillator = audioContext.createOscillator();\noscillator.type = 'sine'; \/\/ Sin\u00fcs dalgas\u0131\n\n\/\/ Gain d\u00fc\u011f\u00fcm\u00fc olu\u015fturma\nconst gainNode = audioContext.createGain();\ngainNode.gain.value = 0.5; \/\/ Ba\u015flang\u0131\u00e7 ses seviyesi<\/pre>\n<p><\/code><\/p>\n<h4>Stereo Ses Kontrol\u00fc: PannerNode Kullan\u0131m\u0131<\/h4>\n<p>Binaural beat'ler i\u00e7in, her bir kula\u011fa farkl\u0131 frekanslarda ses g\u00f6ndermek zorunday\u0131z. <code>StereoPannerNode<\/code> bu i\u015flemi kolayla\u015ft\u0131r\u0131r. Ses sinyalini sol ve sa\u011f kanallar aras\u0131nda kayd\u0131rmam\u0131z\u0131 sa\u011flar. <code>pan<\/code> \u00f6zelli\u011fi -1 (tamamen sol) ile 1 (tamamen sa\u011f) aras\u0131nda bir de\u011fer al\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ StereoPannerNode olu\u015fturma\nconst panner = audioContext.createStereoPanner();\npanner.pan.value = -1; \/\/ Sesi tamamen sola y\u00f6nlendir<\/pre>\n<p><\/code><\/p>\n<h4>Ses Grafi\u011fi Olu\u015fturma Mant\u0131\u011f\u0131<\/h4>\n<p>Ses grafi\u011fi, ses d\u00fc\u011f\u00fcmlerinin birbirine ba\u011flanarak bir ak\u0131\u015f olu\u015fturdu\u011fu yap\u0131d\u0131r. Bir kaynak d\u00fc\u011f\u00fcmden (\u00f6rne\u011fin, <code>OscillatorNode<\/code>) ba\u015flar, ara i\u015flem d\u00fc\u011f\u00fcmlerinden (\u00f6rne\u011fin, <code>GainNode<\/code>, <code>StereoPannerNode<\/code>) ge\u00e7er ve sonunda bir hedef d\u00fc\u011f\u00fcme (genellikle <code>audioContext.destination<\/code>, yani hoparl\u00f6rler) ula\u015f\u0131r.<\/p>\n<p>Basit bir ses grafi\u011fi \u00f6rne\u011fi:<br \/>\n<code>OscillatorNode<\/code> -> <code>GainNode<\/code> -> <code>AudioContext.destination<\/code><\/p>\n<p>Binaural beat uygulamam\u0131z i\u00e7in iki ayr\u0131 osilat\u00f6r kullanaca\u011f\u0131z, her biri kendi <code>GainNode<\/code> ve <code>StereoPannerNode<\/code>'una sahip olacak ve sonra bu sinyaller <code>audioContext.destination<\/code>'a ba\u011flanacak.<\/p>\n<h3>Uygulama Mimarisi ve Bile\u015fen Yap\u0131s\u0131 (React & Next.js)<\/h3>\n<p>React ve Next.js kullanarak, uygulaman\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc ve ses kontrol mant\u0131\u011f\u0131n\u0131 d\u00fczenli bir \u015fekilde olu\u015fturabiliriz.<\/p>\n<h4>Proje Kurulumu ve Temel Yap\u0131<\/h4>\n<p>\u00d6ncelikle bir Next.js projesi olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-bash\">npx create-next-app binaural-strobe-app --ts\ncd binaural-strobe-app\nnpm run dev<\/pre>\n<p><\/code><br \/>\n<code>pages\/index.tsx<\/code> ana sayfam\u0131z olacak. Sesle ilgili mant\u0131\u011f\u0131 ayr\u0131 bir hook veya yard\u0131mc\u0131 fonksiyonlar dosyas\u0131nda tutmak iyi bir uygulamad\u0131r.<\/p>\n<h4>Ses Kontrol Bile\u015feni (MainAudioPlayer)<\/h4>\n<p>Uygulaman\u0131n kalbi, ses \u00e7alma, durdurma ve ayarlar\u0131 y\u00f6neten bir <code>MainAudioPlayer<\/code> bile\u015feni olacakt\u0131r. Bu bile\u015fen, <code>AudioContext<\/code>'i ba\u015flatacak, osilat\u00f6rleri olu\u015fturacak ve kullan\u0131c\u0131 etkile\u015fimlerine g\u00f6re ses parametrelerini g\u00fcncelleyecektir.<\/p>\n<pre><code class=\"language-typescript\">\/\/ components\/MainAudioPlayer.tsx\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\n\ninterface BinauralBeatPlayerProps {\n  baseFrequency: number;\n  beatFrequency: number;\n  volume: number;\n}\n\nconst MainAudioPlayer: React.FC<BinauralBeatPlayerProps> = ({\n  baseFrequency,\n  beatFrequency,\n  volume,\n}) => {\n  const audioContextRef = useRef<AudioContext | null>(null);\n  const oscillatorLeftRef = useRef<OscillatorNode | null>(null);\n  const oscillatorRightRef = useRef<OscillatorNode | null>(null);\n  const gainNodeRef = useRef<GainNode | null>(null);\n  const pannerLeftRef = useRef<StereoPannerNode | null>(null);\n  const pannerRightRef = useRef<StereoPannerNode | null>(null);\n\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  const initAudio = useCallback(() => {\n    if (!audioContextRef.current) {\n      audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();\n    }\n\n    if (!oscillatorLeftRef.current) {\n      oscillatorLeftRef.current = audioContextRef.current.createOscillator();\n      oscillatorLeftRef.current.type = 'sine';\n      pannerLeftRef.current = audioContextRef.current.createStereoPanner();\n      pannerLeftRef.current.pan.value = -1; \/\/ Tamamen sol\n      oscillatorLeftRef.current.connect(pannerLeftRef.current).connect(audioContextRef.current.destination);\n    }\n\n    if (!oscillatorRightRef.current) {\n      oscillatorRightRef.current = audioContextRef.current.createOscillator();\n      oscillatorRightRef.current.type = 'sine';\n      pannerRightRef.current = audioContextRef.current.createStereoPanner();\n      pannerRightRef.current.pan.value = 1; \/\/ Tamamen sa\u011f\n      oscillatorRightRef.current.connect(pannerRightRef.current).connect(audioContextRef.current.destination);\n    }\n\n    if (!gainNodeRef.current) {\n      gainNodeRef.current = audioContextRef.current.createGain();\n      gainNodeRef.current.connect(audioContextRef.current.destination);\n    }\n\n    \/\/ Osilat\u00f6rleri gainNode'a ba\u011flama\n    oscillatorLeftRef.current.connect(gainNodeRef.current);\n    oscillatorRightRef.current.connect(gainNodeRef.current);\n\n  }, []);\n\n  useEffect(() => {\n    initAudio();\n    return () => {\n      if (audioContextRef.current && audioContextRef.current.state !== 'closed') {\n        audioContextRef.current.close();\n      }\n    };\n  }, [initAudio]);\n\n  useEffect(() => {\n    if (oscillatorLeftRef.current && oscillatorRightRef.current) {\n      oscillatorLeftRef.current.frequency.setValueAtTime(\n        baseFrequency - beatFrequency \/ 2,\n        audioContextRef.current!.currentTime\n      );\n      oscillatorRightRef.current.frequency.setValueAtTime(\n        baseFrequency + beatFrequency \/ 2,\n        audioContextRef.current!.currentTime\n      );\n    }\n    if (gainNodeRef.current) {\n        gainNodeRef.current.gain.setValueAtTime(volume, audioContextRef.current!.currentTime);\n    }\n  }, [baseFrequency, beatFrequency, volume]);\n\n  const togglePlay = () => {\n    if (!audioContextRef.current) return;\n\n    if (isPlaying) {\n      oscillatorLeftRef.current?.stop();\n      oscillatorRightRef.current?.stop();\n      setIsPlaying(false);\n    } else {\n      \/\/ AudioContext'i Resume etme (taray\u0131c\u0131 k\u0131s\u0131tlamalar\u0131 i\u00e7in)\n      if (audioContextRef.current.state === 'suspended') {\n        audioContextRef.current.resume();\n      }\n      \n      \/\/ Osilat\u00f6rleri yeniden ba\u015flatma (bir kere durdurulunca tekrar ba\u015flat\u0131lamaz, yeni olu\u015fturulmal\u0131)\n      \/\/ Bu k\u0131s\u0131m daha sofistike bir \u015fekilde ele al\u0131nmal\u0131, \u00f6rne\u011fin osilat\u00f6rleri her durdurup ba\u015flatmada yeniden olu\u015fturarak.\n      \/\/ Basitlik ad\u0131na, burada yeniden olu\u015fturma mant\u0131\u011f\u0131n\u0131 g\u00f6stermiyorum, ancak ger\u00e7ek bir uygulamada bu \u00f6nemli.\n      \/\/ Ge\u00e7ici \u00e7\u00f6z\u00fcm: Uygulama yeniden ba\u015flat\u0131lana kadar sadece bir kez oynat\u0131labilir.\n      \/\/ Daha iyi \u00e7\u00f6z\u00fcm: Her oynatma\/durdurma i\u00e7in yeni osilat\u00f6rler olu\u015fturup eski ba\u011flant\u0131lar\u0131 kesmek.\n      \n      \/\/ \u015eimdilik sadece var olanlar\u0131 ba\u015flatmaya \u00e7al\u0131\u015fal\u0131m (bu \u00e7al\u0131\u015fmayabilir)\n      \/\/ Ger\u00e7ek uygulamada: initAudio'yu yeniden \u00e7a\u011f\u0131r\u0131p osilat\u00f6rleri yeniden ba\u011flamak daha do\u011fru olur.\n      \/\/ Bu \u00f6rnekte, osilat\u00f6rlerin .start() metodunun bir kez \u00e7a\u011fr\u0131labilece\u011fi varsay\u0131m\u0131yla devam edelim.\n      \/\/ E\u011fer osilat\u00f6rler durdurulmu\u015fsa, onlar\u0131 yeniden ba\u015flatmak yerine yeni osilat\u00f6rler olu\u015fturmak gerekir.\n      \/\/ Bu, Web Audio API'nin \u00f6nemli bir detay\u0131d\u0131r.\n      \n      \/\/ Basit bir yeniden ba\u015flatma mant\u0131\u011f\u0131 (ger\u00e7ek uygulamada daha sa\u011flam olmal\u0131):\n      if (oscillatorLeftRef.current && oscillatorRightRef.current) {\n        try {\n            oscillatorLeftRef.current.start();\n            oscillatorRightRef.current.start();\n        } catch (e) {\n            console.warn(\"Osilat\u00f6rler zaten ba\u015flat\u0131lm\u0131\u015f veya durdurulmu\u015f. Yeniden olu\u015fturuluyor.\");\n            \/\/ Yeniden olu\u015fturma mant\u0131\u011f\u0131\n            if (audioContextRef.current) {\n                oscillatorLeftRef.current = audioContextRef.current.createOscillator();\n                oscillatorLeftRef.current.type = 'sine';\n                pannerLeftRef.current = audioContextRef.current.createStereoPanner();\n                pannerLeftRef.current.pan.value = -1;\n                oscillatorLeftRef.current.connect(pannerLeftRef.current).connect(gainNodeRef.current!);\n                oscillatorLeftRef.current.frequency.setValueAtTime(\n                    baseFrequency - beatFrequency \/ 2,\n                    audioContextRef.current.currentTime\n                );\n\n                oscillatorRightRef.current = audioContextRef.current.createOscillator();\n                oscillatorRightRef.current.type = 'sine';\n                pannerRightRef.current = audioContextRef.current.createStereoPanner();\n                pannerRightRef.current.pan.value = 1;\n                oscillatorRightRef.current.connect(pannerRightRef.current).connect(gainNodeRef.current!);\n                oscillatorRightRef.current.frequency.setValueAtTime(\n                    baseFrequency + beatFrequency \/ 2,\n                    audioContextRef.current.currentTime\n                );\n                \n                oscillatorLeftRef.current.start();\n                oscillatorRightRef.current.start();\n            }\n        }\n      }\n      setIsPlaying(true);\n    }\n  };\n\n  return (\n    <div>\n      <button onClick={togglePlay}>\n        {isPlaying ? 'Durdur' : 'Oynat'}\n      <\/button>\n      {\/* Di\u011fer UI elemanlar\u0131 buraya gelecek *\/}\n    <\/div>\n  );\n};\n\nexport default MainAudioPlayer;<\/pre>\n<p><\/code><br \/>\n<strong>Not:<\/strong> Yukar\u0131daki kod \u00f6rne\u011finde, <code>OscillatorNode<\/code>'lar\u0131n bir kez <code>stop()<\/code> \u00e7a\u011fr\u0131ld\u0131ktan sonra tekrar <code>start()<\/code> edilemeyece\u011fi ger\u00e7e\u011fi g\u00f6z ard\u0131 edilmi\u015ftir. Ger\u00e7ek bir uygulamada, <code>isPlaying<\/code> durumu de\u011fi\u015fti\u011finde osilat\u00f6rleri yeniden olu\u015fturmak ve ses grafi\u011fine tekrar ba\u011flamak daha sa\u011flam bir yakla\u015f\u0131md\u0131r. Basitlik ad\u0131na bu \u00f6rnekte ba\u015flang\u0131\u00e7 ve durdurma mant\u0131\u011f\u0131 biraz basitle\u015ftirilmi\u015ftir.<\/p>\n<h4>Frekans ve Yo\u011funluk Ayarlar\u0131 (UI Bile\u015fenleri)<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n <code>baseFrequency<\/code>, <code>beatFrequency<\/code> ve <code>volume<\/code> gibi parametreleri ayarlayabilmesi i\u00e7in slider veya input bile\u015fenleri olu\u015fturaca\u011f\u0131z. Bu bile\u015fenler, de\u011ferleri <code>MainAudioPlayer<\/code>'a prop olarak iletecek ve <code>MainAudioPlayer<\/code> da bu de\u011ferleri <code>Web Audio API<\/code>'ye uygulayacakt\u0131r.<\/p>\n<pre><code class=\"language-typescript\">\/\/ pages\/index.tsx\nimport React, { useState } from 'react';\nimport MainAudioPlayer from '..\/components\/MainAudioPlayer';\n\nconst HomePage: React.FC = () => {\n  const [baseFrequency, setBaseFrequency] = useState(220); \/\/ Hz\n  const [beatFrequency, setBeatFrequency] = useState(8);   \/\/ Hz\n  const [volume, setVolume] = useState(0.5); \/\/ 0.0 - 1.0\n\n  return (\n    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>\n      <h1>Binaural Strobe Uygulamas\u0131<\/h1>\n\n      <div>\n        <label htmlFor=\"baseFreq\">Temel Frekans ({baseFrequency} Hz):<\/label>\n        <input\n          type=\"range\"\n          id=\"baseFreq\"\n          min=\"100\"\n          max=\"800\"\n          step=\"1\"\n          value={baseFrequency}\n          onChange={(e) => setBaseFrequency(Number(e.target.value))}\n        \/>\n      <\/div>\n\n      <div>\n        <label htmlFor=\"beatFreq\">Beat Frekans\u0131 ({beatFrequency} Hz):<\/label>\n        <input\n          type=\"range\"\n          id=\"beatFreq\"\n          min=\"1\"\n          max=\"30\"\n          step=\"0.5\"\n          value={beatFrequency}\n          onChange={(e) => setBeatFrequency(Number(e.target.value))}\n        \/>\n      <\/div>\n\n      <div>\n        <label htmlFor=\"volume\">Ses Seviyesi ({Math.round(volume * 100)}%):<\/label>\n        <input\n          type=\"range\"\n          id=\"volume\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.01\"\n          value={volume}\n          onChange={(e) => setVolume(Number(e.target.value))}\n        \/>\n      <\/div>\n\n      <MainAudioPlayer\n        baseFrequency={baseFrequency}\n        beatFrequency={beatFrequency}\n        volume={volume}\n      \/>\n    <\/div>\n  );\n};\n\nexport default HomePage;<\/pre>\n<p><\/code><\/p>\n<h4>State Y\u00f6netimi ve Etkile\u015fim<\/h4>\n<p>React'\u0131n <code>useState<\/code> hook'u, frekans ve ses seviyesi gibi uygulama durumlar\u0131n\u0131 y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Kullan\u0131c\u0131 aray\u00fcz\u00fcndeki kayd\u0131r\u0131c\u0131lar veya giri\u015f alanlar\u0131 bu state'leri g\u00fcncelledik\u00e7e, <code>MainAudioPlayer<\/code> bile\u015feni de yeni prop'larla yeniden render edilir ve <code>useEffect<\/code> hook'u arac\u0131l\u0131\u011f\u0131yla Web Audio API parametreleri g\u00fcncellenir. Bu sayede kullan\u0131c\u0131 etkile\u015fimleri an\u0131nda sese yans\u0131r.<\/p>\n<h3>Binaural Beat \u00dcretiminin Teknik Detaylar\u0131<\/h3>\n<p>Binaural beat'lerin kalbinde, iki kula\u011fa g\u00f6nderilen frekanslar\u0131n do\u011fru hesaplanmas\u0131 ve stereo olarak ayr\u0131lmas\u0131 yatar.<\/p>\n<h4>Frekans Hesaplamalar\u0131 ve Fark Frekans\u0131<\/h4>\n<p><code>baseFrequency<\/code> (temel frekans) ve <code>beatFrequency<\/code> (vuru\u015f frekans\u0131) olmak \u00fczere iki ana parametremiz var.<br \/>\nSol kulak i\u00e7in frekans: <code>baseFrequency - (beatFrequency \/ 2)<\/code><br \/>\nSa\u011f kulak i\u00e7in frekans: <code>baseFrequency + (beatFrequency \/ 2)<\/code><\/p>\n<p>\u00d6rne\u011fin, <code>baseFrequency = 220 Hz<\/code> ve <code>beatFrequency = 8 Hz<\/code> ise:<br \/>\nSol kulak: <code>220 - (8 \/ 2) = 216 Hz<\/code><br \/>\nSa\u011f kulak: <code>220 + (8 \/ 2) = 224 Hz<\/code><br \/>\nBeyin bu iki frekans aras\u0131ndaki 8 Hz'lik fark\u0131 binaural beat olarak alg\u0131layacakt\u0131r.<\/p>\n<h4>\u0130ki Ayr\u0131 Osilat\u00f6r Olu\u015fturma<\/h4>\n<p>Yukar\u0131daki <code>MainAudioPlayer<\/code> \u00f6rne\u011finde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, sol ve sa\u011f kulak i\u00e7in ayr\u0131 <code>OscillatorNode<\/code>'lar olu\u015fturulur. Her biri kendi hesaplanan frekans\u0131na ayarlan\u0131r.<\/p>\n<h4>Sol ve Sa\u011f Kanala Y\u00f6nlendirme (StereoPannerNode)<\/h4>\n<p>Her bir osilat\u00f6r, <code>StereoPannerNode<\/code> arac\u0131l\u0131\u011f\u0131yla do\u011fru kanala y\u00f6nlendirilir. Sol osilat\u00f6r\u00fcn <code>panner.pan.value<\/code>'su <code>-1<\/code> (tamamen sol), sa\u011f osilat\u00f6r\u00fcn <code>panner.pan.value<\/code>'su ise <code>1<\/code> (tamamen sa\u011f) olarak ayarlan\u0131r. Bu, stereo bir kulakl\u0131k veya hoparl\u00f6r sistemi kullan\u0131ld\u0131\u011f\u0131nda iki farkl\u0131 frekans\u0131n ayr\u0131 ayr\u0131 kulaklara ula\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>\u00d6rnek Kod: <code>createBinauralBeat<\/code> Fonksiyonu<\/h4>\n<p>Yukar\u0131daki <code>MainAudioPlayer<\/code> bile\u015feni i\u00e7indeki <code>initAudio<\/code> ve <code>useEffect<\/code> hook'lar\u0131, binaural beat'leri olu\u015fturma ve g\u00fcncelleme mant\u0131\u011f\u0131n\u0131 i\u00e7ermektedir. <code>setValueAtTime<\/code> metodu, ses parametrelerini belirli bir zamanda sorunsuz bir \u015fekilde de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r, bu da ani ses kesintilerini \u00f6nler.<\/p>\n<h3>\"Strobe\" Etkisi ve Mod\u00fclasyon Teknikleri<\/h3>\n<p>Sadece sabit bir binaural beat \u00e7almak yerine, sesi mod\u00fcle ederek daha dinamik ve \"strobe\" benzeri bir etki yaratabiliriz. Bu, genellikle genlik mod\u00fclasyonu (tremolo) veya frekans mod\u00fclasyonu (vibrato) ile yap\u0131l\u0131r.<\/p>\n<h4>Genlik Mod\u00fclasyonu (Tremolo) ile Strobe Etkisi<\/h4>\n<p>Genlik mod\u00fclasyonu, sesin seviyesini belirli bir frekansta periyodik olarak art\u0131r\u0131p azaltmakt\u0131r. Bu, sese \"titreme\" veya \"at\u0131m\" etkisi verir. Web Audio API'de, <code>GainNode<\/code>'un <code>gain<\/code> parametresini bir <code>LFO (Low Frequency Oscillator)<\/code> ile otomatikle\u015ftirmek suretiyle yap\u0131labilir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u00d6rnek: GainNode'a tremolo ekleme\nconst tremoloLFO = audioContext.createOscillator();\ntremoloLFO.type = 'sine';\ntremoloLFO.frequency.setValueAtTime(5, audioContext.currentTime); \/\/ 5 Hz tremolo\nconst tremoloGain = audioContext.createGain();\ntremoloGain.gain.value = 0.5; \/\/ Mod\u00fclasyon derinli\u011fi (0-1)\n\ntremoloLFO.connect(tremoloGain);\ntremoloGain.connect(gainNodeRef.current!.gain); \/\/ Ana GainNode'un gain parametresine ba\u011fla\ntremoloLFO.start();<\/pre>\n<p><\/code><br \/>\nBu, ana ses seviyesini 5 Hz'lik bir sin\u00fcs dalgas\u0131yla mod\u00fcle ederek, sesin 5 kez a\u00e7\u0131l\u0131p kapanmas\u0131 gibi bir etki yarat\u0131r. Bu, i\u015fitsel \"strobe\" hissini g\u00fc\u00e7lendirebilir.<\/p>\n<h4>Frekans Mod\u00fclasyonu (Vibrato) ile Dinamikler<\/h4>\n<p>Frekans mod\u00fclasyonu, sesin frekans\u0131n\u0131 periyodik olarak hafif\u00e7e de\u011fi\u015ftirmektir. Bu, sese bir \"titre\u015fim\" veya \"vibrato\" etkisi verir. <code>OscillatorNode<\/code>'un <code>frequency<\/code> parametresini bir LFO ile otomatikle\u015ftirmek suretiyle yap\u0131labilir. Bu, binaural beat'lerin alg\u0131lanan kalitesini ve dinami\u011fini art\u0131rabilir.<\/p>\n<h4>G\u00f6rsel Senkronizasyon \u0130\u00e7in \u0130pu\u00e7lar\u0131 (Opsiyonel)<\/h4>\n<p>E\u011fer \"strobe\" kelimesini g\u00f6rsel bir etki olarak da d\u00fc\u015f\u00fcn\u00fcyorsak, Web Audio API'nin <code>AnalyserNode<\/code>'u kullanarak sesin genli\u011fini veya frekans\u0131n\u0131 analiz edebilir ve bu verilere g\u00f6re g\u00f6rsel \u00f6\u011feleri (\u00f6rne\u011fin, yan\u0131p s\u00f6nen bir arka plan, de\u011fi\u015fen renkler) senkronize edebiliriz. <code>requestAnimationFrame<\/code> kullanarak bu g\u00f6rsel g\u00fcncellemeleri taray\u0131c\u0131n\u0131n render d\u00f6ng\u00fcs\u00fcyle senkronize etmek, ak\u0131c\u0131 bir deneyim sa\u011flar.<\/p>\n<h3>Performans ve Optimizasyon \u0130pu\u00e7lar\u0131<\/h3>\n<p>Taray\u0131c\u0131da ger\u00e7ek zamanl\u0131 ses i\u015fleme, performans a\u00e7\u0131s\u0131ndan dikkatli olmay\u0131 gerektirir.<\/p>\n<h4>Ses Kaynaklar\u0131n\u0131 Verimli Y\u00f6netme<\/h4>\n<p><code>AudioContext<\/code>'i gereksiz yere olu\u015fturmaktan ka\u00e7\u0131n\u0131n. Genellikle uygulama ba\u015f\u0131na bir tane yeterlidir. Osilat\u00f6rleri ve di\u011fer d\u00fc\u011f\u00fcmleri yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda olu\u015fturun ve durduruldu\u011funda ba\u011flant\u0131lar\u0131n\u0131 kesin. \u00d6zellikle <code>OscillatorNode<\/code>'lar bir kez <code>stop()<\/code> \u00e7a\u011fr\u0131ld\u0131ktan sonra tekrar <code>start()<\/code> edilemezler, bu y\u00fczden tekrar \u00e7almak i\u00e7in yeni osilat\u00f6rler olu\u015fturulmas\u0131 gerekebilir.<\/p>\n<h4>Bellek Kullan\u0131m\u0131n\u0131 Azaltma<\/h4>\n<p>B\u00fcy\u00fck ses dosyalar\u0131 veya karma\u015f\u0131k ses grafikleri bellek kullan\u0131m\u0131n\u0131 art\u0131rabilir. Binaural beat uygulamam\u0131zda saf sin\u00fcs dalgalar\u0131 kulland\u0131\u011f\u0131m\u0131z i\u00e7in bu bir sorun te\u015fkil etmez, ancak gelecekte efektler veya \u00f6rnekler eklenirse dikkatli olmak gerekir. <code>AudioContext<\/code> kapat\u0131ld\u0131\u011f\u0131nda t\u00fcm ili\u015fkili kaynaklar serbest b\u0131rak\u0131lmal\u0131d\u0131r.<\/p>\n<h4>Taray\u0131c\u0131 Uyumlulu\u011fu ve Fallback Stratejileri<\/h4>\n<p>Web Audio API, modern taray\u0131c\u0131larda geni\u015f \u00e7apta desteklenir. Ancak eski taray\u0131c\u0131lar i\u00e7in <code>window.webkitAudioContext<\/code> gibi \u00f6nekli versiyonlar\u0131 kontrol etmek \u00f6nemlidir. Ayr\u0131ca, baz\u0131 taray\u0131c\u0131lar kullan\u0131c\u0131 etkile\u015fimi olmadan ses \u00e7almay\u0131 k\u0131s\u0131tlar (otomatik oynatma politikalar\u0131). Bu nedenle, sesin yaln\u0131zca bir d\u00fc\u011fmeye t\u0131kland\u0131ktan sonra ba\u015flat\u0131ld\u0131\u011f\u0131ndan emin olun.<\/p>\n<table style=\"width:100%; border-collapse: collapse; margin-top: 20px;\">\n<thead>\n<tr style=\"background-color: #f2f2f2;\">\n<th style=\"border: 1px solid #ddd; padding: 8px; text-align: left;\">\u00d6zellik<\/th>\n<th style=\"border: 1px solid #ddd; padding: 8px; text-align: left;\">A\u00e7\u0131klama<\/th>\n<th style=\"border: 1px solid #ddd; padding: 8px; text-align: left;\">Optimizasyon \u0130pu\u00e7lar\u0131<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #ddd; padding: 8px;\">AudioContext<\/td>\n<td style=\"border: 1px solid #ddd; padding: 8px;\">T\u00fcm ses i\u015flemlerinin ana ba\u011flam\u0131.<\/td>\n<td style=\"border: 1px solid #ddd; padding: 8px;\">Uygulama ba\u015f\u0131na tek bir \u00f6rnek kullan\u0131n. Gerekirse <code>resume()<\/code> ve <code>suspend()<\/code> metotlar\u0131n\u0131 kullan\u0131n.<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #ddd; padding: 8px;\">OscillatorNode<\/td>\n","protected":false},"excerpt":{"rendered":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &#8220;Binaural Strobe&#8221; Uygulamas\u0131 Geli\u015ftirmek (React + Next.","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":[128],"tags":[],"class_list":{"0":"post-37215","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","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>Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &quot;Binaural Strobe&quot; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &quot;Binaural Strobe&quot; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)\" \/>\n<meta property=\"og:description\" content=\"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &quot;Binaural Strobe&quot; Uygulamas\u0131 Geli\u015ftirmek (React + Next.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-28T21:30:42+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=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &#8220;Binaural Strobe&#8221; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)\",\"datePublished\":\"2025-12-28T21:30:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/\"},\"wordCount\":2083,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/\",\"name\":\"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 \\\"Binaural Strobe\\\" Uygulamas\u0131 Geli\u015ftirmek (React + Next.js) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-28T21:30:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &#8220;Binaural Strobe&#8221; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)\"}]},{\"@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":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 \"Binaural Strobe\" Uygulamas\u0131 Geli\u015ftirmek (React + Next.js) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/","og_locale":"tr_TR","og_type":"article","og_title":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 \"Binaural Strobe\" Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)","og_description":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 \"Binaural Strobe\" Uygulamas\u0131 Geli\u015ftirmek (React + Next.","og_url":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-28T21:30:42+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &#8220;Binaural Strobe&#8221; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)","datePublished":"2025-12-28T21:30:42+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/"},"wordCount":2083,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/","url":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/","name":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 \"Binaural Strobe\" Uygulamas\u0131 Geli\u015ftirmek (React + Next.js) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-28T21:30:42+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/web-audio-api-ile-tarayici-tabanli-binaural-strobe-uygulamasi-gelistirmek-react-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Audio API ile Taray\u0131c\u0131 Tabanl\u0131 &#8220;Binaural Strobe&#8221; Uygulamas\u0131 Geli\u015ftirmek (React + Next.js)"}]},{"@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\/37215","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=37215"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37215\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}