Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + TextAliveでカッコいいLyric Applicatioinを作ろう!!

とすり
September 06, 2024

React + TextAliveでカッコいいLyric Applicatioinを作ろう!!

とすり

September 06, 2024
Tweet

More Decks by とすり

Other Decks in Programming

Transcript

  1. @tosuri13 TextAliveͷ࢖͍ํ with Re a ct ᶃ TextAliveͷ։ൃऀϙʔλϧͰऔಘͨ͠τʔΫϯΛݩ ʹɺTextAliveͷPl a

    yerΠϯελϯεΛ࡞੒͠·͢ ɹɾPl a yerΠϯελϯε͸ָۂΛ࠶ੜɾఀࢭ͢Δϝι ου΍ָۂͷ࠶ੜҐஔΛϓϩύςΟͱͯ͠อ͍࣋ͯ͠ ·͢ ᶃ ᶄ ᶅ ᶄ ͲͷλΠϛϯάͰԿΛ࣮ߦ͢Δ͔?ͱ͍͏Πϕϯτϋ ϯυϥΛPl a yerListnerͱͯ͠ొ࿥͠·͢ɻ ɹɾonTimerRe a dy: ָۂͷ४උ͕׬ྃͨ࣌͠ʹݺ͹ ΕΔϋϯυϥ ɹɾonTimeUpd a te: ָۂͷ࠶ੜதʹҰఆִؒͰݺ͹ ΕΔϋϯυϥ ᶅ ΠϕϯτϋϯυϥΛొ࿥͠ɺղੳָ͍ͨ͠ۂͷURL Λೖྗͯ͠ղੳ৘ใͷऔಘΛϦΫΤετ͠·͢
  2. @tosuri13 ָۂͷՎࢺΛऔಘ͢Δ!! Phr a se Word Ch a r Ch

    a r Word ָۂͷղੳ͕ऴྃ͢Δͱɺpl a yerΠϯελϯε͔Βղੳ͞ΕָͨۂͷՎࢺ৘ใΛ औಘ͢Δ͜ͱ͕Ͱ͖·͢!! Վࢺͷߏ଄͸ҎԼͷΑ͏ͳ਌ࢠؔ܎ʹͳ͍ͬͯΔͨ ΊɺΞϓϦ্ͰॊೈʹऔΓѻ͏͜ͱ͕Ͱ͖·͢!! ͜͜Ζ ͽΐΜͽΐΜ ͜͜Ζ ͽΐΜͽΐΜ ɾɾɾ Ch a r Ch a r ɾɾɾ ͜ Ζ ͽ Μ ݴޠ΍඼ࢺɺൃੜλΠϛϯάͳͲΛ ϓϩύςΟͱ͍ͯ࣋ͬͯ͠·͢!!
  3. @tosuri13 ϦϦοΫΞϓϦͷ࡞ྫΛ͝঺հ!! ࣮ࡍʹͲͷΑ͏ͳ΋ͷ͕࡞੒Ͱ͖Δͷ͔ɺRe a ctͱTextAliveΛ࢖ͬͨ؆୯ͳϦϦ οΫΞϓϦΛ࡞ͬͯΈ·ͨ͠!! ҎԼͷURL͔Β࣮ࡍʹԻָ෇͖Ͱ৮Ε·͢!!(PC؀ڥͷΈ) ɹ- https://re a

    ct-text a live-lyric a pp-s a mple.vercel. a pp ίʔυ͸Github্Ͱ΋ެ։͍ͯ͠ΔͷͰɺڵຯͷ͋Δํ͸೷͍ͯΈ͍ͯͩ͘͞!! ɹ- https://github.com/tosuri13/re a ct-text a live-lyric a pp-s a mple
  4. @tosuri13 Իָʹ༳ΕΔগঁͷίʔυ ᶃ ᶄ ᶃ MusicContext͸TextAliveͷղੳ৘ใΛ֨ೲͯ͠ ͍ΔίϯςΩετͰɺuseContextΛ࢖ͬͯάϩʔ όϧʹҾ͖ճͤΔΑ͏ʹ͍ͯ͠·͢ɻ ᶄ ·ͣuseE

    ff ectͰϏʔτͷมߋΛΩϟονͯ͠ॲ ཧΛ૸Βͤ·͢ɻ Ϗʔτ͕มߋ͞ΕͨΒɺTextAlive͔Βऔಘͨ͠Ϗʔ τͷִؒɾΠϯσοΫεΛ࢖ͬͯɺը૾Λࠨӈʹϩ ʔςʔγϣϯͤ͞·͢ɻ ͨͬͨ਺ߦͰԻָͱಉظͨ͠ՄѪ͍Ξχϝʔγϣϯ ͷ׬੒Ͱ͢!!